2018-11-06に更新

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に遷移します。


Morix💪😼✨

副業募集中😀 #AWS #GCP #golang #Python #Vim #技術ブログ #SRE #しがないラジオ #インフラ勉強会 欲しいもの: https://t.co/wZbbiO4e3d

Crieitはαバージョンで開発中です。進捗は公式Twitterアカウントをフォローして確認してください。 興味がある方は是非記事の投稿もお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか
関連記事

コメント