Github Action으로 S3 배포 자동화하기

CI/CD

https://xionwcfm.tistory.com/309

CI/CD와 무중단 배포

ci/cd에 관한 내용은 이전에 정리해둔 글이 있으니 링크로 대체합니다.

애플리케이션이 사용자에게까지 전달되려면

테스트 , 빌드, 배포 과정을 거쳐야만 할 것입니다.

 

테스트를 통해 새로 수정된 애플리케이션이 정상적으로 동작하는지 확인할 수 있어야하고

프론트엔드가 담당하는 부분같은 경우에는

여러가지 프레임워크들을 이용해 작업한 파일들을 웹에서 구동될 수 있는 형태로 변환해주어야합니다.

웹에서는 HTML, CSS, JS, 웹어셈블리만 동작할 수 있으니까요!

 

그런데 이것을 수정사항이 생길때마다 일일히 사람이 빌드하고 배포하는 것은 굉장히 힘든 일일 것입니다.

따라서 여러가지 자동화툴을 선택할 수 있습니다.

많이 사용되는 github action과 aws가 제공하는 s3를 이용해

배포 자동화를 해보겠습니다.

---

배포 주소

http://fe-68-xionwcfm-s3.s3-website.ap-northeast-2.amazonaws.com/

React App

---

yml 파일 수정하기

.github/workflows/pullRequest.yml

name: Bare Minimum Requirements

on: [push, pull_request]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Bare Minimum Requirements
        uses: actions/setup-node@v1
        with:
          node-version: '16'
      - run: npm install
      - run: npm test

깃허브 액션을 이용하면 위와같은 베어미니멈 yml 파일을 제공해줍니다.

이를 참고하여 yml 파일을 작성해 새로운 워크플로우를 작성하는것도 가능합니다.

워크플로우 폴더에서 yml파일을 생성하는것을 통해 새로운 워크플로우를 작성해줍니다.

---

github action의 환경변수 등록하기

환경변수는 내 작업 레포지토리에서

settings -> security -> Secrets and Variables -> Actions -> New repository secret을 통해 생성해줄수있습니다.

keyvalue쌍으로 생성이 가능하며 정상적으로 등록이 완료된 경우

위 이미지와 같이 Repository Secrets에 환경변수가 등록됩니다.

---

.github/workflows/client.yml

name: client
on:
  push:
    branches:
      - main
jobs:
  build:
    runs-on: ubuntu-20.04
    steps:
      - name: Checkout source code.
        uses: actions/checkout@v2
      - name: set up node
        uses: actions/setup-node@v2
        with:
          node-version: '16'
      - 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
        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 \
            --region ap-northeast-2 \
            build s3://fe-68-xionwcfm-s3 \
            --delete
        working-directory: ./my-agora-states-client-react

처음 볼 때는 낯설지만 하나하나 의미를 쉽게 파악할 수 있습니다.

먼저 가장 상위계층부터 확인하면

name, on , jobs가 있습니다.

name	워크플로우의 이름을 뜻합니다.
on	워크플로우가 실행되는 트리거를 정의합니다.
jobs	워크플로우에서 실행되는 작업을 정의합니다.

on:
  push:
    branches:
      - main

즉 이렇게 작성된 코드는

main 브랜치에 push 되는 이벤트가 발생하면 이 워크플로우가 트리거된다는 의미를 가집니다.

jobs에서는 이 워크플로우가 실행되면 수행할 작업을 정의합니다.

 

작업은 step by step의 형식으로 위에서 아래로 순차적으로 이루어지며

각 작업을 정의하는 방법은 다음과 같습니다.

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

이러한 형식으로 각 작업의 이름을 지어줄 수 있고

실행할 명령어와 명령어를 실행할 디렉토리를 정해줄 수 있습니다.

이때 working-directory에 들어가는 경로는 root를 기준으로 합니다.

- 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 \
            --region ap-northeast-2 \
            build s3://fe-68-xionwcfm-s3 \
            --delete
        working-directory: ./my-agora-states-client-react

Sync Bucket이라 이름지어준 step에서는

env: 를 통해 환경변수를 정의해줍니다. 이때 환경변수로 사용되는 값을 갖고오는 출처는

위에서 정의해둔 repository env 세팅입니다.

따라서 레포지토리의 환경변수를 설정해주었을때 키값을 secrets.의 형태로 넣어주면 됩니다.

 

aws access key와 secret key를 받기위해서는 AWS IAM에서 설정이 필요합니다.

하는 방법은 타 블로그에 잘 나와있으니 필요하다면 검색하시는 것을 추천드립니다.

본 포스트에서는 해당 키를 사용하는 내용만 담습니다.

 

간혹 유효하지않거나 없는 환경변수를 참조할 경우

node.js 버전의 문제가 있다는 에러가 발생할 수 있습니다.

허나 이 부분은 유효한 환경변수를 넣어주는것으로 대부분 해결이 가능합니다.

---

마치며

처음 하는 입장에서 배울 엄두가 쉽게 나지 않는 것이 CI/CD인것같습니다.

사실 하면 편하다인것이지 안하면 아예 살 수가 없다인 것이 아니니까요

하지만 더욱 편하게 작업할 수 있는 환경을 구축하게되면

그만큼 빌드, 배포에 쏟던 정신력을 다른 곳에 돌릴 수 있다는 장점이 있습니다.