Counts the Clouds

Gatsby CloudからFirebase HostingにデプロイするときのCache-Control
2021.09.20

Gatsby
Gatsby Cloud
Firebase
Firebase Hosting

chuttersnap-9AqIdzEc9pY-unsplash.jpg

背景

firebase.jsonでFirebase HostingのCache-Controlを設定できるはずなのだけど、Gatsby Cloudからデプロイしているせいか反映されていなかった。

Gatsby本家にもGatsby CloudからFirebase Hostingを使う場合の設定に関しては何も記載がなかった。

Lighthouseのレポートでは「効果的なキャッシュ設定」が必要とされるファイルが5つ見つかっており、本来キャッシュを効かせても問題ないはずのハッシュダイジェスト付きのJavaScriptのレスポンスが、cache-control: max-age=3600となっていた。

ワークアラウンド

You need to copy the firebase.json file over into the public/ folder.

上記のようなワークアラウンドを発見したので、試してみる。要は、ビルドのときにpublicディレクトリにコピーしてあげればいいということのようだ。

% npm install --save fs-extra

gatsby-node.jsに以下を追記。copySync関数はNodeのネイティブではなく、fs-extraパッケージが必要。

exports.onPostBuild = () => {
  fs.copySync(
    path.join(__dirname, '/firebase.json'),
    path.join(__dirname, '/public/firebase.json')
  )
}

これで、gatsby buildコマンドでビルドしたとき、firebase.jsonがpublicディレクトリにコピーされているのを確認した。

キャッシュ戦略については、Gatsbyの公式にあったものを使ってみる。これでLighthouseの指摘はクリアできるはず。

{
  "hosting": {
    "public": "public",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "headers": [
      {
        "source": "**/*",
        "headers": [
          {
            "key": "cache-control",
            "value": "public, max-age=0, must-revalidate"
          }
        ]
      },
      {
        "source": "static/**",
        "headers": [
          {
            "key": "cache-control",
            "value": "public, max-age=31536000, immutable"
          }
        ]
      },
      {
        "source": "**/*.@(css|js)",
        "headers": [
          {
            "key": "cache-control",
            "value": "public, max-age=31536000, immutable"
          }
        ]
      },
      {
        "source": "sw.js",
        "headers": [
          {
            "key": "cache-control",
            "value": "public, max-age=0, must-revalidate"
          }
        ]
      },
      {
        "source": "page-data/**",
        "headers": [
          {
            "key": "cache-control",
            "value": "public, max-age=0, must-revalidate"
          }
        ]
      }
    ]
  }
}

これをデプロイすると、Firbase Hostingのほうにも反映され、“Serve static assets with an efficient cache policy”の項目もPassできた。

cache-control: public, max-age=31536000, immutable

firebase.jsonの設定をGatsby Cloud経由でFirebase Hostingに反映させることができた。