Aimless Blog

ReactやVueのアプリをNetlifyやFirebase Hostingにデプロイしてリロードすると404になる問題

Tag:
reactnetlifyfirebasevue

Reactで作ったアプリやWebサイトをNetlifyやFirebaseなどの静的サイトホスティングサービスにデプロイして
react-router-domやvue-routerで指定したルート、example.netlify.com/aboutのような ページに移動した後にf5(リロード)すると404ページが表示されてしまう問題は、rewriteやredirectの設定をすれば解決します。

netlify

reactとvueのpublicディレクトリに_redirectsというファイルを作成して、以下のように記述してbuildする。

/*    /index.html   200

firebase

firebase.jsonを下記のように"rewrites"以下を追加してデプロイ

{
  "hosting": {
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

参考

netlify docs
firebase ドキュメント