[작성중] GitHub Actions을 이용한 자동 배포 with React

min_bok_·2024년 1월 13일

Deploy&CI/CD

목록 보기

2/3

1. yml 파일

React로 작업한 개인프로젝트 배포시 사용한 yml 파일

name: wikibook-deploy #  워크플로우 이름

# 워크플로우가 트리거 될 이벤트를 명시
on:
  push: # push 발생 시
    branches: ["main"]

# 워크플로우에서 실행할 job
jobs:
  deploy:
    runs-on: ubuntu-latest # 실행할 환경

    steps:
      - name: Use repository source code
        uses: actions/checkout@v3

      - name: Use Node.js 18
        uses: actions/setup-node@v3
        with:
          node-version: 18

      - name: Cache node modules # node modules의 변화가 있을때만 npm install 실행
        uses: actions/cache@v3
        id: cache # 해당 step을 대표하는 id
        with:
          path: node_modules # node_modules 폴더를 검사
          # package-lock.json 파일에 대한 해시값을 생성하여 package-lock.json 파일이 변경될때마다 의존성 업데이트
          key: npm-packages-${{ hashFiles('**/package-lock.json') }}

      # 위 step에서 변한게 있다면 npm i 을 실행, 없다면 해당 step을 건너뜀
      - name: Install Dependencies
        if: steps.cache.outputs.cache-hit != 'true'
        run: npm install

      #  빌드 및 대체 페이지 생성
      - name: Build
        run: CI='false' npm run build && cp ./build/index.html ./build/404.html

      # 배포
      - name: Deploy to gh-pages branch
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./build

문제사항

1.1 Build 관련 에러

🚨 "Treating warnings as errors because process.env.CI = true~" 에러

문제점

Treating warnings as errors because process.env.CI = true.
Most CI servers set it automatically.
Failed to compile.

에러 발생 원인

process.env.CI(default=true)가 true인 경우 warning을 전부 에러로 취급하기 때문에 발생하는 에러

해결방안

run할 때 CI를 false로 명시

run: CI='false' npm run build

✨ 참고자료
[GitHub Actions] "Treating warnings as errors because process.env.CI = true~" 에러

1.2 Deploy 관련 에러

🚨 접근 권한 에러

문제점

Push the commit or tag
/usr/bin/git push origin gh-pages
remote: Permission to min-bok/wikibook.git denied to github-actions[bot].
fatal: unable to access 'https://github.com/min-bok/wikibook.git/': The requested URL returned error: 403
Error: Action failed with "The process '/usr/bin/git' failed with exit code 128"

에러 발생 원인