【AWS】 CloudFrontでgzipに圧縮し、確認する方法
はじめに
この記事ではCloudFrontでgzipに圧縮する前にAmazon S3でバケットを作成し、ファイルをアップロードしていることを前提条件として進めていきます。Amazon S3にファイルをアップロードしていない場合はアップロードを先に終えてからご覧ください。また、アップロードの際はパブリックアクセスを許可するようにしてください。
CloudFrontでディストリビューションを作成
AWSにログインし、CloudFrontのコンソールを開けましょう。「Amazon CloudFront Getting Started」が表示されたら、「Create Distribution」をクリックします。
以下の画面が表示されたら、「Web」のほうの「Get Started」を押します。ちなみに「RTMP」とは音声や動画などのデータを扱うストリーミングのプロトコルになります。こちらは2020年の12月いっぱいでサポートが終了するためご利用の際はご注意ください。
「Create Distribution」の「Origin Domain Name」でAmazon S3で作成したバケットを選択してください。自動で表示されるので入力の必要はありません。
「Default Cache Behavior Settings」で以下のように設定していきます。「Compress Objects Automatically」を「Yes」にするとgzipに自動で圧縮されるようになります。ここでは説明のため「No」の状態で進めていきます。
「Distribution Settings」で以下の設定でチェックしていきます。SSL証明やHTTPのバージョン、IPv6などのチェック項目に注意し、右下の「Create Distribution」をクリックします。
すると、Distributionが作成されますが、「States」が進行中を表す「In Progress」と表示されているはずなので、「Deployed」になるまでしばらく待ちます。20分程度かかる可能性があるので待ちましょう。「Status」が「Deployed」になったらOKです。
CloudFrontでgzipに圧縮する
Distributionを作成中にgzipに圧縮していない場合や、すでに登録済みのファイルをあとからgzipに圧縮したい場合は編集画面から設定していきましょう。
DistributionのIDをクリックし、「Behaviors」タブを開けます。gzipに圧縮する該当ファイルにチェックを入れ、「Edit」をクリックします。
すると「Edit Behavior」の画面に遷移するので「Compress Objects Automatically」のチェック項目を「Yes」に変更し「Edit」を押せば完了です。
CloudFrontでgzipに圧縮できるファイル
CloudFrontでgzipに圧縮できるファイルは以下になります。Content-Typeヘッダーに次の値があるか確認をしてください。
- application/dash+xml
- application/eot
- application/font
- application/font-sfnt
- application/javascript
- application/json
- application/opentype
- application/otf
- application/pkcs7-mime
- application/rss+xml
- application/truetype
- application/ttf
- application/vnd.apple.mpegurl
- application/vnd.ms-fontobject
- application/xhtml+xml
- application/xml
- application/x-font-opentype
- application/x-font-truetype
- application/x-font-ttf
- application/x-httpd-cgi
- application/x-javascript
- application/x-mpegurl
- application/x-opentype
- application/x-otf
- application/x-perl
- application/x-ttf
- font/eot
- font/opentype
- font/otf
- font/ttf
- image/svg+xml
- text/css
- text/csv
- text/html
- text/javascript
- text/js
- text/plain
- text/richtext
- text/tab-separated-values
- text/xml
- text/x-component
- text/x-java-source
- text/x-script
- vnd.apple.mpegurl
gzipで圧縮配信されているか確認する
CloudFrontでファイルをgzipに圧縮されたか確認するには、Chromeのデベロッパーツールを利用します。「F12」ボタンを押すか、「︙」→「その他のツール」→「デベロッパーツール」で開き、CloudFrontから配信されているファイルの「Network」→「Headers」→「Response Headers」の中に「content-encording: gzip」とあればgzipで圧縮されて配信されていることが確認できます。
おわりに
圧縮して配信することでWebページのサイト表示スピードが早くなり、結果的にSEO効果がUPし上位に表示されやすくなるというメリットがあります。無料で手軽にできるのでCloudFrontを利用したことがない方はぜひ使ってみてください。