CloudFront でデカいファイルを gzip 配信する

Summary

CloudFront は、10 MB 超えのデカいファイルを自動的に gzip で配信してくれません。
あらかじめ gzip 圧縮したファイルを S3 に置くことで対処できました。

前提条件

• S3 と CloudFront でサイトを配信している。
• 10 MB 超えのデカいファイルを配信している。
• デカいファイルにも gzip 圧縮をかけたい。

CloudFront では自動で gzip 配信できないファイル

文章校正ができるサイトを作っていたところ、形態素解析のための辞書ファイルを Web ブラウザに読み込ませる必要が出てきました。
その辞書ファイルは gzip 圧縮で 20 MB、非圧縮で 100 MB のなかなかデカいファイル。
CloudFront で gzip 圧縮をかけたいのだが……

CloudFront の「Compress Objects Automatically」を有効にしても、辞書ファイルは gzip で配信されませんでした。
記事CloudFrontのgzip圧縮をONにした時に圧縮されるデータによると、10 MB を超えるファイルには gzip 圧縮が適用されないようです。

gzip 圧縮したファイルを S3 に置く

そこで、あらかじめ gzip 圧縮したファイルを S3 に置くことにしました。
GitHub Actions を使って S3 にデプロイしているので、↓のように gzip コマンドを使った前処理を入れます。

該当のコミット

- run: gzip -r docs
- run: for file in $(find docs -type f); do mv "${file}" "${file%.gz}"; done
- uses: jakejarvis/s3-sync-action@master
  with:
    args: --acl public-read --content-encoding gzip --delete --follow-symlinks
  env:
    AWS_S3_BUCKET: ${{ secrets.AWS_S3_BUCKET }}
    AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
    AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
    SOURCE_DIR: docs

docs ディレクトリ配下を配信したいとして、$ gzip -r docs で全ファイルを gzip 圧縮します。このとき、圧縮されたファイルには .gz 拡張子がつきます。

$ for file in $(find docs -type f); do mv ${file} ${file%.gz}; done で圧縮したファイルから .gz 拡張子を取り除きます。

そして、s3 の sync コマンドを --content-encoding gzip オプションで実行すれば完了です。
※動作確認する際は、CloudFront のキャッシュ削除が必要かもしれません。

gzip 配信できた！

辞書データを 20 MB 以内に収めて配信できるようになりました。
それでもまだ Web サイトとしてはとてもデカい。
そこで、

• Service Worker を使ってキャッシュを永続化すれば実用範囲内かな。
• オフラインでも動くアプリにすれば妥協できるかな……？

文章校正サイトを作ってみました

校正さん

文章校正ができる Web サイトを作ってみました！
辞書データや校正プログラムも含めて全て Web ブラウザ上で動かしています。
PWA に対応させたので、スマホからだとネイティブアプリっぽく使えると思います。