Cloudfront, S3를 이용해 배포한 프론트엔드 프로젝트를 자동 배포화하는 방법에 대해서 알아보자
1. AWS IAM 설정
IAM을 생성하고 액세스 키를 발급받아 해당 키로 이 계정의 AWS에 접근할 수 있는 이용자임을 증명한다.
1) AWS IAM에 접속하여 사용자 생성을 누른다.
2) 사용자 이름을 입력 후 다음을 누른다
3) 직접 정책 연결을 선택하고 S3FullAccess, CloudfrontFullAccess 권한을 추가해준다.
4) IAM 생성 후 다음과 같이 액세스 키를 생성할 수 있게 된다.
5) CLI 선택 후 생성하면 액세스 키와 비밀 액세스 키가 생성된다.
이와 같이 키가 생성되고 이 키를 깃허브액션 설정할 때 사용할 것이다.
2. Github Action 설정
Github Action을 통해 워크플로우를 생성하고 main에 PR 혹은 push 했을 때 자동 배포가 되도록 할 것이다.
1) set up a workflow yourself을 선택하여 워크플로우 양식을 만든다.
2) 다음 플로우를 입력한다.
# 이 깃헙 액션의 이름.
name: CICD
# 이 깃헙 액션을 실행하는 조건에 대한 내용
on:
# main으로 push나 PR을 하는 경우에 깃헙 액션 실행
push:
branches: [main]
# 워크플로우에서 실행할 작업들
jobs:
# build-and-deploy로 정의된 작업
build-and-deploy:
# 이 빌드 작업이 수행될 환경 여기선 우분투
runs-on: ubuntu-latest
# 빌드 작업의 단계들.
steps:
- name: 코드 체크아웃
uses: actions/checkout@v4
- name: AWS IAM 사용자 설정
uses: aws-actions/configure-aws-credentials@v3
with:
aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY_ID }}
aws-region: ${{secrets.REACT_APP_REGION}}
- name: .env 설정
run: |
echo "REACT_APP_MAP_CLIENT_KEY=${{ secrets.REACT_APP_MAP_CLIENT_KEY }}" >> .env
echo "REACT_APP_REGION=${{ secrets.REACT_APP_REGION }}" >> .env
echo "REACT_APP_ACCESS_KEY_ID=${{ secrets.REACT_APP_ACCESS_KEY_ID }}" >> .env
echo "REACT_APP_SECRET_ACCESS_KEY_ID=${{ secrets.REACT_APP_SECRET_ACCESS_KEY_ID }}" >> .env
echo "REACT_APP_S3_IMAGE=${{ secrets.REACT_APP_S3_IMAGE }}" >> .env
echo "REACT_APP_API=${{ secrets.REACT_APP_API }}" >> .env
echo "REACT_APP_API_LOCAL=${{ secrets.REACT_APP_LOCAL }}" >> .env
echo "REACT_APP_SUBADDRESS=${{ secrets.REACT_APP_SUBADDRESS }}" >> .env
echo "REACT_APP_ACCESS_PASSWORD=${{ secrets.REACT_APP_ACCESS_PASSWORD }}" >> .env
- name: install npm
run: npm install
- name: react build
run: CI=false
npm run build
- name: 빌드한 파일 S3에 업로드
run: aws s3 sync build/ s3://${{ secrets.AWS_S3_BUCKET_NAME }} --acl public-read
env:
AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY_ID }}
- name: CloudFront 캐시 무력화 설정
uses: chetan/invalidate-cloudfront-action@v2
env:
DISTRIBUTION: ${{ secrets.AWS_CLOUDFRONT_ID }}
PATHS: '/*'
AWS_REGION: ${{secrets.REACT_APP_REGION}}
AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY_ID }}
이때 yml파일이 생성되는데 이 파일은 워크플로우의 동작 방식을 설명하는 파일이다.
3. 환경변수 및 AWS 관련 값 암호화
배포를 자동화하려는 레포지토리의 setting에서 다음과 같이 워크플로우에서 이용한 비밀 값들을 설정해주어야 한다.
