もっといい方法が有ればコメントで教えて下さい!!
結論
{
"hosting": {
"site": "my-project",
"public": "dist",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "!/login",
"destination": "/index.html"
},
{
"source": "/login",
"destination": "/login.html"
}
]
}
}
問題提起
SPAサイトでindex.html以下とlogin.html以下で分けてbuildしてHostingしたい
まず、それシングルじゃ無いやん。
というツッコミは置いておいて、
Firebase Hostingで特定のURLの場合だけ
index.htmlとは異なるファイルを読み込んで欲しいというニーズが有ったので書いてみます。
除外するpathの書き方
"source": "!/login"
この書き方で/login
以外のpathでは/index.html
が読み込まれるようになります。
ただ、この書き方では/login
にアクセスするとnot foundになってしまうので追記します。
※ "public": "dist"
の指定で/index.html
は/dist/index.html
が読まれている。
{
"hosting": {
"site": "my-project",
"public": "dist",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "!/login",
"destination": "/index.html"
}
]
}
}
/login以外は/index.htmlを読み、/loginは/login.htmlを読み込む
こちらが冒頭の結論のコードと同じものになります。
{
"hosting": {
"site": "my-project",
"public": "dist",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "!/login",
"destination": "/index.html"
},
{
"source": "/login",
"destination": "/login.html"
}
]
}
}
補足
除外pathの複数指定
"source": "!/@(login|lp)"
!/@(path|path)
で除外ファイルを複数指定する事が出来ます。
詳しくは下記を参考にしてください。
Firebase Hosting Glob pattern matching
{
"hosting": {
"site": "development-concru-react",
"public": "dist",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "!/@(login|lp)",
"destination": "/index.html"
},
{
"source": "/login",
"destination": "/login.html"
},
{
"source": "/lp",
"destination": "/lp.html"
}
]
}
}