【手順書】NEXT.JS の静的サイトのGitHub Pages へのデプロイ

ステップ 1: GitHub Actions ワークフローの作成

1. リポジトリのルートに .github/workflows フォルダーを作成します。

2. deploy-gh-pages.yml という名前のファイルを作成し、以下の内容をコピー＆ペーストします。

   name: Deploy static content to Pages
   
   on:
     push:
       branches: ["main"]
     workflow_dispatch:
   
   permissions:
     contents: read
     pages: write
     id-token: write
   
   concurrency:
     group: "pages"
     cancel-in-progress: true
   
   jobs:
     deploy:
       environment:
         name: github-pages
         url: ${{ steps.deployment.outputs.page_url }}
       runs-on: ubuntu-latest
       env:
         NEXT_PUBLIC_SERVICE_ID: ${{ secrets.NEXT_PUBLIC_SERVICE_ID }}
         NEXT_PUBLIC_BASE_PATH: /リポジトリ名を記載
       steps:
         - name: Checkout
           uses: actions/checkout@v3
         - name: Set up Node
           uses: actions/setup-node@v4
           with:
             node-version: 20
             cache: "npm"
         - name: Install dependencies
           run: npm ci
         - name: Build
           run: npm run build
           env:
             GITHUB_PAGES: true
             NEXT_PUBLIC_BASE_PATH: /リポジトリ名を記載
         - name: Setup Pages
           uses: actions/configure-pages@v4
         - name: Upload artifact
           uses: actions/upload-pages-artifact@v3
           with:
             path: "./out"
         - name: Deploy to GitHub Pages
           id: deployment
           uses: actions/deploy-pages@v4
   

ステップ 2: 環境変数の設定

1. GitHub リポジトリの「Settings」タブに移動します。
2. 左側のメニューから「Secrets and variables」を選択し、「Actions」をクリックします。
3. NEXT_PUBLIC_SERVICE_ID を追加し、必要な値を設定します。

ステップ 3: リポジトリ名の設定

• deploy-gh-pages.yml 内の NEXT_PUBLIC_BASE_PATH にリポジトリ名を記載します。

ステップ 4: gitのコミットとプッシュ

1. 変更をコミットし、main ブランチにプッシュします。

   git add .
   git commit -m "Setup GitHub Pages deployment"
   git push origin main
   

ステップ 5: デプロイの確認

1. GitHub リポジトリの「Actions」タブを開き、ワークフローが実行されていることを確認します。
2. デプロイが成功すると、GitHub Pages の URL が表示されます。