AWS s3와 gh-page 자동 배포하기

목표

main에 커밋이 발생하면 gh-page와 aws에 자동 배포하도록 만들자!

돌아간 이야기

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main
  workflow_dispatch:

1. github action을 다음과 같이 작성했는데
   pull request가 merge commit을 만들어서 push 이벤트를 작동시키더라 2번씩 돌아가서 다시 수정해줘야했다.

2. AWS와 github-page의 url이 달라서 homepage를 하나로 고정하면 한쪽에 정상적으로 배포될 경우, 다른 한쪽에 배포시, 404 오류가 막 나왔습니다.
   gh-page의 경우 root / github-repository / (여기에 파일이 위치)
AWS S3의 경우 root / (여기에 파일이 위치)

3. .env를 로컬로 저장해서 실행하려고 했습니다.
   github action에서 다음과 같은 명령어를 사용했지만
   echo PUBLIC_URL="/" > .env
   이 후 build 과정에서 pakage.json의 "homepage"를 참조하여 만들어져 원하는 대로 동작하지 않았습니다.

4. github action에서 lint의 경우 warn을 error로 간주하여 중간에 멈추는 동작하지 않는 일이 있었습니다. env:CI:false 추가하기

5. 해결방법
   pakage.json -> "homepage": "." 로 설정하기
   amazon build시: PUBLIC_URL=/ npm run build
   gh-page build시: PUBLIC_URL=/wanted-pre-onboarding-frontend npm run build
   위와 같은 명령어를 사용하면 다른 url을 가진 build 파일을 얻을 수 있었다.

6. 자동화
   pakage.json의 script에 다음과 같은 문장 추가하기
   "build:amazon": "PUBLIC_URL=/ npm run build "
"build:gh-page": "PUBLIC_URL=/{깃헙 레포 이름} npm run build && cp build/index.html build/404.html"

   github-page의 경우 새로고침이나 리다이렉트를 지원하지않기 때문에 index->404로 더 만들어서 배포했습니다.

   완성된 github-action!

   name: CI/CD
   on:
     push:
       branches:
         - main
     workflow_dispatch:
   jobs:
     cicd:
       runs-on: ubuntu-latest
       env:
         CI: false 
       steps:
         - uses: actions/checkout@master
         - run: npm install
         - run: npm run test
         - run: npm run build:amazon
         - name: deploy to s3
           uses: jakejarvis/s3-sync-action@master
           with:
             args: --delete
           env:
             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 }}
             AWS_REGION: 'ap-northeast-2'
             SOURCE_DIR: 'build'
         - name: Build gh-page
           run: npm run build:gh-page
         - name: Deploy gh-page
           uses: peaceiris/actions-gh-pages@v3
           with:
             github_token: ${{ secrets.GH_ACTIONS_TOKEN }}
             publish_dir: ./build

   repository.settings - secret에서 키값을 추가 하면 됩니다.
   만약 push시, workflows 수정 권한이 없다고 뜬다면
   우측 상단 profile - settings - personal access token에서 권한 수정하기

후기

두 곳에 동시에 배포한다는 상황이 실무에서 많이 있을 것 같았고 그리 어렵지 않을 것 같아서 시도해보았다가 하루 종일 헤맸다 ㅠ.ㅠ