S3 + Github action

리액트 기초/배포하기-S3

S3 + Github action - CI/CD

덕구공 2022. 6. 11. 20:16

S3 버킷 설정하기

우선 가비아에서 도메인을 하나 구입하자.

https://www.gabia.com/

웹을 넘어 클라우드로. 가비아

그룹웨어부터 멀티클라우드까지 하나의 클라우드 허브

www.gabia.com

AWS에 로그인해서 S3 탭으로 이동한 후 버킷 만들기를 클릭하자.

배포할 사이트 도메인 이름과 버킷 이름을 꼭 같게 만든다

모든 퍼블릭 액세스 차단을 해제하고 현재 설정으로 인해 이 버킷과 그 안에 포함된 객체가 퍼블릭 상태가 될 수 있음을 알고 있습니다. 선택
아래로 내려서 버킷 만들기 클릭

버킷 이름 선택

권한 탭에 잇는 버킷 정책에서 편집 클릭

버킷 ARN 복사 후 정책 생성기 클릭

Select Type of Policy: S3 Bucket Policy 선택
Principal: * 입력
Actions: GetObject 선택
ARN: 위에서 복사한 ARN 붙여넣기

Add Statement 클릭 후 Generate Policy 선택

ARN 뒤에 /* 붙이고 복사하기

버킷 정책 편집으로 돌아와서 정책에 붙여넣은 후 변경 사항 저장

정적 웹사이트 호스팅 설정

관리 탭 선택

아래로 쭉 내려서 정적 웹 사이트 호스팅 편집 클릭

정적 웹 호스팅: 활성화
호스팅 유형: 정적 웹 사이트 호스팅
인덱스 문서: index.html
오류 문서: index.html
위와 같이 설정 후 변경사항 저장

GitHub Action 설정하기

AWS IAM 설정하기

S3 버킷을 설정한 AWS 계정에 접속한 후 IAM에 들어가서 사용자를 추가해야된다
IAM에서 사용자 탭 클릭

사용자 추가 클릭

사용자 이름을 원하는 이름으로 지정하고 AWS 자격 증명 유형 선택은 액세스 키- 프로그래밍 방식 엑세스 선택!

기존 정책 직접 연결 선택

AmazonS3FullAccess 선택

태그 추가는 선택사항이므로 안해도 됨!

사용자 만들기 선택

csv 파일 다운로드하기. 만약 이 파일을 잃어버리면 다시 다운받을 수 없으므로 꼭 잘 보관하자!

Gihub Action 설정하기

우선 자신의 프로젝트를 github에 하나 올리자!
프로젝트에 들어가서 Settings 탭 선택

왼쪽 아래 Secrets → Actions 클릭

New repository secret 클릭해서 AWS_ACCESS_KEY_ID와 AWS_SECRET_ACCESS_KEY를 추가하자

Name을 AWS_ACCESS_KEY_ID로 하고 위에서 받은 csv 파일의 Access key ID에 해당하는 값을 입력

마찬가지로 Name을 AWS_SECRET_ACCESS_KEY로 한 후 csv 파일의 Secret access key에 해당하는 값 입력

csv 파일은 아래처럼 생겼다

action에 사용할 ID와 KEY를 설정했으므로 이제 action을 설정하자!
github 프로젝트에서 Actions 탭 클릭

set up a workflow yourself 클릭!

yml 파일에 아래 내용 복사 붙여넣기하기

name: Deploy to Production

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-18.04
    steps:
      - name: Checkout source code
        uses: actions/checkout@master

      - name: Cache node modules
        uses: actions/cache@v1
        with:
          path: node_modules
          key: ${{ runner.OS }}-build-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.OS }}-build-
            ${{ runner.OS }}-

      - name: Install Dependencies
        run: npm install

      - name: Build
        run: npm run build
        env:
          CI: ''

      - name: Deploy
        env:
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
        run: |
          aws s3 cp \
            --recursive \
            --region ap-northeast-2 \
            build s3://[버킷 이름]