ITエンジニアの種籾(たねもみ)

IT技術とか株式投資とか。

Gatsby ブログのキャッシュ設定を見直した

2020年 08月 11日

目次

ブログの記事を更新してもトップページの記事の一覧が更新されない事象が発生しました。 調べてみると、ブラウザによる HTML ファイルの GET リクエストに対して、Web サーバがステータス 304 で返してきて最新化されていませんでした。

放置しておいてもいつか最新化されそうですが、気持ち悪いのでこの課題の解決することにしました。

本記事ではその調べた結果と対策を紹介します。

HTTP サーバが 304 を返してしまう流れ

まずは HTTP サーバがステータス 304(Not Modified)を返す原因を調べました。

参考サイト:HTTP ヘッダチューニング Etag・Last-Modified

要約すると

  • 初回リクエスト

    • サーバが Last-Modified をつけて返す
  • 2回目のリクエスト

    • クライアントが前回の Last-Modified を If-Modified-Since に含めてリクエスト
    • サーバはコンテンツの更新時刻と比較して変更がなければ 304 を返す
    • クライアントは 304 が返ってきたらローカルを表示する

つまり、サーバ側の HTML などのコンテンツの更新日時が関係してるらしいです。 gatsby は HTML を生成してるんだから、ちゃんとファイル更新してるんだけどな。。。

HTTP の仕様からの深追いはやめて、gatsby 関連でキャッシュにいて調べてみることにした。

gatsby におけるキャッシュ設定の方針

gatsby 特殊なのかもしれないと思い、「gatsby cache」で調べました。 したら、本家のサイトでキャッシュについて述べているページが見つかりました。

参考サイト:Caching Static Sites

リソースの種類よって、取るべきキャッシュの戦略が違うと説明してくれています。

要約すると、

  • html

    • キャッシュしてはいけない
    • リクエストごとに最新を確認するように指示すべき
    • cache-control ヘッダは cache-control: public, max-age=0, must-revalidate であるべき
  • page data

    • public/page-data/
    • html と考えは同じ
  • app data

    • app-data.json
    • page data と考えは同じ
  • statics files

    • static/
    • 永遠にキャッシュされるべき
    • cache-control ヘッダは cache-control: public, max-age=31536000, immutable であるべき。
  • javascript and css

    • static files と考えは同じ
    • /sw.js だけは違う
    • cache-control ヘッダは cache-control: public, max-age=0, must-revalidate であるべき
  • 異なるホストでのキャッシュ戦略

    • ホストごとに Gatsby プラグインを作成することを推奨している。

HTML はキャッシュしないようにcache-control: public, max-age=0, must-revalidateをレスポンスすべきとのことです。 しかも、最後のが重要で、ホストのミドルウェアごとに Gatsby プラグインを作って対応しましょうと言っています。

apache 用のキャッシュ

結論は、個別に上記のキャッシュ戦略に対応するのではなくて、ホストごとにプラグインを作成したほうがよいということです。

ホスト(apache とか)ごとに、キャッシュの対応が違うのでスタータには入ってないから、自分で入れろということです。

ということで探しました。

Apache 向けのキャッシュ設定プラグイン

俺のサイトはお名前.com で、調べるとホストは apache2.2 のようだ。ちょっと古いですね。。。

なので、gatsby の apache 向けキャッシュ設定プラグインを探すと以下のサイトが見つかりました。

参考サイト:gatsby-plugin-htaccess

要約すると、

  • ビルド時に .htaccess を生成する
  • デフォルトで Apache Server Configs v2.4.4.0
  • /public/.htaccess と /public/static/.htaccess を出力する

プラグインの README に従ってインストールと設定をしていきます。

インストールは、

npm install gatsby-plugin-htaccess

gatsby-config.js に下記の設定を追加

    {
      resolve: "gatsby-plugin-htaccess",
      options: {
        https: true,
        www: true,
        DisallowSymLinks: true,
        SymLinksIfOwnerMatch: false,
        host: "www.crz33.com",
      },
    },

注意点として、私が使っているお名前.com が symlink を許可していなかったので、

  • DisallowSymLinks: true
  • SymLinksIfOwnerMatch: false

をセットしています。

後はビルドすると、public/に.htaccess が生成されたので、コンテンツと一緒にアップロードしたら反映できました。 .htaccess を見ると、結構な量の設定をしてくれています。 単純にキャッシュだけでなく圧縮とかリダイレクトとかの設定までやってくれてるので、キャッシュに関係なく導入したほうがよいでしょう。

このページをアップロードする前にブラウザでアクセスし、アップロード後もう一度アクセスして即最新化されれば OK です。

以上

gatsby サイトの HTML がキャッシュされてしまっていたので、私が使っている apache のプラグインを見つけて gatsby に適用しました。 単純にキャッシュだけでなく圧縮とかリダイレクトとかの設定までやってくれてるので、キャッシュに関係なく導入したほうがよいでしょう。

以上です。

広告