gh-pages로 웹페이지 배포 -3- (Github Action으로 배포 자동화하기)

이전 글

2022.03.19 - [분류 전체보기] - gh-pages로 웹페이지 배포 -2- (React 페이지 배포)

gh-pages로 웹페이지 배포 -2- (React 페이지 배포)

---

1. Github Action 생성

프로젝트에 .github/workflows 라는 이름의 폴더를 생성하고, 그 안에 gh-pages.yml 파일을 생성.

내용은 아래와 같이 작성한다.

name: Build and Deploy # Github Action 이름

on:
  push:
    branches:
      - main # 빌드할 브랜치

jobs:
  deploy:
    runs-on: ubuntu-18.04
    steps:
      - uses: actions/checkout@v2

      - name: Setup Node
        uses: actions/setup-node@v2.1.2
        with:
          node-version: "12.x"

      - name: Cache dependencies
        uses: actions/cache@v2
        with:
          path: ~/.npm
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-node-

      - run: npm ci
      - run: npm run build # 빌드 스크립트

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./build # 이 폴더에 있는 파일을 배포

---

2. Push

변경 사항을 커밋하고 푸쉬한다.

---

3. Github Action 실행 확인

Actions 탭에 가보면 위에서 작성한 액션이 실행되는 것을 확인할 수 있다. 에러가 나는 경우 여기서 로그도 확인이 가능하다.

---

4. 배포 확인

페이지가 배포된 것을 확인한다.

---

참고 링크

Github Actions를 이용하여 gh-pages 자동 배포하기

Nextjs를 GitHub Action으로 배포하기 - baealex

GitHub Actions による GitHub Pages への自動デプロイ - Qiita

---

+

CSS, image issue

Github pages에서 Next.js 프로젝트를 호스팅할 때(사용자 지정 도메인 없이), 프로젝트가 하위 경로(ex https://user.github.io/repository에서))에서 호스팅 되기 때문에 Asset(이미지, 스타일시트 등)의 경로를 그에 맞춰 설정해주어야 한다.

basePath를 사용하면 복잡한 구성 없이 쉽게 구현이 가능하다.

 

basePath 설정법

next.config.js

module.exports = {
  basePath: '/nextjs-tutorial'
}