モチベーション
Nuxt3 で構築した Web サイトを GitHub Actions で GitHub Pages にデプロイするのに、ハマるとは思わなかったので記事にしました。
結論
GitHub 上で選択できる Starter Workflow を使うと上手くいかないので、以下のような仕様のワークフローを自分で書く必要がある。
- ソースコードをチェックアウトする。 --> Starter Workflow と同じように書ける。
- Node.js と パッケージマネージャーをセットアップする。 --> npm または yarn1.x を使うならStarter Workflowと同じように書ける。
- Nuxt3 で構成した Web サイトを SSG する。 --> Starter Workflow は参考にならない。
- SSG した静的サイトを成果物としてアップロードする。 --> Starter Workflow と同じように書ける。
- アップロードした成果物を GtiHub Pages にデプロイする。 --> Starter Workflow と同じように書ける。
Starter Workflow が動かない原因
actions/configure-pages が静的サイトジェネレータ（今回の場合は Nuxt）に応じて、動的に設定ファイルを書き換えている。 しかし、この処理は TypeScript を使った設定ファイルに対応しておらず、設定の内容も古い。
return { configurationFile: generatorConfigFile || detectOrDefaultConfigFile('nuxt.config'), blankConfigurationFile: `${__dirname}/blank-configurations/nuxt.js`, properties: { // Configure a base path on the router 'router.base': path, // Set the target to static too // https://nuxtjs.org/docs/configuration-glossary/configuration-target/ target: 'static' } }https://github.com/actions/configure-pages/blob/main/src/set-pages-config.js より
Nuxt3 で構成した Web サイトを GitHub Pages 用に生成する
以下のような steps をワークフローに組み込むと、 GitHub Pages 用に静的サイトを生成できる。
jobs: # Build job build: runs-on: ubuntu-latest steps: - name: Configure GitHub Pages uses: actions/configure-pages@v5 id: configure-pages - name: Static HTML export with Nuxt run: npm run generate env: NUXT_APP_BASE_URL: ${{ steps.configure-pages.outputs.base_path }}
プロジェクトのサイトをデプロイしたかったので、 baseURLを環境変数で設定した。 nuxt.config.ts や app.config.ts で設定するなら環境変数は不要。また、ドメイン直下にデプロイするときも環境変数は不要。 設定値にはactions/configure-pages の outputs を流用した。
おまけ
Nuxt の公式サイト に GitHub Pages にデプロイするためのワークフロー例が掲載されていた。
npx nuxt build --preset github_page では、 GitHub Pages 用に nitro が提供しているビルドの設定を利用していることが分かる。
ビルドの設定 を見てみると、baseURL を設定しているように見えない。
おそらく app.config.ts などで設定している前提なのだと思う。
nuxt.config.ts や app.config.ts で baseURL を設定しないなら、環境変数で baseURL を設定する必要がある。
jobs: build: runs-on: ubuntu-latest steps: - run: npx nuxt build --preset github_page env: NUXT_APP_BASE_URL: ${{ steps.configure-pages.outputs.base_path }}
最後に
簡単にできるかなと思っていたことが、思ったよりも大変で驚いた。GitHub Pages や Nuxt3 のことを分かっている人にとっては、ワークフローを自分で定義すればいいだけなので、あんまり躓くポイントはなかったかもしれない。
