[git] GitHub Actions로 배포 자동화하기

초코침·2023년 6월 7일
0

git

목록 보기
4/4
post-thumbnail

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

레포지토리에 PR이나 push 같은 이벤트가 발생했을 때 실행할 작업 워크플로우를 구성하면, 해당 이벤트가 발생할 때 테스트 또는 배포 등의 작업을 실행할 수 있다.

워크플로우는 .yml (또는 .yaml) 파일로 구성할 수 있고, 수행할 작업에 따라 여러 개를 만들 수 있다. 생성한 워크플로우는 .github/workflows 폴더에 위치시킨다.

GitHub Actions로 배포 자동화하기

push 이벤트가 발생했을 때, 자동으로 aws S3에 변경사항을 반영(배포)하는 연습을 했다.

사전 준비

  • public 레포지토리
  • aws S3

배포 플로우

배포는 3단계로 이루어진다.

  1. Source: 특정 브랜치에 코드를 커밋
  2. Build: GitHub Actions의 YAML 파일 내용을 토대로 Webpack을 이용해 빌드
  3. Deploy: S3에 빌드 결과 업로드

ACCESS KEY 등록하기

aws의 AWS_ACCESS_KEY와 AWS_SECRET_KEY를 등록한다.

yml 파일 작성하기

.github/workflows 폴더 안에 client.yml 파일을 만들고 다음과 같이 작성한다.

# .github/workflows/client.yml
name: client # 액션 이름
# 어떤 이벤트가 발생했을 때 작업을 실행할지
on:
  push: # push 이벤트
    branches: # push 이벤트가 발생한 브랜치명
      - reference
# 작업
jobs:
  build: # 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-react
      - name: Build # 빌드
        run: npm run build
        working-directory: ./my-agora-states-client-react
      - name: SHOW AWS CLI VERSION # aws s3 버전 확인
        run: |
          aws --version
      - name: Sync Bucket # 버킷 연결
        env:
          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 \ # 로컬과 S3 동기화 (전체x 변경사항만 업로드)
            --region ap-northeast-2 \
            build s3://fe-53-jhsung23-s3 \ # 로컬의 build 폴더를 s3에 동기화 (s3에 업로드)
            --delete # 삭제된 파일이 있다면 버킷에서도 삭제
        working-directory: my-agora-states-client-react

레포지토리에 push 후 확인

push를 하고나면, 주황색 동그라미가 생긴다.

그리고 Actions 탭에 들어가보면 배포가 진행 중임을 알 수 있다.

주황색 동그라미가 초록색 체크 표시로 바뀌면 완료됐다는 것이고, aws s3에 들어가서 확인해보면 업로드한 시각이 push한 시각 즘으로 변경된 것을 확인할 수 있다.

profile
블로그 이사중 🚚 (https://sungjihyun.vercel.app)

0개의 댓글