8. 배포

mangojang·2023년 6월 12일

React S3 github action 회고록

react-disney-app 회고록

목록 보기

8/8

처음에는 배포하는 방식으로 github action을 사용해서 AWS S3에 배포 자동화를 실현하고자 하였다.

하지만 S3는 정적 웹 사이트 배포만 가능 하고, serverside rendering 이 포함된 사이트는 배포 할 수 없었다. (😢 열심히 방법 찾아 놓았는데, 정적인 웹만 가능하다는 것을 늦게 발견하였다.)

당시 찾아 봤었던 자료들이다.

github action + S3

S3 설정

AWS S3 policy permission 코드
- https://docs.aws.amazon.com/AmazonS3/latest/userguide/access-policy-language-overview.html?icmpid=docs_amazons3_console

github action 설정

github 저장소 > Actions > Node.js Configure 생성

또는 프로젝트에 .github 폴더 생성 .github> workflows > XXX.yml 파일 생성 해서 아래 코드 붙여 넣기

# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs

name: Node.js CI

on: // 이벤트가 실행되는 트리거 설정 
  push:
    branches: [ "main" ]  //main branch로 push 될 때,
  pull_request:
    branches: [ "main" ] // main branch로 pull_request 될 때,

jobs:
  build:

    runs-on: ubuntu-latest // unutu 환경에서 build

    strategy:
      matrix:
        node-version: [14.x, 16.x, 18.x] // node 버전 14, 16, 18 버전에서 build test
        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/

    steps:
    - uses: actions/checkout@v3
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v3
      with:
        node-version: ${{ matrix.node-version }}
        cache: 'npm'
    - run: npm ci
    - run: npm run build --if-present
    - run: npm test

github action S3 배포 시 코드

아래의 deploy 코드를 위의 jobs 안에 추가 해 준다.

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@master
    - uses: awact/s3-action@master
      with:
        args: --acl public-read --follow-symlinks --delete
      env:
        SOURCE_DIR: './build' // build 된 소스파일 경로
        AWS_REGION: 'us-east-1' // aws 저장소 지역
        AWS_S3_BUCKET: ${{ secrets.AWS_S3_BUCKET }}
        AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
        AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}

⚠️next.js를 S3 배포 하는 경우 주의 할 점.

배포 전에, next eject 실행
deploy SOURCE_DIR 를 ‘./out’으로 설정.
- next.js 는 eject 안 시키면 build 산출물이 ./.next 로 나오고, eject 했을 시, ./out으로 산출물이 나옴.

➕github action을 통해 배포하고자 할 때 환경 변수 설정 하는 법

CRA 기반 일 경우 - key 값 앞에 예약어 REACT_APP_ 을 붙여줘야 함.
next.js 기반 일 경우 -key 값 앞에 예약어 NEXT_PUBLIC_ 을 붙여 줘야 함. → vercel 배포 시에도 마찬가지

이번 프로젝트는 Vercel로 배포 하였다. Next.js 공식 문서에서도 추천 할 만큼, Next.js 와의 조합은 좋았고, 큰 무리 없이 배포에 성공하였다.

배포 후 에러

배포 후 확인 하는 과정에서 firebase authentication 관련 에러가 발생하였다. 승인이 안된다는 내용의 에러였고, firebase 콘솔에 들어가서 승인된 도메인 추가 하는 것으로 에러는 해결 하였다.

Authentication > setting> 승인된 도메인 > 도메인 추가

마무리

github action으로 CICD자동화 하는 방식을 적용 하고 싶었는데, 이번에는 적용하지 못하였다. 그래도 github Action 이 무엇인지 어떤 형식인지는 대충 감 잡은 것 같다. AWS 환경에서 Serverside 까지 적용 하려면 EC2에 배포를 해야하는데, 이와 관련해서 gihub action 으로 자동화 하려면 code deploy를 같이 설정 하여야 하는 것 같다. 이번에 그 방식을 사용하지 못 했지만, 다음에 더 자세히 스터디 한 다음에 적용해 봐야 겠다.

참고 문헌

mangojang

한 걸음 한 걸음 계속 걷는 자가 일류다

이전 포스트