LoginSignup
0
0

More than 3 years have passed since last update.

Firebase Hostingで特定Pathのみ異なるFileを読み込みたい - hosting rewrites exclude source path

Posted at

もっといい方法が有ればコメントで教えて下さい!!

結論

{
  "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"
      }
    ]
  }
}

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0