[AWS EC2] CloudFront로 서비스하던 React App을 EC2로 옮기기(1)

이전 아키텍처에서는 프론트엔드 소스를 빌드하여 S3에 저장하고 이를 CloudFront를 통해 서비스하였습니다.

 

이번에는 아키텍처를 변경하여 다시 EC2를 통해 React 서비스를 운영하고 기존 백엔드와 연결하는 작업을 진행해보겠습니다.

 

기존 아키텍처와 변경된 아키텍처를 비교하면 다음과 같습니다.

 

 

이 글은 기존 아키텍처가 생성되어 있다는 가정하에 기존 아키텍처를 수정해 나가는 방식으로 진행됩니다. 따라서 기존 아키텍처가 없는 경우 아래 글들을 참고하여 필요한 리소스들을 구성하시기 바랍니다.

 

1. 새로운 EC2를 위한 보안 그룹 생성

Private Subnet에 nginx가 설치된 EC2를 생성하기 전 이를 위한 보안 그룹을 생성합니다.

 

 

2. Private Subnet에 EC2 생성하기

기존 생성한 EC2 중 nginx가 설치된 EC2가 있기 때문에 이를 이미지화하여 새로운 EC2 2개를 가용영역 2a, 2c에 생성해보겠습니다.

 

nginx가 설치된 EC2가 없는 경우 다음 글을 참고해주세요.

EC2 생성: https://developerbee.tistory.com/204

nginx 설치: https://developerbee.tistory.com/205

 

먼저 원하는 EC2를 선택하고 이미지를 생성합니다.

 

 

이미지 생성이 완료되면 해당 이미지를 통해 EC2를 새로 생성합니다.

 

이때 주의할 점은 Subnet을 기존 백엔드 노드 서버가 설치된 EC2가 있는 Private Subnet을 선택해야 하고 퍼블릭 IP 할당은 비활성화합니다. 또한, 보안그룹 선택 시 위에서 생성한 보안그룹을 선택합니다. (EC2 생성 과정의 경우 사진은 생략합니다.)

 

마지막으로 키 페어를 선택하는데 기존 EC2 접속용 키 페어를 그대로 사용하여도 되고 새로 발급 받아도 무관합니다. 새로 발급 받는 경우 반드시 다운받아 잘 보관해주세요.

 

❗️새로운 EC2가 생성되면 CodeDeploy를 사용할 수 있도록 IAM 역할을 수정합니다. 미리 역할이 만들어지지 않은 경우 아래 링크를 참고하여 역할을 생성합니다.

EC2가 CodeDeploy를 사용할 수 있도록 역할 생성: https://developerbee.tistory.com/211

 

지금까지 변경된 구조를 살펴보면 다음과 같습니다.

 

빨간 사각형 부분이 새로 구성됨

 

3. ALB 대상 그룹 생성

 nginx EC2 들을 대상으로 대상 그룹을 생성합니다. 이 대상 그룹은 HTTP 80 을 허용합니다.

 

HTTP 80 리스너 등록

대상이 될 EC2 선택

 

4. ALB 생성

기존에는 ALB에서 백엔드 노드 서버를 실행하고 있는 EC2를 대상으로 트래픽을 전달하였습니다. 이제 기존 ALB를 삭제하고 nginx가 실행 중인 EC2들로 트래픽을 전달하는 새로운 ALB를 생성해보겠습니다.

 

 

만약 ALB 보안 그룹이 HTTP 80 인바운드 규칙을 허용하지 않았다면 해당 규칙을 추가해줍니다.

 

 

지금까지 생성된 구조를 살펴보면 다음과 같습니다.

 

 

5. CodePipeline으로 React app 자동 CI/CD 구현

프론트엔드 소스가 변경되는 경우 자동으로 빌드를 하고 nginx가 설치된 EC2로 배포할 수 있도록 구성해보겠습니다. 배포된 후 nginx 또한 자동으로 restart 할 수 있도록 구성합니다.

 

(1) 프론트엔드 소스에서 buildspec.yml 수정 및 appspec.yml 생성 후 push

 

## buildspec.yml ##

version: 0.2

phases:
  install:
    runtime-version:
      nodejs: 12
  pre_build:
    commands:
      - echo Installing source NPM dependencies
      - yarn install
  build:
    commands:
      - echo Build started on `date`
      - yarn build
  post_build:
    commands:
      - echo Build completed on `date`
      - cd ./build
      - zip -qr build-output.zip ./*
      - mv build-output.zip ../

cache:
  paths:
    - '/root/.npm/**/*'
    - 'node_modules/**/*'

artifacts:
  files:
    - build-output.zip
    - appspec.yml
    - scripts/*
  discard-paths: yes

 

## appspec.yml ##

version: 0.0
os: linux
files:
  - source: /
    destination: /home/ec2-user/build-output

permissions:
  - object: /
    pattern: "**"
    owner: ec2-user
    group: ec2-user

hooks:
  BeforeInstall:
  - location: before_install.sh
    runas: ec2-user

  AfterInstall:
    - location: after_install.sh
      runas: ec2-user

  ApplicationStart:
    - location: start_server.sh
      runas: ec2-user

 

scripts 디렉토리를 생성하고 shell 파일들을 작성합니다.

 

## before_install.sh ##

#!/bin/bash

# 기존 폴더 내용 삭제
if [ -d "/home/ec2-user/build-output"]; then rm -Rf "/home/ec2-user/build-output"; fi

 

## after_install.sh ##

#!/bin/bash

cd /home/ec2-user/build-output

# zip 파일 풀기
unzip -o -d /home/ec2-user/build build-output.zip

 

zip 파일 압축을 푼 /home/ec2-user/build 디렉토리의 경로가 nginx의 설정과 동일해야 합니다. nginx 설정 부분을 참고하시기 바랍니다.

 

## start_server.sh ##

#!/bin/bash

# nginx 재시작
nohup sudo systemctl restart nginx > /home/ec2-user/logs 2>&1 &

 

(2) S3 버킷 생성

파이프라인에서 사용하는 소스 아티팩트와 빌드 아티팩트를 저장할 S3 버킷을 생성합니다. 버킷 이름만 지정하고 나머지 설정은 기본 설정 그대로 생성합니다.

 

(3) EC2에 codedeploy-agent 설치

• Public Subnet에 Bastion EC2 생성 후 Private Subnet EC2 접속: https://developerbee.tistory.com/217
• codedeploy-agent 설치: https://developerbee.tistory.com/211

 

(4) CodePipeline 생성하기

• 빌드 프로젝트 생성: https://developerbee.tistory.com/209
• 배포 애플리케이션 및 배포 그룹 생성: https://developerbee.tistory.com/211
• Code Pipeline 구성: 위 두 링크를 참고하여 구성

 

 

이렇게 구성을 완료하고 브라우저에서 http://ALB_DNS_이름으로 접속하게 되면 데이터는 없지만 리엑트로 만든 서비스 화면을 볼 수 있습니다.

 

지금까지 CloudFront로 제공하던 React 웹 서비스를 EC2로 옮겨서 서비스하는 방법을 알아보았습니다. 아직 새로 생성한 EC2의 nginx와 기존 node 서버가 연결되지 않아 데이터가 전달되지 않고 있습니다. 다음 글에서는 이 부분을 마저 연결하여 정상적으로 서비스가 되도록 구성해보겠습니다.

---

현재까지 구조는 다음과 같습니다.