Vue Routerを使用しているサイトで画面をリロードすると404エラーになる

私は最近の業務ではVueを用いた開発を行なっています。今まであまりVueは触ってこなかったのですが業務で使用しているため、個人でもVueを触っています。
ルーティングはVue Routerを使用してちょっとしたプロジェクトを作成しNetlifyへデプロイしました。
開発環境では問題なかったのですが、何気なくデプロイしたプロジェクトの下層ページでリロードしたところ404エラーになってしまいました。

どうして404エラーになるのか

例えばサーバーサイドアプリケーションだとリクエストされたURLに対して紐づくページ内容をサーバーがクライアントに返します。しかしVueなどのSPAの場合、初回リクエスト時にアプリケーション全体のJavaScriptコードが返却され、その後は基本的にサーバーへリクエストを飛ばさず動的にDOMを書き換えています。URL（ブラウザのアドレスバー）が変わってもリクエストを飛ばさずクライアントで完結していて、動的にDOMを書き換え疑似的にページ遷移を行ない、ブラウザのセッション履歴を同期さています。基本的にはHTMLファイルはルートにひとつだけあってJavaScriptで中身だけ書き換えていますので下層ページでリロードすると404エラーになる訳です。ということはリロード以外にも下層ページのURLを直接叩いても404エラーになりますね。

対策方法

回避方法はVue Routerの公式ドキュメントに記載がありました。

問題を解決するには、サーバーにシンプルなキャッチオールフォールバックルートを追加するだけです。URLが静的アセットと一致しない場合、それはあなたのアプリが存在する同じindex.htmlページを提供すべきです。素晴らしいことですね！

今回私はNetlifyにデプロイしていますのでNetlifyでの対応方法を実際にやってみます。
Netlifyは2パターン紹介されていました。

_redirects

_redirectsファイルを静的アセットフォルダに配置します。_redirectsという名前がアセットフォルダに入っているのが違和感あったのでもう1パターンを採用しました。

public/_redirects

/* /index.html 200

netlify.toml

プロジェクト直下にnetlify.tomlを配置する方法です。ルートには様々な設定ファイルがあるのでこちらの方が自然な気がしました。

netlify.toml

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

考えてみなくとも当たり前のことですが404エラーになるまですっかり頭になかったです。
私は鳥貴族に何回も行ってるのに串が1人前2本なのを毎回忘れて注文しすぎてしまいます。なのでまた新たにプロジェクトを作ったときはデプロイしてから気付くのでしょう。

おしまい