Netlifyを使ってたらルートパス以外が404になった話とその解決方法

先日「Nyaaan」というWebサービスをリリースしました。
このWebサービスは「Nuxt.js」で作られており、「Netlify」でWebホスティングしています。

Twitterでシェアして楽しんでもらうことを前提としたWebサービスですので、TwitterCardの画像は広くリーチするのには大切なものです。
しかし以下のような詳細画面など、ルートパス(index.htmlにあたるページ)以外は404にってしまう現象になり、
実際URLにアクセスするとちゃんと画面は見れるけど、TwitterではTwitterCardが表示されないという現象が起こりました。

その原因と解決方法を記載します。

原因

通常SPAサイトを作る場合、ルートパス以外でアクセスされた場合はindex.htmlにリダイレクトをする処理を書くと思います。
自分は404ページを用意して、Nuxt.jsの設定で「ページが存在しない場合、404を表示する」という設定を先にやっていました。

# SPA フォールバック
module.exports = {
  generate: {
    fallback: true, // '404.html' を使用したい場合
    fallback: 'my-fallback/file.html' // ホスティングサービスで特定のロケーションを指定する必要がある場合
  }
}

https://ja.nuxtjs.org/guide/routing/

この対応を先にやったことにより、ルーティングはちゃんと行われるけど404になってしまう現象になりました。

解決方法

解決方法は、Netlify用のリダイレクト設定を入れてあげることです。

HISTORY PUSHSTATE AND SINGLE PAGE APPS 参照
https://www.netlify.com/docs/redirects/#rewrites-and-proxying

/static/_redirects に以下の内容を記載。

/*    /index.html   200

これでルートパス以外はindex.htmlにHTTPステータス200でリダイレクトされます。
fallbackの設定を入れているならパスが見つからない場合、404.htmlに遷移します。