Github Action 중 자동 배포하는 action을 만들어보자!

개요

사전작업

• 배포할 클라이언트 파일 준비
• 배포 파일 올라갈 새로운 깃허브 레포지토리 생성해놓기
• AWS accces key, AWS secret key 준비 (노출 절대 X)

자동배포 설정

1. 깃허브 레포지토리 Actions secrets에 AWS key 등록
2. .github 폴더에 yml 파일 작성

이벤트(push) 실행해서 자동 배포 확인

• S3 업로드 / 배포 확인

---

사전 작업

배포할 클라이언트 파일 준비

• 작업이 완료돼 webpack으로 빌드할 준비 끝난 프로젝트 파일

새로운 원격 레포지토리 생성

• 배포할 프로젝트 파일 올릴 새로운 깃허브 (원격) 레포지토리 생성
• public으로 만들어야 Github Action을 무료로 이용할 수 있다

AWS에서 Access key 발급 받기

• AWS accces key ID,secret accces key 필요 (AWS에서 IAM 사용자로 등록하면 발급해준다)
• 생성 직후에만 확인할 수 있으므로 처음에 잘 복사해서 가지고 있을 것. 당연히 이 key들은 절대 노출하면 안된다..!

🔗 AWS 사용자 엑세스 키 가이드
🔗 AWS 엑세스 키 발급받고 사용하기 - 공부하는 개발자

🌟 자동 배포 설정

깃허브 레포지토리에 AWS key 등록

• 자동 배포 시 AWS의 S3에 자동으로 빌드 파일을 업로드하는데, 이 때 AWS S3에 접근해서 작업하기 위한 권한이 필요하다.
• 자동 배포 작업을 설정하는 yml 파일에서 AWS에서 발급받은 key를 사용한다.
• 이 때, yml 파일의 코드에 직접 key를 작성하는 것이 아니라 레포지토리의 Setting에 key들을 저장해 놓고 yml 파일에서는 이 경로를 지정해놓는 식으로 작성해 보안을 지킨다.

🔗 Github actions에 AWS 키 등록하기

1. 깃허브 레포지토리 - Settings - Secrets - Actions - New repository secret 버튼 클릭

2. AWS_ACCESS_KEY_ID, AWS_SECRET_ACCESS_KEY 각각 등록
   (이후 작성할 yml 파일에서의 key와 이름 맞춰준 것..)

   

3. 등록이 잘 됐다면 아래와 같이 확인할 수 있다.

   

yml 파일 작성

• .github 폴더에 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
        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-43-pikadev1771-s3 \
            --delete
        working-directory: ./my-agora-states-client

name

• 자동으로 처리할 액션의 이름 (임의로 정한다)

name: client

on

• 언제(= 어떤 이벤트가 일어났을 때) 해당 액션이 실행될 것인지 명시한다.

on:
  push:
    branches:
      - reference

• git push 시 실행된다.
• 실행될 브랜치는 reference (보통은 main, feat/OOO 등...)

jobs

• 구체적인 액션의 실행 내용
• steps 안에 각각의 실행 내용을 작성한다.

jobs:
  build:
    runs-on: ubuntu-20.04 #배포 실행될 환경
    steps: #각 단계의 이름과 실행내용을 나열해서 작성한다.
      - name: Checkout source code.
        uses: actions/checkout@v2 
        ...

steps : 모듈 설치(npm install)

• 빌드를 하기 위한 모듈 설치

	- name: Install dependencies
      run: npm install #명령어
      working-directory: ./my-client #디렉토리명

steps : 빌드(npm run build)

• 빌드를 하기 위한 모듈 설치

	- name: Build
      run: npm run build
      working-directory: ./my-agora-states-client

steps : AWS S3 버전 확인 (생략 가능)

• 엑세스 키, 시크릿 키가 필요하다.
• env 부분에 해당 키 입력
• AWS_ACCESS_KEY_ID, AWS_SECRET_ACCESS_KEY의 값으로 각각 secrets.위에서 생성한 키 이름으로 작성한다.

	- 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

steps : S3 버킷 연결

• 빌드한 클라이언트를 버킷에 배포하기 위한 구문
• 엑세스 키, 시크릿 키가 필요하다.
• env 부분에 해당 키 입력

	- 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-63-shinnh2-s3 \
            --delete
        working-directory: ./my-agora-states-client

run (명령어) 부분 살펴보기

       aws s3 sync \ #sync냐 cp냐에 따라 차이가 있다.
           --region ap-northeast-2 \ #리전은 서울
           build s3://fe-43-pikadev1771-s3 \ #build s3://[빌드 파일 올릴 버킷 이름]
           --delete #삭제된 파일 삭제 / sync냐 cp냐에 따라 다른 명령어 사용

• aws s3 sync : 업데이트된 파일만 복사해서 업로드
• aws s3 cp : 버킷에 똑같은 기존 파일이 이미 있더라도 모든 파일을 복사해서 업로드
• --delete : 기존과 달리 삭제된 파일이 있다면 버킷에서도 해당 파일을 삭제한다.

🔗 AWS 관련 가이드
🔗 https://stackoverflow.com/questions/64728076/aws-s3-cp-vs-aws-s3-sync-behavior-and-cost

---

자동 배포 확인

• 이벤트(push) 실행해서 등록한 Actions 잘 실행되는지 확인 (초록색 체크 표시)

• S3에도 자동으로 잘 업로드(배포) 됐는지 확인
  (push 시간과 '마지막 수정' 시간이 비슷하다면 성공)
• 엔드포인트로 접속되는지도 확인

  

  

---

참고

https://meetup.toast.com/posts/286