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

저번 CI/CD 구축 - EC2 설정에 이어서

이번에는 CodeDeploy 설정 및 GitHub Actions를 사용해서 AWS S3에 업로드를 해보도록 하겠습니다

 

 

CodeDeploy란?

Amazon EC2 인스턴스, 온프레미스 인스턴스, 서버리스 Lambda 함수 또는 Amazon ECS 서비스로 애플리케이션 배포를 자동화하는 배포 서비스입니다

즉 AWS 서비스에 애플리케이션을 자동으로 배포해 주는 도구입니다

 

저희는 이런 CodeDeploy를 EC2와 Github Actions와 연결해서 배포를 진행할 예정이고

우선 CodeDeploy 설정부터 진행해 보도록 하겠습니다

 

 

CodeDeploy IAM 설정

저희가 S3에 업로드한 파일을 CodeDeploy가 접근해서 EC2에 배포를 해주게 됩니다

이때 CodeDeploy 가 S3에 접근을 해야 할 수 있어야 되기 때문에 관련한 설정을 진행해 줍니다

 

이전과 마찬가지로 역할 만들기부터 해 주시면 됩니다

IAM -> 역할 -> 역할 만들기

 

 

엔터티 유형 및 사용 사례 선택

이후 AWS 서비스 -> CodeDeploy를 선택합니다

 

 

권한 정책 추가

아래 정책 확인해 주시고 다음버튼을 눌러주세요

 

이름 지정 및 역할 생성

역할 이름을 설정해 주시고 역할을 만들어 주시면 됩니다

 

 

여기까지 해주시면 우선 IAM 설정이 완료되었습니다

 

이제 CodeDeploy 애플리케이션을 만들어보겠습니다

 

CodeDeploy 생성

CodeDeploy 애플리케이션 생성

CodeDeploy -> 애플리케이션 -> 애플리케이션 생성 버튼을 클릭합니다

 

 

애플리케이션 이름 지정 및 컴퓨팅 플랫폼 지정

애플리케이션 이름을 설정해 주시고, 컴퓨팅 플랫폼은 EC2/온프레미스를 선택합니다

 

 

CodeDeploy 애플리케이션 배포 그룹 생성

애플리케이션 배포 그룹 생성

만들어진 애플리케이션에서 배포 그룹 생성 버튼을 클릭해 줍니다

 

 

배포 그룹 이름 입력 및 배포 유형 지정

이후 배포 그룹 이름과 배포 유형은 현재위치로 설정합니다

 

 

배포 그룹 환경 설정

다음은 배포그룹의 환경 구성 설정입니다

Amazon EC2 인스턴스를 선택해 주시고

태그 그룹은 Key - Name, 값 - 이전에 만들어둔 EC2 인스턴스로 설정합니다

 

 

배포 설정 및 로드밸런서 설정

다음으로는 배포 설정 및 로드밸런서 설정입니다

배포 구성 - CodeDeployDefault.AllAtOnce

로드밸런서가 필요하시다면 활성화, 아닐 경우 비활성화해 주시고 배포 그룹 생성 버튼을 눌러주시면 됩니다

 

 

 

GitHub Actions를 이용한 React 빌드 파일 배포

이제 EC2와 CodeDeploy에 대한 설정은 완료가 되었으니

Github Actions를 활용하여 S3에 React 빌드 파일을 배포해 보도록 하겠습니다

 

Github Actions란?

GitHub Actions는 GitHub에서 제공하는 CI/CD 서비스입니다. 개발자는 GitHub 저장소에서 변경사항을 커밋(commit)하거나 pull request를 생성할 때마다 자동으로 실행되는 작업 흐름을 정의할 수 있습니다. 이를 통해 빌드, 테스트, 배포 등의 작업을 자동화하고 개발자의 생산성을 향상할 수 있습니다.

 

GitHubActions에 Workflows를 정의하기 전

우리가 사용하는 GithubActions 가 AWS 서비스에 접근할 수 있도록 인증키 발급부터 진행하겠습니다

 

AWS 인증키 발급

AWS IAM 사용자 추가

  IAM -> 사용자 -> 사용자 추가 버튼 클릭

 

 

사용자 이름 지정

 사용자 이름 설정 후 다음버튼을 클릭합니다

IAM 정책 연결

  직접 정책 연결 버튼 클릭 후 AmazonS3 FullAccess, CodeDeployFullAccess 정책을 추가해 줍니다

 

이후 정책 재확인 후 사용자 추가 버튼을 클릭해 주시면 사용자 추가가 완료됩니다

 

이제 액세스키 와 시크릿키를 발급을 받아야 됩니다

액세스 키 시크릿키 발급

 방금 만들어진 사용자를 클릭 후 보안 자격 증명 -> 액세스키 -> 액세스키 만들기 버튼을 클릭합니다

 

엑세스키 설정

Command Line Interface(CLI) 선택 후 다음버튼을 클릭 후

태그값 적절히 입력 후 액세스키 만들기 버튼을 눌러주시면 됩니다

 

 

엑세스키 및 시크릿키 확인

엑세스키 와 시크릿키 확인해 주시고 별도로 복사를 해주시거나

아래 csv파일 다운로드 하여 적절히 보관해 주시면 됩니다

 

GitHubActions 환경변수 등록

방금 발급받은 키값을 사용을 해야 하는데 바로 사용해 버리면 보안상에 문제가 발생하기에

Github 저장소에 환경변수로 등록하여 사용을 해야 됩니다

 

저장소 -> Settings -> Secrets and variables에 값을 등록해 주시면 됩니다

AWS_ACCESS_KEY_ID - 액세스 키

AWS_SECRET_ACCESS_KEY - 시크릿 키

AWS_REGION - ap-northeast-2

 

 

 

WorkFlow 정의하기

WorkFlow를 정의하려면 우선 프로젝트 루트 폴더에 .github/workflows 폴더를 생성해 줍니다

 

그다음 workflows 폴더 안에 yml파일을 한 개 만들어줍니다

(저는 보통 CI/CD가 동작하는 브렌치명 기준으로 파일을 만듭니다)

 

yml 파일 내용은 아래와 같습니다

master.yml

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

* {버킷명} 은 각자 지정한 S3 버킷명을 기입해 주시면 됩니다

 

워크 플로우 흐름은 아래와 같습니다

1. 저장소에 master 브렌치에서 push 혹은 pull request 등으로 인하여 코드가 변경이 감지되었을 때 워크플로우가 실행이 됩니다

2. 워크 플로우는 우선 저장소 체크아웃을 진행합니다

3. 노드 모듈 캐싱을 진행합니다, 캐싱을 하여 이미 설치되어 있는 노드 모듈들은 스킵하도록 되어있습니다

4. npm install을 하여 설치되어있지 않은 모듈들을 설치합니다

5. 프로젝트 내에 정의되어 있는 빌드 스크립트로 빌드를 진행합니다. 이때 이단께 이전에 jest 혹은 테스팅 툴로 CI 단계를 추가할 수 있습니다

6. 빌드된 파일을 압축합니다

7. S3에 업로드하기 전에 S3에 접근할 수 있도록 설정한 액세스 키와 시크릿키로 AWS에 로그인합니다

8. 빌드된 압축파일은 지정한 S3 버킷에 업로드해 줍니다

 

 

여기까지 진행해 주시면 S3 버킷에 빌드 파일이 업로드되시는 걸 확인할 수 있습니다

다음은 업로드된 빌드파일은 CodeDeploy를 사용하여 EC2에 배포하는 방법을 알아보도록 하겠습니다