지금까지 S3 Bucket을 기반으로 하여 리액트 프로젝트를 정적 호스팅 하였고, cloudfront 배포를 버킷과 연동함으로써 CDN을 활용하여 더 효율적으로, 동시에 https를 지원하였다.
이 과정에서, 구입한 도메인 주소를 활용하기 위해 DNS(Domain Name Service)인 Route 53을 cloudfront와 연결함으로써 배포를 완성하였다.
프론트엔드 코드에 수정 사항이 생기면, 그때그때 s3 bucket에 새로운 빌드를 업로드해야 한다.
본 포스팅에서는 github-actions를 활용하여 git push시에 빌드를 업로드하는 일을 자동화하는 과정을 정리하였다.
Github Actions?
- 빌드, 테스트 및 배포 파이프라인을 자동화할 수 있는 CI/CD(연속 통합 및 지속적인 업데이트) 플랫폼
- 어떤 Event가 일어나면 --> .yml script로 정의해 둔 특정 작업의 흐름인 Workflow를 실행하게끔 할 수 있다.
- 즉, git push가 일어나면 --> 내 프로젝트를 빌드하고 AWS S3 bucket에 업로드하는 작업을 실행하게끔 할 수 있다.
- github Actions에서는 workflow를 실행할 Ubuntu Linux, Microsoft Windows, macOS 실행기를 제공한다. 즉, 우리 코드가 해당 환경에 올라갔다고 가정하고 실행할 스크립트를 작성하여 자동화할 수 있다.
1. 사전 준비
- 우리는 앞으로 우리의 s3 bucket에 접근하여 빌드를 업로드할 스크립트를 작성할 것이다. 그렇게 하기 위해서는, s3 bucket을 접근할 어떤 권한을 가지고 있어야 함을 짐작할 수 있다. AWS IAM을 통해 먼저 해당 권한을 갖는 사용자를 만들어야 한다.
IAM > 사용자 > 사용자 생성
적당한 이름으로 설정
권한 옵션에서 직접 정책 연결 선택 후 아래 권한 정책에서 우리에게 필요한 권한인 AmazonS3FullAccess 을 찾아 선택 후, 사용자를 생성한다.
사용자가 생성되면 엑세스 키를 만들어야 한다. 사용자 이름 클릭
엑세스 키 만들기
AWS 외부에서 실행되는 애플리케이션 선택 > 다음
적당한 태그 선택 후 엑세스 키 만들기
키가 만들어지면 나오는 엑세스키 및 비밀 엑세스 키를 저장해 둔다. 이는 다시 볼 수 없으며, 유출되면 타인이 권한을 남용할 수 있게 되니 관리에 주의한다.
이제 이 키를 활용하여 github-actions에서 s3 bucket으로 배포하는 script를 작성할 수 있다.
2. action script 작성
github repo로 이동하여 action 탭에 들어가서 스크립트 작성을 시작하자.
Action tab에 들어가서 new workflow 작성 시작
name: front-CD-develop
on:
push: # git push가 일어날 때
branches: main # main 브랜치에
jobs:
build:
runs-on: ubuntu-latest # 해당 스크립트를 ubuntu-latest 머신에서 실행
steps:
- name: Checkout source code
uses: actions/checkout@v3 # 현재 GitHub 저장소의 코드를 Runner 환경에 가져오기
- name: Install dependencies
run: yarn install
- name: Build
run: yarn build
- name: S3 Deploy
run: aws s3 sync ./build s3://{S3 bucket 이름}/ --acl bucket-owner-full-control # ./build의 파일을 s3 bucket에 업로드
env:
AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
AWS_REGION: ${{ secrets.AWS_REGION }} # 접근에 필요한 access key 및 secret, region 스크립트를 작성하면, 자동으로 {repo}/.github/workflows에 저장되고, push등의 trigger가 발생 시 해당 스크립트를 읽어 머신에서 실행하게 된다.추후 수정이 필요하면 해당 파일을 고치면 된다.
또한, 스크립트를 보면 secrets.AWS_ACCESS_KEY_ID, secrets.AWS_SECRET_ACCESS_KEY, secrets.AWS_REGION 변수가 필요한 것을 확인할 수 있는데,
이는 settings > secrets and variables에서 등록할 수 있다. 해당 창에서 각 secret들의 Name과 Value를 등록하면 된다
- AWS_ACCESS_KEY_ID: 아까 저장해 둔 access key
- AWS_SECRET_ACCESS_KEY: 아까 저장해 둔 secret key
- AWS_REGION: 버킷이 있는 리전 ex) ap-northeast-2
등록 후, git push를 한 번 하여 trigger해 주면 자동으로 배포가 되는 것을 확인할 수 있다!
