GatsbyJSのキャッシュについて
GatsbyJSのドキュメントに、キャッシュの設定方法が記載してあります。
超簡単にまとめると
- htmlはキャッシュしない
- static/以下はキャッシュする
- js, cssはキャッシュする
- ただし、/sw.jsはキャッシュしない
GoogleAppEngineでgatsbyの成果物を公開する時に、このキャッシュ設定を再現してみたapp.yamlをメモしておこうと思います。
ただ、自分もちゃんと理解できてないのですがGAEは独自のキャッシュサーバにもキャッシュをしているらしく、この設定で本当に静的ページが更新されるのか良くわかってないです・・・。
とりあえずcache-control
ヘッダが期待値通りになってることだけは目視できています。
GAE app.yamlの設定
-
default_expiration
でcacheの期限を設定できる - handler毎に設定したい場合はそれぞれ
expiration
を書く(省略すると前述のdefaultが使われる)
Gatsbyの成果物であるpublic
ディレクトリが、GAEアプリのルートにある前提としています。
# app.yaml
# 〜関係ないところは省略してます〜
default_expiration: "0s"
handlers:
# If the path is empty, show static index.html file
- url: /
static_files: public/index.html
upload: public/index.html
secure: always
- url: /sw.js
static_files: public/sw.js
upload: public/sw.js
secure: always
- url: /static
static_dir: public/static
secure: always
expiration: "600s"
- url: /(.*\.(js|css))$
static_files: public/\1
upload: public/.*\.(js|css)$
secure: always
expiration: "600s"
# Otherwise, find file in static directory
- url: /
static_dir: public
secure: always
# All URLs are handled by the Go application script
- url: /.*
script: auto
secure: always
Gatsbyのドキュメントにはキャッシュするものについてはめちゃめちゃ長く期間が書かれてますが
GAEは10分を推奨(多分・・・)してたのでここでは 600s にしています。
簡単ですが、以上です。