firebase hostingで画面(ページ)を配置する

firebase hostingでページを配置する手順を記載します。

1.ページの準備
　今回は特にページの中身にはこだわらずHTMLで下記の4ページを用意します。
　　･index.html(ホームにアクセスしたとき用)
　　･mypage.html(マイページ用)
　　･login.html(ログイン用)
　　･other.html(存在しないページにアクセスされた場合の「ページが見つかりませんでした。」とか用)

2.仮想、物理パスの構成
　物理パスは今回下記のような構成を行いました。
　※ほぼfirebase initした状態と同じです。
　root/
　　├ .firebaserc
　　├ .gitignore
　　├ firebase.json
　　├ index.html
　　└ public
　　　　├ index.html
　　　　├ mypage.html
　　　　├ login.html
　　　　└ other.html

仮想パスには下記を構成します。
　･https://[mydomain]//
　･https://[mydomain]//Login
　･https://[mydomain]//Mypage

3.マッピング
　2.で構成したfirebase上の仮想パスと物理パスのマッピングを行います。
firebase.jsonにglobパターンを使用し、ページと仮想パスのマッピングを行います。
https://firebase.google.com/docs/hosting/full-config?hl=ja#glob_pattern_matching

rewrites配列のなかにマッピングを行いたい数のオブジェクトを定義します。
sourceには仮想パス、destinationには物理パスを設定します。
「**」を指定した場合は定義されていないあらゆるパスを指定してアクセスされた場合、
表示するページを設定することができます。

実際の設定はfirebase.jsonに記述します。

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

4.完成
　1.で用意したページを下記のようにマッピングさせることができましたー

URL	ページ
https://[mydomain]	index.html
https://[mydomain]/Login	mypage.html
https://[mydomain]/Mypage	mypage.html
https://[mydomain]/Kaniやhttps://[mydomain]/hogehogeなど諸々	other.html