Github Action

GitHub Actions는 Github가 공식적으로 제공하는 빌드, 테스트 및 배포 파이프라인을 자동화할 수 있는 CI/CD 플랫폼으로 레포지토리에서 Pull Request 나 push 같은 이벤트를 트리거로 GitHub 작업 워크플로(Workflow)를 구성할 수 있다.

Github Action 실습

1. 새로운 레파지토리 만들기

• 이때 public으로 만들어야 Github Action을 무료로 이용할 수 있으니 주의!

2. 새로운 리포지토리에 코드를 push하기

# 기존 나만의 아고라 스테이츠 서버 레퍼런스 클론
git clone git@github.com:codestates-seb/fe-sprint-my-agora-states-server-reference.git
# 디렉터리 이동
cd fe-sprint-my-agora-states-server-reference
# 새로운 리포지토리를 원격 리포지토리로 등록
git remote add myRepo git@github.com:{본인 아이디}/{새로운 리포지토리 이름}.git
# 기존 레퍼런스 코드를 새로운 리포지토리로 push
git push myRepo reference

3. Github Action 잘 실행되고 있는지 확인

• 주황색 원이나 초록색 체크 보이면 잘 돌아간다는 의미이다!

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

• 클라이언트 배포 3단계

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

1. AWS 시크릿 등록하기

😡 이때, 시크릿키로 등록이 아닌 YML 파일에 하드코딩을 하여 push 하면 외부에 키가 노출되어 제공된 AWS 아이디로 추후 S3 버킷에 접근이 불가능하게 되므로 꼭 주의해야한다!

2. 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

• 액션 창에 이렇게 뜨면 성공!