Github-actions, S3, CloudFront, Route53으로 React CI/CD하기

pds·2023년 1월 14일

React S3 TIL aws cloudfront github actions route53

TIL

목록 보기

31/60

리액트 앱 배포 자동화를 위한 전체 과정을 요약하여 정리했다.

각각의 인프라, 툴, 서비스들이 무엇이고 왜 사용하는지는 설명하지 않는다.

예전에 맨 위의 이미지로 그려놓았던 흐름을 보고 다시 해보았다

과정

S3, CloudFront 사용을 위한 AWS 계정 설정.
S3 버킷 정적 호스팅을 위한 설정
Github-Actions 워크플로우 작성을 통한 배포 자동화 설정
Route53 설정
CloudFront 설정

S3, CloudFront 사용을 위한 AWS 계정 설정

1. IAM 유저 생성

2. CloudWatch, S3 권한 추가

액세스 키와, 비밀 키는 잘 보관해두도록 하자.
그리고 사실 Full-Access 보다는 특정한 버킷에만 접근할 수 있게 하는 것이 좋다!

S3 버킷 정적 호스팅 설정

1. 버킷을 만들고 퍼블릭 액세스 차단을 해제

ACL 활성화를 해준다

퍼블릭 액세스 차단을 해제 해준다

해제 후 버킷 만들기를 클릭!

2. 정적 호스팅 설정하기

생성한 버킷의 설정 탭에서 정적 웹 사이트 호스팅 항목을 찾는다.

정적 웹 사이트 호스팅 을 활성화 해주고 오류문서에도 index.html 설정을 해준다.

요거 안해주면 리액트의 다른 페이지를 못읽는다. SPA라 그렇다.

3. 권한 설정

권한 탭에서 정책 편집 항목을 찾아 정책 생성기 클릭

정책 편집하기

붙여넣기

깜빡하고 ARN 뒤에 /* 을 안붙였따. 붙여주자

4. 확인하기

귀찮더라도 index.html 같은거 하나 넣어서 확인해보자!

앞으로 많은 과정이 더 있기 때문에

한 번에 다 해두고 에러 로그 확인하면서 어디가 터졌는지 찾기 귀찮다면 하나의 과정을 끝낼 때마다 확인해보는 것이 좋다.

Github-actions 워크플로우 설정

변경이 발생할 때 마다 수동으로 배포하는 것은 매우 귀찮다.

오히려 지금 삽질하는데 드는 시간이 일정 기간 지나면 수동으로 배포하는 시간 보다 적게 들 것이다.

1. 뭘 하고자 하는 것인지 파악하기

(1) 내 깃허브 리포지토리에 리액트 프로젝트 소스코드가 있다.

(2) 내가 원하는 브랜치에 코드가 반영되면 Github-actions로 감지시킬 수 있다.

(3) Github-actinos로 코드 반영을 감지하여 자체에서 제공해주는 서버에 리액트 앱을 빌드 한다.

(4) 빌드 결과물을 방금 만든 S3 버킷에 올린다.

(5) 자동으로 배포가 된다.

2. Github Secret 설정하기

왜함

S3에 배포한다고 하였다.

내 S3 버켓은 나만 컨트롤 할 수 있어야 한다.

나(루트계정) 뿐 아니라 나(루트계정) 이 권한을 하사해준 다른 사용자 계정도 S3를 사용할 수 있다.

아까 S3권한을 포함시켜 생성했던 유저의 Access_id와 Secret_key를 우리는 가지고 있기 때문에

그 정보로 어디선가 S3를 컨트롤 할 수 있다.

그 정보를 Github-actions 에서 사용할 것인데 이 것은 노출되면 안되기 때문에

깃허브의 오픈 소스코드에 포함되서는 안된다.

리포지토리 설정에 등록하여 노출하지 않고도 사용할 수 있다.

Github Repository의 Setting => Secrets and variables => Actions 클릭

ACCESS_KEY, SECRET_KEY, BUCKET_NAME을 필수로 하여 필요한 것들을 넣어준다.

.env에 관리하고 있는 환경변수들도 넣어주자.

3. Github-actions workflow 작성하기

name: Build React App
on:
  push:
    branches:
      - master
jobs:
  build:
    runs-on: ubuntu-latest      
    strategy:
      matrix:
        node-version: [ 16.x ]

    steps:
      - uses: actions/checkout@v1
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v1
        with:
          node-version: ${{ matrix.node-version }}
      - name: Create env file
        run: |
          touch .env
          echo REACT_APP_API_ENDPOINT=${{ secrets.REACT_APP_API_ENDPOINT }} >> .env
          cat .env
      - name: Npm Install
        run: |
          npm install
      - name: Npm Build
        run: |
          npm run build
      - name: Deploy to S3
        uses: jakejarvis/s3-sync-action@master
        with:
          args: --acl public-read --delete
        env:
          AWS_S3_BUCKET: ${{ secrets.AWS_STAGING_BUCKET_NAME }}
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          AWS_REGION: ${{ secrets.AWS_DEFAULT_REGION }}
          SOURCE_DIR: "build"