Firebase Hosting

プロジェクトを作成するフォルダに移動してinitコマンド

cd /project
firebase init

Hosting: Configure and deploy Firebase Hosting sitesを選択してポチポチ。するとプロジェクトフォルダに（デフォルトなら）publicというフォルダとindex.html等のファイルが生成される。 publicフォルダ内にHtml, CSS等を配置していく。

Hostingへのデプロイ

deployコマンドでデプロイする。

firebase deploy 

# Hostingのみの場合
firebase deploy --only hosting

最後に下記の形式でURLが発行されるので、ブラウザで開くと作成したページが見られるはず。

projectID.firebaseapp.com

再デプロイしてもうまく反映されないとき

再デプロイをしてもブラウザで見たときに反映されない場合があるが、キャッシュを削除することで直る場合がある。「chrome キャッシュクリア」あたりでググって見てください。（Chrome前提ですみません）

Cookieの削除等は不要、「キャッシュされた画像とファイル」の削除だけでおｋ。

Firebase Functions との連携

あるページにリクエストが来たとき、Functionsで動的にコンテンツを生成して返す方法。

基本全部こちらに載っている。

今回はprojectID.firebaseapp.com/hogeにアクセスされたとき、Functionsにて生成したHtmlを返すような例。 index.tsにて関数を定義（ここではdynamicChange）し、ステータスコードと返すHtmlを書く。

なお、今んところFunctionsによる動的コンテンツ生成はus-central1リージョンでしか対応していないそうなのでご注意を。

import * as functions from 'firebase-functions'

exports.dynamicChange = functions
  .region('us-central1')
  .https.onRequest((request, response) => {
    response.status(200).send(
      // 公式の例では返すHtmlをハードコーディングしている。。。
    )
  })

次にfirebase.jsonにて、rewritesを次のように書き換える。

{
  ...
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [ {
      // トリガーとなるページと関数
      "source": "/hoge",
      "function": "dynamicChange"
    } ]
  }
}