AWS의 S3에 정적 웹사이트(React)를 Build해서 올리는 방법입니다.
해당 블로그 글을 작성시 아래 글들을 참고하였습니다.
https://s0ojin.tistory.com/48
참고링크 : AWS S3에 CloudFront를 이용해서 HTTPS(SSL) 적용하기
GitAction을 이용해서 업로드 합니다.
해당 블로그 글에는 React를 이용해서 CI/CD작업을 작성하겠습니다.
1. yaml파일 작성
루트 경로에서 .github/workflows 폴더 안에 하나의 yaml(front-build.yaml)파일 하나를 생성한다.
name: Front Deployment
# trigger가 되길 바라는 action을 입력합니다. push / pull_request가 있습니다.
# GitHub에서 직접 실행할려면 workflow_dispatch를 사용한다.
# 저는 develop 브랜치에 push가 되면 actions을 실행하도록 설정했습니다.
# S3에 배포하기 위해서 아래와 같은 Secreat이 설정되어야 합니다.
# secrets.AWS_S3_ACCESS_KEY_ID : IAM AWS Access Key
# secrets.AWS_S3_SECRET_ACCESS_KEY_ID : IAM AWS Secret ACCESS Key
# secrets.AWS_S3_BUCKET_NAME : S3 Bucket Name
on: workflow_dispatch
# 위의 이벤트가 트리거되면 실행할 목록입니다.
jobs:
build:
name: react build & deploy
# runner가 실행될 환경을 지정합니다.
runs-on: ubuntu-latest
# name은 단계별로 실행되는 액션들의 설명을 담은 것으로, 나중에 github action에서 workflow에 표시됩니다.
# uses 키워드로 Action을 불러올 수 있습니다.
steps:
# 레포지토리에 접근하여 CI서버로 코드를 내려받는 과정입니다.
- name: checkout Github Action
uses: actions/checkout@v4
# workflow가 실행될 때 필요한 파일 중에서 거의 바뀌지 않는 파일들을 GitHub의 캐시에 올려놓고 CI 서버로 내려받습니다.
# 프로젝트에서 자주 바뀌지 않는 수많은 패키지를 매번 다운받아 올리면 시간도 오래걸리고 네트워크 대역폭을 많이 사용하게됩니다.
- name: Get npm cache directory
id: npm-cache-dir
run: |
echo "::set-output name=dir::$(npm config get cache)"
- uses: actions/cache@v3
id: npm-cache
with:
path: ${{ steps.npm-cache-dir.outputs.dir }}
key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
restore-keys: |
${{ runner.os }}-node-
- name: install npm dependencies
run: npm install
- name: react build
run: npm run build
- name: Print S3_ACCESS_KEY
run: echo "${{ secrets.AWS_S3_ACCESS_KEY_ID }}"
- name: Print S3_SECRET_KEY
run: echo "${{ secrets.AWS_S3_SECRET_ACCESS_KEY_ID }}"
- name: Print S3_Bucket
run: echo "${{ secrets.AWS_S3_BUCKET_NAME }}"
# aws에 접근하기 위한 권한을 받아옵니다.
- name: Configure AWS credentials
uses: aws-actions/configure-aws-credentials@v2
with:
aws-access-key-id: ${{ secrets.AWS_S3_ACCESS_KEY_ID }}
aws-secret-access-key: ${{ secrets.AWS_S3_SECRET_ACCESS_KEY_ID }}
aws-region: ap-northeast-2
# S3에 build 파일을 올립니다.
- name: Upload to S3
env:
BUCKET_NAME: ${{ secrets.AWS_S3_BUCKET_NAME}}
# Vite로 build하면 dist폴더를 S3에 올린다.
run: |
aws s3 sync \
./dist s3://$BUCKET_NAME
2. GitHub Setting : Secrets and variables
 |
| 사진1) secreats key 셋팅 화면 |
푸시할 해당 GitHub Repository에가서 "Settings" 탭에 "Secrets and variables" 항목으로 갑니다. "New repository secret"으로 해당 secret를 생성한다. 위 yml파일에서 3개를 생성한다.
AWS_S3_ACCESS_KEY_ID : S3에서 발급받은 ACCESS KEY
AWS_S3_SECRET_ACCESS_KEY_ID : S3에서 ACCESS KEY를 발급 받으면서 갖이 받은 SECRET KEY
AWS_S3_BUCKET_NAME : S3에 푸시할 버킷이름
해당 S3의 Access, Secret 키를 받을려면 아래 링크에서 IAM부분을 참고해 주시기 바랍니다.
NestJS Server에 저장된 파일을 AWS S3버킷에 업로드 하기 - 0 : AWS S3 버킷 및 IAM셋팅
 |
| 사진2) 시크릿 데이터 입력 |
3. CI/CD 실행(GitAction)
 |
| 사진3) CI/CD 실행 완료 |
사진3과 같이 실행하면 정상적으로 적용되는것을 확인할수 있습니다.
 |
| 사진4) S3에 저장 |
해당 S3에 정상적으로 저장 된것을 확인할수 있다.
gitHub Link : https://github.com/Alex-Choi0/S3_CICD_Test
댓글
댓글 쓰기