React 프로젝트를 Github Pages에 자동 배포하기

1. React 프로젝트 준비
   

2. package.json 수정

{
  ...
  "homepage": "https://<유저네임>.github.io/<리포지토리>/",
  ...
}

3. .github/workflows/deploy.yml 파일 추가

name: Deployment
on: [push, pull_request]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout source code
        uses: actions/checkout@master

      - name: Set up Node
        uses: actions/setup-node@master
        with:
          node-version: 16

      - name: Install dependencies
        run: npm install

      - name: Build
        run: npm run build
        env:
          NODE_ENV: production

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

4. 커밋 및 푸시 후 Actions탭에서 빌드 결과 확인
   

5. Settings => Pages에서 Source를 gh-pages 브랜치로 변경
   

6. Actions 탭에서 배포 결과 확인
   

7. 👍
   

커스텀 도메인 설정

1. package.json의 homepage를 커스텀 도메인에 맞게 변경
2. public 폴더에 CNAME 파일 추가
   
3. 😋