[AWS] 5. Github Actions를 통한 배포_front

Github Actions를 통한 배포_front

GitHub Actions는 Github에서 제공하는 배포 서비스이다. GitHub Repository로 CI, GitHub Actions로 CD, 하나의 파이프라인이 완성된다.

가장 먼저 발급받아 사용중인 GitHub Token에 workflow에 접근 할 권한이 있는지 체크해야한다 이거 때문에 상당한 시간을 허비...했다...

Github Actions 사용방법

1. Github Actions에서 S3에 배포할 수 있는 권한부여

Github Actions과 IAM을 연동하여 S3와 CloudFront, 두개의 서비스에 접근 할 권한을 부여

1. AWS 접속
2. IAM 사용자 계정 접속
3. 권한 추가
4. 기존 정책 직접 연결
5. CloudFrontFullAccess 선택
6. 권한 추가

2. Github Repository생성

Github Repository생성 후 local의 프로젝트에 remote

3. .github/workflows/main.yml 생성

Github Actions를 사용하려면 Github에서 제시하는 방법을 따라야한다. local의 루트폴더에서 .github/workflows/main.yml을 추가하여 해당 repo는 Github Actions를 사용하는 repo라고 지정해주자.

4. main.yml

name: my-front # 이름, 아무거나
on: # action이 일어날 조건
  push:
    branches:
      - main # main branch가 push 되었을 때
jobs:
  build:
    runs-on: ubuntu-latest
    env:
      AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
      AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
      AWS_REGION: 'ap-northeast-2'

    steps:
      - name: Checkout source code.
        uses: actions/checkout@master

      - name: Upload binary to S3 bucket
        uses: jakejarvis/s3-sync-action@master
        with:
          args: --acl public-read --exclude '*' --include 'index.html'
        env:
          AWS_S3_BUCKET: ${{ secrets.BUCKET_NAME }}

      - name: Invalidate cache CloudFront
        uses: chetan/invalidate-cloudfront-action@master
        env:
          DISTRIBUTION: ${{ secrets.DISTRIBUTION_ID }}
          PATHS: '/index.html'
        continue-on-error: true

5. Github의 환경변수 설정

Github repo의 Settings > Secrets > New repository secret클릭 후 아래의 변수 명을 name에 해당하는 값을 value에 넣고 Add secret을 눌러준다.

• secrets.AWS_ACCESS_KEY_ID : IAM 생성 시 발급 받은 값
• secrets.AWS_SECRET_ACCESS_KEY : IAM 생성 시 발급 받은 값
• secrets.BUCKET_NAME : S3의 이름
• secrets.DISTRIBUTION_ID : CloudFront의 배포 ID

6. main branch push

마지막으로 main 브랜치를 push하면 Github Actions가 작동한다.