Nuxt3のSSGなサイトをGitHub Pagesで公開するだけなのにハマった...

Posted at 2022-05-17

開発しているWebサービスで、
GitHub Actionsと連携できるWebhook通知機能をリリースした。

デモ用のサイトでNuxt3のSSGを使ったサイトを
GitHub Pagesで公開しようとしてハマったときの備忘録。。

Nuxtのバージョンは3.0.0-rc.3

作ってみたデモサイトのリポジトリはこちら

発生した問題

nuxt generateで静的サイトを生成すると、
CSSなどがこんな感じになる。

<link rel="modulepreload" href="/_nuxt/entry-0145f459.mjs" as="script" crossorigin="">
<link rel="preload" href="/_nuxt/entry.2b7654cf.css" as="style">

GitHub Pagesでは、URLがhttps://<username>.github.io/<reponame>/
という形なので、/<reponame>/がベースになるように設定する必要がある。

Nuxt2では、nuxt.config.tsに以下を追加すればよかった。

router: {
  base: '/<reponame>/'
},

しかし、app.vueのみNuxt3では、
vue-routerを含んでいないので、これが使えない。。

Discussionに同じような質問があったので見てみると、
app.baseURLを使えばいいらしい。
・How to set basePath for application · Discussion #1525 · nuxt/framework

import { defineNuxtConfig } from 'nuxt3'

export default defineNuxtConfig({
  app: {
    baseURL: '/<reponame>'
  }
})

app.baseURLを設定して、nuxt generateを試してみると...

✔ Server built in 650ms                                                                                                                                                                           21:12:30
✔ Generated public .output/public                                                                                                                                                           nitro 21:12:30
ℹ Initializing prerenderer                                                                                                                                                                  nitro 21:12:30
ℹ Prerendering 1 initial routes with crawler                                                                                                                                                nitro 21:12:32

<--- Last few GCs --->
....

<--- JS stacktrace --->

FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory
....

こんな感じで、ヒープエラーが出てしまった。。
1ページだけなのに。。

運用対処

とりあえず、cssやjsのパスにプレフィックスが付けばいいので、
cdnURLで代用。

import { defineNuxtConfig } from 'nuxt3'

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

無事、サブディレクトリのパスがつくようになった(*´ω｀*)

<link rel="modulepreload" href="/<reponame>/_nuxt/entry-0145f459.mjs" as="script" crossorigin="">
<link rel="preload" href="/<reponame>/_nuxt/entry.2b7654cf.css" as="style">

ほかに試したこと

1. メモリ上限を上げる

メモリが足りないということなので、以下のオプションを付けてみたが、
結果変わらず。。

NODE_OPTIONS="--max-old-space-size=8192"

2. `prerender.routes`のオプションを設定する

以下のissueでprerender.routesをつける方法があったので、
試してみたけど、結果変わらず。。

・Prerendering doesn't respect baseURL · Issue #4581 · nuxt/framework

prerender: {
  routes: [
    '/<reponame>/',
  ]
}

暫定対処的だけど、無事GitHub Pagesにデプロイできた(*´ω｀*)
Nuxt3自体はサクサク書けるのでかなりよいので、これからもたのしみ(*´ω｀*)

こちらもよろしくおねがいします(*´ω｀*)!!

参考にしたサイト様

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up