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

[開発しているWebサービス](https://sssapi.app)で、  
GitHub Actionsと連携できるWebhook通知機能をリリースした。

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

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


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

https://github.com/sssapi/example-webhook-github-nuxt3

### 発生した問題

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

```html
<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に以下を追加すればよかった。

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

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

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

```typescript
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`で代用。

```typescript
import { defineNuxtConfig } from 'nuxt3'

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

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

```html
<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](https://github.com/nuxt/framework/issues/4581)

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

---

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

https://github.com/sssapi/example-webhook-github-nuxt3

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

https://twitter.com/sssapi_app/status/1526080005532442624?s=20&t=eRleO-adQAcxdinoKMDZDw

# 参考にしたサイト様
- [How to set basePath for application · Discussion #1525 · nuxt/framework](https://github.com/nuxt/framework/discussions/1525)
- [GitHub Actions による GitHub Pages への自動デプロイ - Qiita](https://qiita.com/peaceiris/items/d401f2e5724fdcb0759d#github-pages-action)
- [Vue Nuxt アプリを GitHub Actions で GitHub Pages にデプロイ - Qiita](https://qiita.com/peaceiris/items/154fc3f9bccf9e4eb137)
- [peaceiris/actions-gh-pages: GitHub Actions for GitHub Pages 🚀 Deploy static files and publish your site easily. Static-Site-Generators-friendly.](https://github.com/peaceiris/actions-gh-pages)
- [Nuxt (+TS) の開発サーバーがメモリ不足でクラッシュする事象を暫定的に回避する](https://zenn.dev/lollipop_onl/articles/eoz-nuxt-dev-memory-leak)