More than 5 years have passed since last update.

Nuxt.jsのSPAモードでビルドしたアプリケーションをリロードすると404エラーになってしまう

Last updated at 2019-03-08Posted at 2018-04-16

先日、FireKPTというKPTツールを公開してみました。
これはNuxt.js + Firebaseで構築していて、SPAモードでビルドしてS3でホスティングする、という構成になっています。

公開してみたところ、開発環境では発生しない不可解なバグが1つ見つかって、しばらく放置していたのですがいい加減と思って腰を上げて調べてみた次第です。

原因はよくよく考えてみれば単純で、
SPAモードでビルドすると全てのページの静的なHTMLを生成するので、_id.vueのような動的にルーティングしているページは生成されないのでした。だから404なんですねー。
公式のリファレンスにもしっかり書いてありました。

警告: generate コマンドでは 動的なルーティング は無視されます。

ということで、ルーティングの構成を少し変えました。
動的ルーティングをやめ、データ抽出用のkeyはqueryパラメータに含めるように変更しました。

this.$router.push({path: "/boards/" + key });

pages
├── boards
│   └── _key.vue
└── index.vue

↓

this.$router.push({path: "/board", query: {id: key } });

pages
├── board.vue
└── index.vue

結果、URLは以下のように変わりました。

http://localhost:3000/boards/-L3a7FrVv5IK6PgjEKCG
↓
http://localhost:3000/board?id=-L9o_BQpgfASLhHd2pwR

データベースのkeyがそのままパラメータに含まれているのはREST的ではなくて落ち着かないですが、
問題はとりあえず解決できたので良しとしておきましょう。
ソースコードはこちらです。