Github Actions, AWS S3를 사용한 CI/CD

 

 💬 Code States 부트캠프의 막바지에 CI/CD를 위한 Github Action 실습이 있었다. 이전 챕터에서 AWS S3 버킷을 통해 클라이언트 코드를 배포했었고, 이미 배포 준비가 완료된 S3에 Github Action을 통해 파일을 전달하는 것이 이번 실습의 목표였다. 처음이라 너무 헷갈렸는데, 하다보니 흥미가 생겨서 과정을 정리해볼까 한다.

 

 📌 GitHub Actions는 Github가 공식적으로 제공하는 빌드, 테스트 및 배포 파이프라인을 자동화할 수 있는 CI/CD 플랫폼이다.

 

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

1. Source Github 브랜치에 코드가 push (push 뿐만 아니라 다른 이벤트도 가능) 되면

2. Build Github Acitons의 YAML 파일에 적힌 명령어를 토대로 Webpack을 이용해 빌드를 하고

3. Deploy Github Acitons의 YAML 파일에 적힌 명령어를 토대로 s3로 빌드 결과를 업로드한다.

 

---

🔖 진행 과정 요약

1. 배포할 클라이언트 파일 준비와 배포파일이 올라갈 git repository 생성

2. 🔒 AWS_ACCESS_KEY, AWS_SECRET_KEY 준비

3. yml 파일 작성

4. 배포 확인

 

---

 

1. 배포할 클라이언트 파일 준비와 배포파일이 올라갈 git repository 생성

• repository는 public으로 만들어야 Github Action을 무료로 이용 가능

• 작업한 클라이언트 파일을 git repository에 연결

git remote add origin [repository]

 

2. 🔒 AWS_ACCESS_KEY, AWS_SECRET_KEY 준비

• YAML 파일의 ACCESS_KEY는 Secret하게 관리되어야 하기 때문에 Github Setting의 Security에서 관리한다. (하드코딩 절대 X)

AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}

Secret key 등록

 

3. 👩🏻‍💻 yml 파일 작성

📁 파일위치: ./.github/workflows/client.yml

# client.yml

name: client # workflow 이름
on:
  push:
    branches:
      - reference # reference 브랜치에 push를 하면, 아래 jobs를 실행
jobs:
  build: # job의 이름
    runs-on: ubuntu-20.04 # 실행 환경
    steps: # jobs의 실행 순서

        # 참고
        # actions를 사용할 때는 uses 속성 사용
        # command나 script 실행시 run 속성 사용				

      - name: Checkout source code.
        uses: actions/checkout@v2 # github의 소스코드 확인

      - name: Install dependencies
        run: npm install # dependencies 설치
        working-directory: ./my-agora-states-client-react

      - name: Build
        run: npm run build # 배포용 리액트 파일 생성
        working-directory: ./my-agora-states-client-react

      - name: SHOW AWS CLI VERSION # AWS 버전확인(생략가능)
        run: | 
          aws --version 

      - name: Sync Bucket # AWS S3 버킷 연결
        env:
          # 두번째 과정에서 secret key로 등록한 부분 (하드코딩 X)
          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-50-sw2377-s3 \\
            --delete
           # AWS sync : 버킷과 디렉터리 콘텐츠 동기화 
           # --region : 서울 
           # build s3://[버킷 이름]
           # --delete : 원본에 없는 파일이나 객체를 대상에서 제거
        working-directory: ./my-agora-states-client-react

 

4. 배포 확인

 yml 파일 작성 후 push를 하면 S3 배포까지 자동화가 이루어진다.

 

✨ Github Actions에서는 yml 파일이 동작한다.

✨ S3 버킷에 자동으로 빌드된 파일이 업로드된다.

✨ 배포된 웹사이트에서는 새로운 클라이언트 화면을 볼 수 있다.