S3+CloudFront+Gihub action - CI/CD

Why?

• 매번 yarn build로 정적 파일을 만들어서 S3에 올려서 배포를 할 수 없으니 Github action을 이용해서 push가 되면 바로 배포가 되게 만들어보자!

미리 할 일

S3+CloudFront로 HTTPS 배포와 도메인 연결

• 아래 열심히 정리해둔 글을 보고 S3+CloudFront에 https로 정적 웹사이트 호스팅을 하고 가비아로 도메인까지 연결하자.
• https://duckgugong.tistory.com/336

S3 + CloudFront로 HTTPs 배포하기

Github action 설정하기

IAM 계정 설정

• 배포한 AWS 계정에 들어가서 S3와 CloudFront에 대한 권한을 가진 계정을 생성하고 아이디와 비밀번호를 발급받자.

 

• IAM에 들어가서 사용자 선택

• 사용자 추가 클릭

• 사용자 이름 지정 후 AWS 자격 증명 유형 액세스 키 - 프로그래밍 방식 액세스 선택

• AmazonS3FullAccess와 CloudFrontFullAccess 선택 후 다음으로 넘어가기

• 계속 넘긴 후 csv 파일 다운로드.
  • AWS의 접근 권한에 대한 ID와 KEY가 저장되어 있고 한번만 발급해주므로 꼭 잘 저장해두자

Workflows 추가하기

• Github action을 설정할 레포지토리에 접속 후 Settings 탭 클릭

• 왼쪽 아래 Secrets → Actions 선택 후 New repository secret을 선택해서 AWS의 접근 권한에 대한 ID와 KEY, s3 버킷의 리전, CloudFront 배포 ID를 추가

• New repository secret을 클릭하면 아래처럼 Name과 Value를 등록할 수 있는 창이 나온다

• AWS의 접근 권한에 대한 ID와 KEY는 위에서 받은 csv 파일에서 확인할 수 있다.

• CloudFront 배포 ID는 CloudFront에 들어가서 확인할 수 있다.

• 버킷 리전은 S3에 들어가서 버킷에 있는 AWS 리전에서 확인할 수 있음

• AWS_ACCESS_KEY_ID, AWS_SECRET_ACCESS_KEY에 각각 csv 파일에 있는 ID와 KEY를 입력
• AWS_REGION에 S3 버킷의 리전 입력
• AWS_SECRET_DISTRIBUTION_ID에 CloudFront 배포 ID 입력

• secret key 설정을 끝냈으면 Actions 탭 클릭

• set up a workflow yourself 클릭

 

• 아래 내용 입력후 commit하기

name: CD


on:
  push:
    branches: [ main ]
    
env:
  CI: false

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout source code
        uses: actions/checkout@v2 # workflow에서 액세스할 수 있도록 저장소를 체크아웃
        
      - name: Install dependencies
        run: yarn install
        
      - name: Build
        run: yarn build

      - name: S3 Deploy
        run: aws s3 sync ./build s3://[S3 버킷 이름]/ --acl bucket-owner-full-control # 현재 build된 폴더에 접근 후 s3 버킷에 build 파일 업로드
        env: 
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          AWS_REGION: ${{ secrets.AWS_REGION }}
      - name: Invalidate CloudFront Cache # 새로 리소스를 업데이트할 때 기존 캐시 무효화
        uses: chetan/invalidate-cloudfront-action@master
        env:
          AWS_DISTRIBUTION: ${{ secrets.AWS_DISTRIBUTION_ID }}
          PATHS: '/index.html'
        continue-on-error: true

 

• 이제 기존에 push를 진행했던 프로젝트에서 pull을 한번 해주고 push하면 배포가 자동화된다!