Nuxt3 でgithub pagesにデプロイする方法

Nuxt3 でGitHub Actionsを利用して GitHub Pagesにデプロイしたときに、いくつかハマるポイントが有ったので対応について記載していきます。

ハマりポイント

GitHub PagesにNuxtJSで作った静的サイトをデプロイしたところいくつかハマりポイントがありました。

詳しく説明していきます

Nuxt.jsを使うと_nuxtというディレクトリにジェネレート後にバンドルされたJSやCSSが入ります。

しかし、GitHub Actions を使ってGitHub Pageを公開してもデフォルトでは_nuxt以下を読み込むことができず、Nuxtのページが上手く表示されません。

GitHub Pagesではデフォルトではjekyllを利用しているためのようです。こちらを無効にする必要があります。

無効にするには、公開ディレクトリのルートに .nojekyll を置けばいいようです。

具体的にはNuxt.jsの場合publicディレクトリ以下に置きます。ファイルだけあればいいので中身は空のファイルです。

GitHub Pagesは独自ドメインを使っていない場合公開URLは https://<ユーザ名>.github.io/<リポジトリ名>/ となります。

例: https://naginagisa.github.io/nagiHP/

実際に配置されるファイルも https://<ユーザ名>.github.io/<リポジトリ名>/ 以下になるのですが、デフォルトではソースコード上でドメインルートからのパスで、アセットのパスなどが記載されているため、ズレてしまいファイルが読み込めず表示されなくなってしまいます。

例:

ズレてる例: `https://<ユーザ名>.github.io/_nuxt/entry.84900e01.js`
正しいURL: `https://<ユーザ名>.github.io/<リポジトリ名>/_nuxt/entry.84900e01.js`

ずれないようにnuxt.config.tsで baseURLを指定して上げる必要があります。

export default defineNuxtConfig({
    app: {
        baseURL: '/nagiHP/',
    }
~ 省略 ~
}

こちらにサンプルのプロジェクトを用意しました。

GitHub Actionsを使ってデプロイしているので、 Settings => Pages => Source を GithHub Actions にリポジトリの設定は必要です。

Nuxt3でGitHub Pagesで公開するときのハマりポイントを紹介しました。

私の場合はこの２点を解決することで通常通りのデプロイができました