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

YouTubeの「Firebase Release Notes」プレイリスト

最新のアップデートの概要を把握するのにちょうど良い

Firebase Extensions

Functionsを実装する際の参考になる

Cloud FunctionsでFirebase Authenticationの認証情報を取得する

functions.https.onCallを使用している場合はcontextパラメータを受け取ることができる

Nuxt.jsのservice workerで環境変数を切り替えられるようにする

設定情報をハードコードしたくなかったので、ビルド時にnodeコマンドでファイル生成を行い環境変数を切り替えられるように対応した。

CloudFunctionsを使ってFirestoreのサブコレクションを削除する

CloudFunctions内でFirebase CLIのdeleteコマンドを呼び出すことで一括削除ができる