Firebase Hostingのキャッシュ設定をする

公開日時

Next.js exportで静的ジェネレートしたサイトをFirebase Hostingでホスティングしている。

その際に、firebase.jsonに追記することで手軽にキャッシュ設定ができた。

↓のようにするとクライアントサイドで24時間画像のキャッシュをするようになる。

{
  "hosting": {
    "public": "out",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "trailingSlash": true,
    "headers": [
      {
        "source": "**/*",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "max-age=60"
          }
        ]
      },
      {
        "source": "**/*.@(jpg|jpeg|gif|png)",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "max-age=82800"
          }
        ]
      },
      {
        "source": "404",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "max-age=300"
          }
        ]
      }
    ]
  }
}

Related #firebase

SharedArrayBuffer updates in Android Chrome 88 and Desktop Chrome 92

クロスオリジン分離対応を実施

Firebase Auth Googleログイン時のリダイレクトドメインを変更する

CNAME追加とHostingの「カスタムドメインを追加」を行う

Firebase Emulator Suiteで起動しているFunctionsから本番のFirestoreにアクセスする

functionsのみエミュレータを使うようにするとできる

Firebase Functions呼び出し時に Error: function terminated. が発生した場合

firebase functions:logで詳細を確認できる

Local Emulator Suiteを使ってFirestoreのローカル開発を行う際に初期データ(seeds)を用意する

ローカル管理画面でDeveloperToolsを開くとwindow.firestoreが使える

「Unit testing security rules with the Firebase Emulator Suite」でセキュリティルールのtestを学ぶ

ローカルでセキュリティルールのtestができるようになったのはありがたい