[Github Actions] React 프로젝트 AWS S3, CloudFront 자동배포 하기

Github Actions로 React 프로젝트 CloudFront에 자동배포 하기

---

관련포스팅

1. AWS S3 리액트 정적 웹 호스팅 하기

2. AWS S3 CloudFront(CDN)-S3 정적 웹 호스팅 하기

3. AWS AWS S3 퍼블릭 액세스 차단 , CloudFront OAC로 S3 버킷 접근 설정하기

4. [Git Actions] React 프로젝트 AWS S3 CloudFront 자동배포 하기

 

 

---

위에 포스팅에서 S3와 CloudFront를 이용하여 정적 웹 호스팅을 진행했습니다.

아래에 생략된 부분들은 해당 포스팅을 참고해주시기 바랍니다.

---

IAM 사용자 생성

자격증명 정보(access,secret key)를 발급받기 위한 IAM 사용자를 생성합니다.

 

 

권한 정책 연결

사용자가 S3에 접근하여 파일을 업로드 할 수 있도록 AmazonS3FullAccess 권한,
s3에 빌드 파일 배포 성공 시 cloudfront에 캐시무효화를 할 수 있도록 CloudFrontFullAccess을 추가합니다.

 

 

액세스 키 만들기

Github Actions에서 AWS로 접근할 때 사용이 되는 액세스키를 발급받겠습니다.

 

액세스키와 시크릿 키를 발급받았습니다.

 

 

버킷 퍼블릭 액세스 차단 편집

Github Actions에서 AWS S3에 파일을 업로드 할 수 있도록 퍼블릭 액세스 차단을 제거합니다.

 

Github에서 Github Actions Workflow 파일 생성

레포지토리 .github/workflows 위치에 deploy.yml 파일을 생성합니다.

 

 

주요 작업

1. prod 브랜치에 push 이벤트가 발생하면 workflow를 실행합니다.

2. 리액트 프로젝트를 빌드합니다.

3. 빌드한 파일을 S3 버킷에 업로드 합니다.

4. CloudFront에 캐시를 무효화 합니다

 

 

name: Deploy to AWS S3

on:
  push:
    branches: [prod]
    
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: 코드 체크아웃
        uses: actions/checkout@v3

      - name: AWS IAM 사용자 설정
        uses: aws-actions/configure-aws-credentials@v2
        with:
          aws-access-key-id: ${{ secrets.AWS_WEB_ACCESS_KEY }}
          aws-secret-access-key: ${{ secrets.AWS_WEB_SECRET_KEY }}
          aws-region: ${{ secrets.AWS_S3_REGION }}


      # npm package cache 사용하기 : https://github.com/actions/cache/blob/main/examples.md#node---npm
      - name: npm 캐시
        id: npm-cache-dir
        run: |
          echo "::set-output name=dir::$(npm config get cache)"
      - uses: actions/cache@v3
        id: npm-cache # use this to check for `cache-hit` ==> if: steps.npm-cache.outputs.cache-hit != 'true'
        with:
          path: ${{ steps.npm-cache-dir.outputs.dir }}
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-node-

      - name: Setting .env
        run: |
          echo "REACT_APP_NODE_ENV=${{ secrets.REACT_APP_NODE_ENV }}" >> .env

          echo "REACT_APP_APM_TOKEN=${{ secrets.REACT_APP_APM_TOKEN }}" >> .env
          echo "REACT_APP_APM_URL=${{ secrets.REACT_APP_APM_URL }}" >> .env
          echo "REACT_APP_SERVER_ADDRESS=${{ secrets.REACT_APP_SERVER_ADDRESS }}" >> .env

          echo "REACT_APP_AWS_S3_BUCKET_NAME=${{ secrets.AWS_S3_BUCKET_IMAGE_NAME }}" >> .env
          echo "REACT_APP_AWS_S3_BUCKET_REGION=${{ secrets.AWS_S3_REGION }}" >> .env
          echo "REACT_APP_AWS_S3_BUCKET_ACCESS_KEY_ID=${{ secrets.AWS_WEB_ACCESS_KEY }}" >> .env
          echo "REACT_APP_AWS_S3_BUCKET_SECRET_ACCESS_KEY=${{ secrets.AWS_WEB_SECRET_KEY }}" >> .env
          cat .env

      # - run: echo "${{ secrets.ENV }}" > .env

      - name: 리액트 빌드
        run: |
          npm install --force
          npm run build

      - name: 빌드한 파일 S3에 업로드
        run: aws s3 sync build/ s3://${{ secrets.AWS_S3_BUCKET_WEB_NAME }} --acl public-read
        env:
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_WEB_ACCESS_KEY }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_WEB_SECRET_KEY }}

       # 업로드한 s3 파일을 각 CDN 캐시 무효화하여 리프레시 하기
      - name: CloudFront 무효화
        env:
          CLOUD_FRONT_ID: ${{ secrets.AWS_CLOUDFRONT_ID}}
        run: |
          aws cloudfront create-invalidation \
            --distribution-id $CLOUD_FRONT_ID --paths /*

 

 

환경변수 등록

workflow 파일에서 사용할 환경 변수를 등록합니다.

 

레포지토리 -> 환경설정 -> Secretes and variables -> Repository secrets

 

Environment secrets은 Github Actions 환경에만 적용됩니다.
Repository secrets 레포지토리 전역에 적용됩니다.

 

 

자동배포 확인

S3 업로드 및 CloudFront 캐시 무효화가 올바르게 작동하는 것을 확인할 수 있습니다.