GitHub Actions를 활용한 AWS S3 CICD 구성(React 어플리케이션)

GitHub Actions는 GitHub에서 제공하는 CICD를 제공하는 서비스이다. 다른 CICD 툴 처럼 GitHub 소스에 Push가 되거나 Pull Request 등 이벤트 발생 시 자동 실행도 제공해주고 있다. 

GitHub Actions를 활용해서 React 프론트 소스를 AWS S3에 호스팅하는 CICD 샘플 구성을 진행한다.

 

1. GitHub Actions workflow 생성

React 소스가 있는 GitHub 리파지토리에서 Actions을 클릭하고 Node.js를 기본 workflow로 선택(Configure 클릭)한다.

 

아래와 같이 기본 설정 yml파일(node.js.yml 파일)에서 필요한 부분을 먼저 수정한다. 필자는 node-version을 나머지는 지우고 18버전만 남겼고, run npm ci 부분을 run npm i 로 변경하였다. 

 

변경된 내용을 저장하고 commit하면 아래와 같이 소스 .github/workflows/node.js.yml 경로에 반영된다. 

 

2. AWS S3 설정

S3를 웹호스팅이 가능하도록 설정을 한다. 버킷 이름만 유니크하게 작성하고 나머지는 디폴트로 일단 생성한다.

 

다음으로 속성 탭에서 정적 웹 사이트 호스팅을 활성화 한다.

 

필자는 활성화하면서 인덱스 문서 경로도 설정을 해줬지만 디폴트가 index.html 이라서 이부분 생략해줘도 되고 자신의 소스에 맞는 인덱스 문서 경로를 작성하면 된다.

 

다음으로 권한 탭에서 버킷 정책을 퍼블릭 액세스 가능하도록 설정한다.

 

아래와 같이 모든 퍼블릭 액세스 차단 항목의 체크를 해제하고 저장한다. 

 

다음으로 버킷 정책을 아래와 같이 작성한다. 

버킷정책 설정 가이드: https://docs.aws.amazon.com/AmazonS3/latest/userguide/WebsiteAccessPermissionsReqd.html

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject"
            ],
            "Resource": [
                "arn:aws:s3:::Bucket-Name/*"
            ]
        }
    ]
}

 

위와 같은 가이드의 내용을 가져와서 버킷명을 자신이 설정한 버킷명으로 수정만 해주면 된다.

 

이제 S3 버킷의 URL로 접속하여 404 Not Found가 나오면 아직 소스를 배포하기 전임으로 정상이라고 볼 수 있다. 혹시 403이 나온다면 S3 권한 설정이 잘못된 것임으로 위의 내용을 다시 확인해본다.

 

3. AWS IAM 설정

GitHub Actions에서 사용할 계정을 생성하고 액세스키를 발급받는 과정이다. 

이 부분은 참조 자료가 많아서 별도 자세한 설명은 생략하고, 계정 생성 시 권한만 S3FullAccess만 주면 된다.

 

 

4. GitHub Actions S3 배포 설정

.github/workflows/node.js.yml 파일 내용에 S3 배포를 위한 설정을 추가한다. 전체 파일 내용은 다음과 같다. 기존 설정에서 s3-action 부분을 추가했다. 

name: Node.js CI

on:
  push:
    branches: ["main"]
  pull_request:
    branches: ["main"]

jobs:
  build:
    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [18.x]
        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/

    steps:
      - uses: actions/checkout@v3
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v3
        with:
          node-version: ${{ matrix.node-version }}
          cache: "npm"
      - run: npm i
      - run: npm run build  --if-present
      - run: npm test

      # s3
      - uses: awact/s3-action@master
        with:
          args: --acl public-read --follow-symlinks --delete
        env:
          SOURCE_DIR: "./build"   # 소스 빌드 경로
          AWS_REGION: "ap-northeast-2"  # 리전 설정
          AWS_S3_BUCKET: ${{ secrets.AWS_S3_BUCKET }}  # 버킷명
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }} # 액세스키
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }} # 시크릿 키

 

다음으로 GitHub 소스 리파지토리에서 버킷명, 액세스키, 시크릿키에 대한 secrets을 설정해준다. Settings 탭으로 이동하여 Security > Secrets and variables > Actions 메뉴에서 설정을 진행하면 된다.

 

이제 다시 GitHub의 Actions 탭에 들어가서 job을 다시 실행해주면 된다. Actions탭의 workflow를 보면 secret 등 설정이 완성되지 않은상태에서 실행이되서 실패한 이력이 있을텐데 Re-run all jobs으로 다시 실행을 해주면 된다.

 

다시 실행을 하면 아래와 같이 빌드 로그를 확인할 수 있고 모든 설정이 완료된 상태임으로 빌드가 성공한다. 

 

마지막으로 S3 호스팅 URL로 접속을 해보면 404가 아니라 React Applicaiton이 실행되는 것을 확인할 수 있다.