ReactやVueのアプリをNetlifyやFirebase Hostingにデプロイしてリロードすると404になる問題
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"
}
]
}
}