깃허브 액션 - github-pages-deploy-action로 리액트 gh-pages 자동 배포하기

깃허브 데스크탑으로 프로젝트 관리하기 강의 오픈!! (인프런 바로가기)

 

Git / GitHub 전체 링크

 

참고

- gh-pages로 리액트 프로젝트 배포하기

- https://docs.github.com/en/actions/using-jobs/assigning-permissions-to-jobs

- https://github.com/JamesIves/github-pages-deploy-action

 

리포지토리에 코드가 push 되는 것과 깃허브 페이지를 배포하는 것은 별개의 작업이다. (npm run deploy)

리포지토리에 push가 되면 페이지가 자동 배포되도록 깃허브 액션의 yml 파일을 만들어 보자.

 

 .github/workflows/push-and-deploy.yml을 만들어 보자.

 

github-pages-deploy-action을 쓰려면 contents의 permission을 write로 설정해야 한다. (권한 설정 링크 참고)

jobs:
  push-and-deploy:
    runs-on: ubuntu-latest

    # permissions: write-all
    permissions: 
      contents: write

 

그리고 Node JS를 설치하여 npm install / build를 실행한다. 

현재 프로젝트의 Node 버전에 맞춰서 설치하면 된다.

    steps:
      - name: Checkout repository
        uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '16.19.0'

      - name: Install dependencies
        run: npm install # or npm install --legacy-peer-deps 

      - name: Build React app
        run: npm run build

 

이제 github-pages-deploy-action을 uses에 추가해 보자.

여기에서 with에 token과 branch, folder를 설정하면 된다.

token을 secrets.GITHUB_TOKEN으로 설정하면 workflow에서 사용할 수 있는 토큰이 자동으로 생성된다.

그리고 깃허브 페이지의 브랜치는 gh-pages이므로 branch는 gh-pages로 설정한다.

 

그리고 리액트의 빌드 파일은 보통 build 폴더에 생성되므로 folder는 build로 설정하면 된다.

      - name: Deploy to GitHub Pages
        uses: JamesIves/github-pages-deploy-action@4.1.3
        with:
          token: ${{ secrets.GITHUB_TOKEN }}
          branch: gh-pages 
          folder: build

 

성공적으로 배포되면 Jobs에서 다음과 같은 로그를 확인할 수 있다.

 

전체 코드는 다음과 같다.

name: Push and Deploy

on:
  push:
    branches:
      - master 

jobs:
  push-and-deploy:
    runs-on: ubuntu-latest

    # permissions: write-all
    permissions: 
      contents: write

    steps:
      - name: Checkout repository
        uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '16.19.0'

      - name: Install dependencies
        run: npm install # or npm install --legacy-peer-deps 

      - name: Build React app
        run: npm run build 

      - name: Deploy to GitHub Pages
        uses: JamesIves/github-pages-deploy-action@4.1.3
        with:
          token: ${{ secrets.GITHUB_TOKEN }}
          branch: gh-pages 
          folder: build