React CI/CD 구축 해보기 3(EC2 + Github Actions + CodeDeploy)

React CI/CD 구축 마지막 포스팅입니다

이번에는 S3에 배포된 빌드파일을 EC2인스턴스에 배포하는 방법을 알아보도록 하겠습니다

 

Github Actions Workflow 수정

저번에 작성한 워크플로우에 CodeDeploy 관련한 부분을 추가해 줍니다

name: Master # Workflow 이름
on: # Event 감지
  push:
    branches:
      - master # 브렌치 지정

jobs:
  build:
    runs-on: ubuntu-18.04
    steps:
      - name: Checkout source code. # 저장소 Check out
        uses: actions/checkout@v2

      - name: Cache node modules # node modules 캐싱
        uses: actions/cache@v1
        with:
          path: node_modules
          key: ${{ runner.OS }}-build-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.OS }}-build-
            ${{ runner.OS }}-

      - name: Install Dependencies # npm 모듈 설치
        run: npm install --frozen-lockfile

      - name: Build # React 빌드
        run: npm run build
        env:
          CI: ''

      - name: zip create #React 빌드 파일 압축
        run: zip -qq -r ./dist.zip .
        shell: bash

      - name: Configure AWS credentials #AWS 서비스 인증 절차
        uses: aws-actions/configure-aws-credentials@v1
        with:
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          aws-region: ${{ secrets.AWS_REGION }}

      - name: Upload to S3 # S3 에 압축된 빌드 파일 업로드
        env:
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
        run: |
          aws s3 cp --region ap-northeast-2 ./dist.zip s3://{버킷명}/dist.zip

      # 추가된 부분
      - name: Deploy # Deploy to EC2
        run: aws deploy create-deployment
          --application-name {{codedeploy 애플리케이션 이름}}
          --deployment-config-name CodeDeployDefault.AllAtOnce
          --deployment-group-name {{애플리케이션 배포 그룹}}
          --s3-location bucket={{버킷명}},key=dist.zip,bundleType=zip

 

추가된 부분을 확인해 주시면 됩니다

이때 각자의 설정에 맞게 변경을 진행해 주시면 됩니다

--application-name : Codedeploy 애플리케이션 이름

--deployment-group-name : Codeploy 애플리케이션 배포 그룹

--s3-location bucket : 배포 파일이 있는 버킷명

 

해당 설정을 진행해 주시고 원격저장소에 Push를 진행해 주시면 아래와 같이 워크플로우가 동작하게 됩니다

 

 

CodeDeploy 연동하기

S3에 React 빌드 파일은 올려두었으니 해당 빌드 파일을 EC2에 업로드해보도록 하겠습니다

CodeDeploy는 appspec.yml 파일 기반으로 동작을 하게 되는데

이 파일을 아래와 같이 프로젝트 루트 폴더에 생성해 줍니다

 

 

appspec.yml 파일 작성

appspec.yml 파일의 내용은 배포진행하는 폴더를 지정해 주고

각 이벤트(hooks) 마다 어떠한 동작을 진행할 것인지 명시를 해줍니다

version: 0.0
os: linux

files:
  - source: /
    destination: /var/www/build-test
    overwrite: yes
permissions:
  - object: /var/www/build-test
    owner: ec2-user
    group: ec2-user
    mode: 755
hooks:
  AfterInstall:
    - location: deploy.sh
      timeout: 60
      runas: root

 

CodeDeploy 배포 순서는 아래와 같습니다

1. ApplicationStop

2. DownloadBundle

3. BeforeInstall

4. Install

5. AfterInstall

6. ApplicationStart

7. ValidateService

 

각 언어, 프레임워크에 따라 각 이벤트마다 지정하는 동작은 다른 점 참고부탁드리고

React 같은 경우는 빌드는 이미 다 되어있으니 Install 끝난 시점(AfterInstall)에 빌드가 다되었다는 문장을 출력하는 deploy.sh 파일을 루트 폴더에 만들어 지정하였습니다

 

deploy.sh

#!/usr/bin/env bash
echo "> 리액트 페이지 배포 완료"

 

이후 EC2 인스턴스에 접속을 하여 appspec.yml 파일에 지정한 폴더를 생성해 줍니다

sudo mkdir /var/www/build-test
sudo chown -R ec2-user:ec2-user /var/www/build-test

 

자 이제 마지막으로 CodeDeploy가 정상적으로 동작하는지 확인하면 끝납니다

 

아까와 마찬가지로 원격저장소에 Push를 진행하면 먼저 Github Actions 동작하고

Github Actions 동작이 완료가 되면 아래와 같이 CodeDeploy 배포가 진행되게 됩니다

 

CodeDeploy까지 동작이 완료가 된다면 EC2 인스턴스에 접속 후

지정한 폴더를 확인해 보면 아래와 같이 React 프로젝트가 배포가 완료가 된 것을 확인할 수 있습니다

 

 

여기까지 하며 React + GithubActions + EC2 + CodeDeploy로 구성된 CI/CD 구성이 완료가 되었습니다

React 말고도 지금 Nextjs 배포 관련하여 공부를 진행하고 있는데 어느 정도 정리가 끝나면 Nextjs 배포도 포스팅 작성하도록 하겠습니다