Nuxt3で作ったWebアプリをGithub Pagesにデプロイする

Gemini nanoで遊んでみるついでで久々にGithub PagesにWebアプリをデプロイしてみたので色々とメモ。

Github Pagesが出始めだったVue1系の時代（今からすると大昔だ・・・）やGithub Actionが始まったNuxt2の時代にも同じようにGithub Pagesを試したことはあったんだけど、当時と比べてGithub側の機能という意味でもNuxt側の作りという意味でも色々と綺麗に整備されていて、かなり手軽に遊べるようになりましたな。

ローカルでyarn devで起動してちゃんと動くことを確認できてから以下のことを追加で行う感じ。

リポジトリ側の設定

docs.github.com

昔の記憶だと専用のブランチ gh-pagesを設けてどうこうしてたはずだが、今はそういうの要らない雰囲気。

コード上の準備

.nojekyll ファイルの設置

https://github.com/blue1st/gemini-nano-tester/blob/main/public/.nojekyll

これは昔っから同様の作業が要りましたな。

Github PagesはデフォルトでJekyllで処理しようとしてしまうため、そうされないようドキュメントルートであるpublicディレクトリに .nojekyll という名前の空ファイルを作成しておく。

% touch public/.nojekyll

nuxt.config.tsの設定

https://github.com/blue1st/gemini-nano-tester/blob/main/nuxt.config.ts#L6

Github PagesでデプロイされるURLは https://<user>.github.io/<repository>/ みたいになるので、 javascriptやらページリンクやらが /<repository>/ を向くように設定してやる必要がある。

ざっくりググるとnuxt.config.tsのbaseURLを設定しろというような記事が引っかかるのだが、自分が試した感じだとapp.vueのまま作るミニマムな構成だったせいなのか上手くいかなかった。

推測するにpages以下にファイルを分ける形にすることによってrouterが使われるので上記の設定が働く感じなのかな？

結果的には今回はnuxt.config.tsにapp.cdnURLを設定することで適切に動いてくれた。

export default defineNuxtConfig({
  app: {
    cdnURL: '/<repository>/'
  }
})

Nuxt2の時はssr: falseにするとかtarget: staticにするとか事前にそれ用のビルド設定を行う必要があったんだけど、 Nuxt3だとそのあたりはノータッチで良さそう（後述するワークフロー内の記述だけで済みそう）なのが楽ですな。

ワークフローの設定

Githubのリポジトリ上での設定で自動生成されたものでもビルド自体は動いた感じはあったんだけど、まあ公式に従うのが無難かということでマニュアル記載のものをそのままコピペ。

https://github.com/blue1st/gemini-nano-tester/blob/main/.github/workflows/deploy.yml

nuxt.com

# https://github.com/actions/deploy-pages#usage
name: Deploy to GitHub Pages
on:
  workflow_dispatch:
  push:
    branches:
      - main
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - run: corepack enable
      - uses: actions/setup-node@v3
        with:
          node-version: "20"
      # Pick your own package manager and build script
      - run: npm install
      - run: npx nuxt build --preset github_pages
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: ./.output/public
  # Deployment job
  deploy:
    # Add a dependency to the build job
    needs: build
    # Grant GITHUB_TOKEN the permissions required to make a Pages deployment
    permissions:
      pages: write      # to deploy to Pages
      id-token: write   # to verify the deployment originates from an appropriate source
    # Deploy to the github_pages environment
    environment:
      name: github_pages
      url: ${{ steps.deployment.outputs.page_url }}
    # Specify runner + deployment step
    runs-on: ubuntu-latest
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

以上でリポジトリにpushしたらGithub Pagesに自動でデプロイできるようになった。

nuxt.config.tsのbaseURLがダメでcdnURLにしたあたりだけちょっと手間取ったけど、全体としてはスルッとWeb公開までいけるのは良いですな。