【Linuxコマンドでウェブサイト運営術】Alpine LinuxでGzip/Brotliを試す


※ 当ページには【広告/PR】を含む場合があります。
2021/01/21
【SEOのGoogleアナリティクス(GA4)対応】シンプルなJavascript/HtmlのスクリプトでGoogleタグ(gtag.js)からイベントトラッキングを操作する
[AWS x SEO対応] S3 & CloudFrontで静的ホスティングしたウェブサイトのドメイン移管 ~ 301リダイレクトを仕込む

今回はAlpineLinuxでのBrotli圧縮形式でのちょっとしたテクニックとAWS S3バケットへのアップロードをするやり方を解説してみようと思います。


合同会社タコスキングダム|蛸壺の技術ブログ【効果的学習法レポート】シェルスクリプトをこれから学びたい人のためのオススメ書籍&教材特集

無圧縮ではレスポンスが重すぎる

SPA・PWAをサーバー側から供給するわけですが、少しでも軽量なサイズにしたいということを考えます。

現在ではgzipは元より全てのブラウザに対応していますし、brotli形式でもほぼ全てのブラウザで展開できる状況になっています。

合同会社タコスキングダム|蛸壺の技術ブログ

参考先:
Can I use...

昨今のSPAでもHTML5ゲームなど100MB近くの容量のリソースファイルをオンデマンドで取り扱うケースもないわけではないので、無圧縮では対応できないシーンも出てしまします。

また他のモチベーションとしては、静的ホスティングしたウェブサイトにアクセスする際のリソース転送量の低減によるコストカット効果も見込まれます。

AWS S3料金計算を利用させていただき、ざっくりと料金を考えると、仮に20MBのファイルで月間10万回アクセスで計算すると月の総転送量が1953GBにもなりおよそ23,000円という料金が発生してしまいます。

これが転送料半分の
10MBのファイルで月間10万回アクセスで半額の11,500円...というふうに月間の運営料金を節約できるため、リソースの圧縮はウェブサイト作成において、とても重要なことなのです。

さて以下では、高圧縮率を誇る
Brotliコマンドを利用したファイル圧縮をalpineでやってみます。


合同会社タコスキングダム|蛸壺の技術ブログ【効果的学習法レポート】シェルスクリプトをこれから学びたい人のためのオススメ書籍&教材特集

Brotliの使い方

AlpinelinuxへのGzip・Brotliの導入方法と、ちょっとした応用を以降で解説していきます。

BrotliとGzipを簡単な使い方

まずはalpineの環境に
brotliが使えるようにします。

            
            $ apk update && apk upgrade && apk add --no-cache brotli
$ brotli --version
brotli 1.0.7
        
なおgzipのほうはBusyboxに集録されているものが利用できます。

            
            $ gzip --version
gzip: unrecognized option: version
BusyBox v1.31.1 () multi-call binary.
        
たとえばSPAのアプリをdistフォルダに吐き出した後、サイズの確認をしてみると、

            
            $ ls -lh dist/
total 17M
12.2K extension-worker.js
33.7K favicon.ico
 1.5K fcec474a1ea82bfe2add.worker.js
  869 index.html
16.7M main.js
  869 player.html
        
となっています。

今回は特に一纏めにバンドルしたメインのjsファイルの容量が大きいようです。

で、そこからこの
main.jsを試しに何通りかのcompression levelで圧縮してみます。

            
            $ ls -lh
16.7M main.js
#👇best compression level (=11)
$ brotli -v -n -k -q 11 main.js
5.1M main.js.br
#👇high compression level (=9)
$ brotli -v -n -k -q 9 main.js
5.7M main.js.br
#👇moderate compression level (=5)
$ brotli -v -n -k -q 5 main.js
6.3M main.js.br
#👇lowest compression level (=0)
$ brotli -v -n -k -q 0 main.js
7.7M main.js.br
        
圧縮レベルを11くらいにすると三分の一になっています。また圧縮レベルゼロでも圧縮しないわけでは無さそうです。

比較としてgzipのほうも試してみます。

            
            #👇best compression level (=9)
$ gzip -k9 main.js
6.6M main.js.gz
#👇moderate compression level (=5)
$ gzip -k5 main.js
6.9M main.js.gz
#👇lowest compression level (=1)
$ gzip -k1 main.js
7.1M main.js.gz
        
結果はbrotliの方がベスト圧縮設定のときと比較して1.5MBほども小さくできるようで、これは予想どおりです。


合同会社タコスキングダム|蛸壺の技術ブログ【効果的学習法レポート】シェルスクリプトをこれから学びたい人のためのオススメ書籍&教材特集

AWS S3から配信する

ただファイルを圧縮しただけでは物足りないので、AWS S3バケット上にアップロードして利用できるかを試してみます。

まずbrotliで圧縮したファイルをS3バケットにアップロードして、そのファイルの
プロパティからメタデータを編集します。

合同会社タコスキングダム|蛸壺の技術ブログ

メタデータに以下のように
Content-Encodingbrを指定すると完了です。

合同会社タコスキングダム|蛸壺の技術ブログ

ブラウザのデバッグコンソールからアクセス時のレスポンスヘッダーを確認すると、ちゃんと
brを圧縮形式として正しく読み込んでいることが分かります。

合同会社タコスキングダム|蛸壺の技術ブログ

AWS CLIでのアップロード対応

先程はAWS S3のダッシュボードコンソールから手動でContent-Encodingを切り替えましたが、アップロードするリソースファイルが大量にあるととても手で変更なんかしてられません。

たとえばaws s3のコマンドには
--content-encodingオプションが指定できるようになっているので、

            
            $ aws s3 sync [アップロードするローカルのフォルダパス] s3://[アップロード先のS3バケットのパス]/ \
    --exclude '*' --include 'index.html' --include '*.js' --include '*.css'\
    --content-encoding='br' --delete
        
などとすると、アップロードする全てのファイルに圧縮形式が付与されるようになります。


合同会社タコスキングダム|蛸壺の技術ブログ【効果的学習法レポート】シェルスクリプトをこれから学びたい人のためのオススメ書籍&教材特集

まとめ

今回はサーバー側で使うリソースの圧縮形式のお話を中心に解説しました。

より圧縮率の高いBrotliを利用することで、よりSEO効果の高いウェブサイト制作が捗るものと思います。
記事を書いた人

記事の担当:taconocat

ナンデモ系エンジニア

主にAngularでフロントエンド開発することが多いです。 開発環境はLinuxメインで進めているので、シェルコマンドも多用しております。 コツコツとプログラミングするのが好きな人間です。

合同会社タコスキングダム|蛸壺の技術ブログ【効果的学習法レポート】シェルスクリプトをこれから学びたい人のためのオススメ書籍&教材特集