GitHub Actions: CRA(create-react-app) 빌드 + GitHub Pages 배포 자동화하기

name: Deploy

on:
  push:
    branches: ['step1']

  workflow_dispatch:

name: Deploy

on:
  push:
    branches: ['main']

jobs:
  build-prepare-1:
    name: Build Prepare 1
  build-prepare-2:
    name: Build Prepare 2
  deploy:
    name: Deploy
    needs: [build-prepare-1, build-prepare-2]

name: Deploy

on:
  push:
    branches: ['step1']

  workflow_dispatch:

jobs:
  deploy:
    runs-on: ubuntu-latest
    permissions:
      contents: write
    concurrency:
      group: ${{ github.workflow }}
      cancel-in-progress: true

name: Deploy

on:
  push:
    branches: ['step1']

  workflow_dispatch:

jobs:
  deploy:
    runs-on: ubuntu-latest
    permissions:
      contents: write
    concurrency:
      group: ${{ github.workflow }}
      cancel-in-progress: true

    steps:
      # 레포지토리의 소스 코드를 사용하는 step입니다. 이게 없으면 빈 폴더가 됩니다.
      - name: Use repository source
        uses: actions/checkout@v3

      # node.js 런타임을 사용합니다.
      - name: Use node.js
        uses: actions/setup-node@v3
        with:
          node-version: 18 # 프로젝트에서 사용하는 node.js 버전을 사용하세요.

      # node_modules 폴더를 캐싱합니다.
      # 이게 없으면 workflow를 실행할 때 마다 node_modules를 다시 생성합니다.
      - name: Cache node_modules
        id: cache
        uses: actions/cache@v3
        with:
          # 캐싱할 폴더를 지정합니다.
          path: '**/node_modules'
          # package-lock.json 파일의 변경이 발생했을 경우 새로 캐싱될 수 있도록 해줍니다.
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
          # cache hit이 발생하지 않았을 경우, restore-keys 에 있는 것을 꺼냅니다.
          # 단, npm ci 명령은 실행됩니다. 기존의 node_modules 캐시를 기반으로
          # 추가된 패키지만 설치할테니, 아예 처음부터 node_modules 폴더를 생성하는 것보다
          # 시간이 적게 걸릴 겁니다.
          restore-keys: |
            ${{ runner.os }}-node-

      - name: Install dependencies
        run: npm ci
        # cache hit이 발생한 경우 (즉 package-lock.json이 변경되지 않은 경우)
        # npm ci 실행은 skip 됩니다.
        if: steps.cache.outputs.cache-hit != 'true'

      # $GITHUB_REPOSITORY 환경 변수는 solo5star/react-payments 형태의
      # owner과 repository 값입니다. 이를 .env에 PUBLIC_URL=/react-payments/ 형태로
      # 저장하기 위한 명령입니다.
      - name: Set PUBLIC_URL
        run: |
          PUBLIC_URL=$(echo $GITHUB_REPOSITORY | sed -r 's/^.+\/(.+)$/\/\1\//')
          echo PUBLIC_URL=$PUBLIC_URL > .env

      # 빌드를 수행합니다.
      # react-router-dom의 BrowserRouter를 지원하기 위해
      # index.html 을 복사하여 404.html에서도 사용하도록 합니다.
      - name: Build
        run: |
          npm run build
          cp ./build/index.html ./build/404.html

      # 빌드된 파일들(./build)을 gh-pages 브랜치로 배포합니다.
      - uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./build

1: https://solo5star.github.io/react-payments/
2: https://solo5star.github.io/react-payments/register