Netlify で Vue.js で作った SPA サイトでトップ以外が 404 になる

  • Vue

Vue.js で作った SPA を Netlify にデプロイした時、実態は index.html しかないので、ルーティングを割り振ったページでリロードしたり、直接アクセスすると 404 になってしまいます。

WordPress のようにファイルの実態が無い時は全て index.html にリダイレクトさせて、ルーティングを効かせる必要があります。

Netlify では_redirectファイルを置くことでリダイレクトしてくれるようになるみたいです。書式が .htaccess などとは異なるため注意。

/public/_redirect

/*  /index.html  200!

ルートは以下を全て index.html に200リダイレクトさせますが、ファイルがあるときはリダイレクトしたくないと思うので、200!のように!を末尾に記述します。

おそらく他のサービスにデプロイした時にも似たようなことをする必要があるのかも。Netlify はリダイレクト設定が書けて助かった…。詳しくは公式リファレンスをどうぞ!