이번 포스팅에서는 깃허브에서서 지원하고 있는 Action을 활용하여 클라이언트를 AWS 서버에 정적 배포하는 것을 정리해보겠습니다.
Githup Action
Githup Action을 이용하면 로컬 저장소의 코드를 원격 저장소에 psuh하거나 pull request를 할 때, workflow를 이용하여 원하는 로직을 작동시킬 수 있습니다. 즉, 파이프 라인을 구성하는 것을 의미합니다. 특정 브런치에 코드 변경사항을 push하면 자동으로 AWS S3 서비스의 버킷에 동기화 되는 과정을 알아보겠습니다.
workflow 생성
원격 저장소에서 Action 탭에 들어가면 현재 적용 중인 workflow를 확인할 수 있습니다.
new workflow 버튼을 클릭하여 새로운 workflow를 생성하는 페이지로 이동합니다. 이 페이지에서 yml 파일을 설정을 통해 자동화할 로직을 구현할 수 있습니다.
저는 client라는 이름으로 workflow를 생성 했습니다. workflow를 생성하면 저장소에 .github이라는 폴더가 생성되며 언제든지 workflow 로직을 수정할 수 있습니다.
AWS 비밀키 등록
깃허브의 세팅에서 Security의 Secrets and variables 항목에 들어가면 외부에 노출되면 안되는 정보들을 변수처럼 사용할 수 있습니다. New repository secret 버튼을 클릭해 AWS 비밀키를 입력해 줍니다.
yaml 파일 작성
현재 원격 저장소에서 소스 코드는 reference 브런치에 존재하며, workflow의 동작 과정은 다음과 같습니다.
- 가상 인스턴스를 동작합니다.
- 저장소의 소스 코드을 내려 받아 확인 합니다.
- package.json 파일에 명시된 dependencies를 설치합니다.
- AWS 버전을 확인합니다.
- 생성된 build 폴더와 버킷을 동기화 합니다.
name: client # workflow 이름입니다.
on:
push: # push 하는 경우에 동작합니다. pull_request도 적용 시키려면 [push, pull_request]로 작성 가능합니다.
branches:
- reference # 대상이 되는 브런치 이름입니다.
jobs: # push가 발생했을 때, 인스턴스가 실행하는 작업입니다.
build:
runs-on: ubuntu-20.04 # 가상 인스턴스의 운영체제 입니다.
steps:
- name: Checkout source code. # 소스 코드를 내려받습니다.
uses: actions/checkout@v3 # 버전 v3을 사용합니다.
- name: Install dependencies # package.json의 dependencies를 설치합니다.
run: npm install # run은 통해 터미널에서 명령을 입력하는 것과 동일 합니다.
working-directory: ./my-agora-states-client # run 코드가 동작하는 경로를 입력합니다.
- name: Build # 소스코드를 빌드 합니다.(build 폴더 생성)
run: npm run build
working-directory: ./my-agora-states-client
- name: SHOW AWS CLI VERSION # AWS 버전을 확인합니다.
env: # 환경 변수로 깃헙에 등록한 AWS 비밀키를 사용할 수 있습니다.
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 비밀키를 사용할 수 있습니다.
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 build s3://[버킷 이름] --delete
working-directory: ./my-agora-states-client/ # run 코드가 동작하는 경로를 입력합니다.S3 버킷에 올라간 데이터를 삭제하고 동기화 해주기 위해서 아래의 명령어를 사용했습니다. 이 코드는 "./my-agora-states-client/" 경로에서 build 폴더와 S3 버킷을 동기화 합니다. 기존에 있는 객체는 삭제할 것이기 때문에 delete 옵션을 설정 했습니다.
S3 버킷과 객체를 관리하는데 sync 이외에도 mv, cp, ls, rb 등 다양한 명령어를 지원하기 때문에 상황에 따라 필요한 명령어를 사용할 수 있습니다.
run : | aws s3 sync build s3://[버킷 이름] --delete
working-directory: ./my-agora-states-client/
정리
처음 yaml 문법에 익숙하지 않아서 그런지 코드를 이해하고 작성하는데 시간이 꽤나 걸렸습니다. 깃허브를 이용해서 버전 관리되고 있는 코드를 쉽게 통합하고 Actions를 통해 배포 자동화까지 구현할 수 있다는 것을 몸소 체험했습니다. 프로젝트 초기 단기에 배포 자동화를 구축해두면 반복된 작업을 인한 시간 낭비를 줄일 수 있을거라 생각합니다.
Reference
https://awscli.amazonaws.com/v2/documentation/api/latest/reference/s3/sync.html
