TIL 23.04.03 - Github Actions를 통한 배포

오늘은 Github Action을 통한 배포를 진행해 보았다.

 

1. 배포에 앞서서, 새로운 레포지토리를 생성하였다.

이 때 public으로 만들어야 Github Action을 무료로 사용할 수 있기 때문에, 주의해서 생성해준다.

나는 github-action-practice 라는 이름으로 레포지토리를 생성해주었다.

 

2. 새로운 레포지토리를 생성했다면, 연결시키고 싶은 코드를 push 시켜준다.

나는 기존 레퍼런스를 클론받은 뒤, 새로운 레포지토리를 원격 레포지토리로 등록 후

push를  진행하였다.

 

기존 레퍼런스 클론
git clone {기존 레퍼런스 주소}
# 디렉터리 이동
cd {클론된 레퍼런스}
# 새로운 리포지토리를 원격 리포지토리로 등록
git remote add myRepo {새로운 리포지토리 주소}
# 기존 레퍼런스 코드를 새로운 리포지토리로 push
git push myRepo reference

 

명령어를 실행 뒤, github-action-practice 의 Action으로 이동하면 아래와 같이

, Github Action이 활성화된 것을 볼 수 있다.

 

 

 

 

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

 

클라이언트 배포는 간단하게 3가지 단계로 나뉜다.

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

client.yml 작성에 앞서서, 깃헙 액션에서 AWS 시크릿을 넣어주었다.

 id와 key의 이름을 yml의 파일에 넣을 이름과 똑같이 적어주어야하기 때문에 주의해서 작성해야 한다.

 

 

.github/workflows/client.yml

# .github/workflows/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
        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-37-yunhwan98-s3\
            --delete 
        working-directory: ./my-agora-states-client

 

위의 코드를 추가 후, 레포지토리에 push를 하면, 배포가 진행된 것을 볼 수 있다.

GitHub - yunhwan98/github-action-practice