CI/CD와 github Actions를 통한 클라이언트 배포(feat. AWS s3)

CI/CD란?

---

CI/CD는 애플리케이션 개발 단계를 자동화하여 애플리케이션을 보다 짧은 주기로 고객에게 제공하는 방법이다.

CI는 개발자를 위한 자동화 프로세스인 지속적인 통합(Continuous Integration)을 의미한다. CI를 성공적으로 구현할 경우 애플리케이션에 대한 새로운 코드 변경사항이 정기적으로 빌드 및 테스트되어 공유 리포지토리에 통합되므로 여러 명의 개발자가 동시에 애플리케이션 개발과 관련된 코드 작업을 할 경우 서로 충돌할 수 있는 문제를 해결할 수 있다.

CD는 지속적인 서비스 제공(Continuous Delivery) 또는 지속적인 배포(Continuous Deployment)를 의미하며 이 두 용어는 상호 교환적으로 사용된다. 두 용어 모두 파이프라인의 추가 단계에 대한 자동화를 뜻하지만 때로는 얼마나 많은 자동화가 이루어지고 있는지 설명하기 위해 별도로 사용되기도 한다.

지속적인 제공은 개발자들이 애플리케이션에 적용한 변경 사항이 버그 테스트를 거쳐 리포지토리에 자동으로 업로드 되는 것을 뜻하며, 운영팀은 이 리포지토리에서 애플리케이션을 실시간 프로덕션 환경으로 배포할 수 있다.

지속적인 배포는 개발자의 변경 사항을 리포지토리에서 고객이 사용 가능한 프로덕션 환경까지 자동으로 릴리스 하는 것을 의미한다. 이는 애플리케이션 제공 속도를 저해하는 수동 프로세스로 인한 운영팀의 프로세스 과부하 문제를 해결한다.

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

---

Github Actions를 통해 클라이언트 배포를 실습하였다.
배포 단계는 아래와 같다.

1. Source: 특정 브랜치에 코드가 커밋되면
2. Build: github actions의 YAML파일에 적힌 명령어를 토대로 Webpack을 이용해 빌드를 진행하고
3. Deploy: s3로 빌드 결과를 업로드한다.

# 📁 .github/workflows/client.yml

name: client

# 1. Source: 특정 브랜치에 코드가 커밋되면
on:
  push:
    branches:
      - main # 브랜치 명
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-app-client
# 2. Webpack을 이용해 빌드를 진행하고
      - name: Build
        run: npm run build
        working-directory: ./my-app-client
# 3. Deploy: s3로 빌드 결과를 업로드한다.
      - 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://my-app-client-bucket \
            --delete
        working-directory: ./my-app-client

여기서 AWS_SECRET_ACCESS_KEY는 절대로 외부에 노출되어서는 안되기 때문에 Github repository의 secrets로 등록해준 뒤 사용해야 한다.

reference

---

CI/CD(지속적 통합/지속적 제공): 개념, 방법, 장점, 구현 과정
CI/CD 자동화가 가져다 준 행복