Netlifyで下層ページが見れなかった話

VueCliで作ったサイトをテストアップする際に静的ホスティングを使ってみたところ、下層ページのリンクをふむと404が返ってきてしまったのでその対処法を書いていきたいと思います。

# 結論

Vue Routerを使用するとTOPページからリンクを踏んで遷移する場合は問題なく動くが、routerの設定ファイルをmode: 'history'とするとurlが想定通りに表示される代わりに適切なサーバーの設定しないとブラウザで直接下層のURLをたたいた場合404で返ってくることがわかりました。

# 解決方法

NetlifyDocs
公式ドキュメントを参照すると

/*    /index.html   200

と書いてあります。これはブラウザがどの下層ページのURLを踏んでもindex.htmlにリライトするという指示になります。

# まとめ

SPAを用いた開発だとindex.htmlのみしか存在しないので、router内で定義した値を返す前に404を返してしまいます。
そこで、サーバー側でindex.htmlにリライトしてあげると、URLはそのままでJSファイル内に定義したrouterのコンポーネントを表示してくれるようになっている分けです。
以上！