GitHub Action으로 빌드 및 배포 자동화

CI/CD

CI/CD란, 개발자들이 새로운 코드를 작성하고 기존 코드를 수정할 때마다 지속적으로 소프트웨어를 테스트하고 배포하는 프로세스를 의미한다.

이를 통해 개발자들은 새로운 코드나 수정된 코드의 문제점을 빠르게 발견하고 수정할 수 있다.

클라이언트 배포

클라이언트 배포란, 웹 브라우저나 모바일 앱과 같은 클라이언트 측 소프트웨어를 배포하는 것을 말한다. 이를 위해 클라이언트 측 코드를 빌드하고 테스트하며, 최종적으로 배포를 진행한다.

GitHub Action

GitHub Action은 GitHub에서 제공하는 CI/CD 도구 중 하나로, 개발자들이 GitHub 레포지토리에서 코드를 수정하거나 새로운 코드를 push할 때마다 자동으로 테스트와 빌드, 배포를 진행할 수 있다.

프론트엔드 개발자는 주로 UI/UX 디자인과 사용자 경험을 개선하기 위한 작업을 수행한다. 그러나 클라이언트 배포를 위해 매번 수동으로 빌드하고 배포하는 작업은 번거롭고 시간이 많이 소요된다.

GitHub Action을 사용하면 이러한 작업들을 자동화하여 개발자들이 보다 효율적으로 개발에 집중할 수 있도록 도와준다.

간단한 설정만으로도 클라이언트 측 코드의 빌드, 테스트, 배포를 자동화 할 수 있으며, 이렇게 구축한 배포 링크를 통해 개발자들은 클라이언트 배포 프로세스를 보다 효율적으로 관리할 수 있다.

GitHub Action을 이용한 빌드 및 AWS S3 배포 자동화

배포 링크

1. AWS IAM에서 S3 버킷에 접근 가능한 엑세스 키와 시크릿 키를 발급받기
2. GitHub 레포지토리 설정에서 action secrets 추가하기
3. Action 탭의 New workflow를 눌러 원하는 템플릿을 선택하거나, 직접 YAML 파일을 작성하기
4. YAML(yml)파일에 빌드 및 배포 과정을 기술하기
5. 작성한 코드를 커밋하고 push하면, GitHub Action이 자동으로 빌드 및 배포를 진행
6. 배포된 애플리케이션을 확인하고, 필요하다면 추가적인 수정을 거쳐 다시 push하여 반복적으로 빌드 및 배포 과정을 자동화할 수 있음

Sync Bucket의 run 설명

• aws s3 sync: 로컬 파일 시스템과 S3 버킷 동기화
• --region ap-northeast-2: ap-northeast-2(서울) 리전을 사용
• build s3://: build 디렉토리(working-directory의 하위에 있는 build 디렉토리)에서 S3 버킷으로 파일을 업로드(build s3:// 뒤에는 자신의 bucket 명을 입력)
• --delete: 로컬 시스템에서 삭제 된 파일을 삭제하도록 동기화

# build and Deploy React App to S3
name: client
on:
  push:
    branches:
      - main # main 브랜치로 push가 일어나면, 이하 과정 실행
jobs:
  build:
    runs-on: ubuntu-20.04 # or ubuntu-latest
    steps:
  		# 레포지토리 체크아웃
      - name: Checkout source code. 
        uses: actions/checkout@v2
  		# 의존성(dependencies) 설치
      - name: Install dependencies 
        run: npm install
        working-directory: ./my-agora-states-client # 실행될 디렉토리 경로
  		# 앱 build
      - name: Build
        run: npm run build
        working-directory: ./my-agora-states-client
  		# AWS CLI 버전 보기
      - name: SHOW AWS CLI VERSION
        run: |
          aws --version
  		# AWS S3 Bucket 동기화
      - name: Sync Bucket
        env:
  		# AWS_ACCESS_KEY와 AWS_SECRET_KEY는 깃헙 레포지토리에서 액션 시크릿으로 추가해두기
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_KEY }}
          AWS_EC2_METADATA_DISABLED: true
        run: |
          aws s3 sync \
            --region ap-northeast-2 \
            build s3://<my-bucket-name> \
            --delete
        working-directory: ./my-agora-states-client

위와 같이 GitHub Action을 이용하여 빌드 및 S3 배포 자동화를 할 수 있다. 이를 통해 보다 빠르고 안정적인 소프트웨어를 개발 및 배포할 수 있다.