이번 시간에는 본격적으로 Github Action 실습을 해 볼것이다.

실습을 하기전에 준비를 하자.

1. 자신의 깃허브 계정에 새로운 리포지토리를 만들자.

public으로 만들어야 Github Action을 무료로 이용 가능하니 주의하자.

2. 새로운 리포지토리에 하고싶은 코드를 push하자.

여기서는 새로운 리포지토리를 원격 리포지토리로 등록하고 새로운 리포지토리로 push 하였다.

그 다음 커밋 기록을 보면, 주황색 원을 확인 할 수 있을 것이다.

Github Action이 활성화되어 있는지도 확인을 해 보자

위의 사진처럼 되어 있으면 된다.

3. Github Actions를 통한 배포 Flow (클라이언트)

이제 본격적으로 실습을 해보자

이번 클라이언트 배포는 간단하게 3가지 단계로 나뉘는데,

• Source: Github reference 브랜치에 코드가 커밋되면
• Build: github acitons의 YAML 파일에 적힌 명령어를 토대로 Webpack을 이용해 빌드를 하고
• Deploy: github acitons의 YAML 파일에 적힌 명령어를 토대로 s3로 빌드 결과를 업로드한다.

이미 사전준비는 끝났기 때문에 yml만 잘 작성하면 된다.

본격적으로 하기전에 깃헙 액션 시크릿 정하기를 참고하자.

깃헙 액션에서 AWS 시크릿을 넣어야지 잘 실행이 되기 때문이다.

여기서 주의할 점은 꼭 id와 key의 이름을 yml의 파일에 넣을 이름과 똑같이 적어주어야 한다.

client.yml

name: client
on:
  push:
    branches:
      - reference
jobs:
  build:
    runs-on: ubuntu-20.04
    steps:
      - name: Checkout source code.
        uses: actions/checkout@v2
      - name: Install dependencies
        run: npm install
        working-directory: ./my-agora-states-client
      - name: Build
        run: npm run build
        working-directory: ./my-agora-states-client
      - name: SHOW AWS CLI VERSION
        env:
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          AWS_EC2_METADATA_DISABLED: true
        run: |
          aws --version
      - name: Sync Bucket
        env:
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          AWS_EC2_METADATA_DISABLED: true
        run: |
          aws s3 sync \
            --region ap-northeast-2 \
            build s3://fe-79-ldk199662-s3 \
            --delete
        working-directory: ./my-agora-states-client