【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を利用したことがない方はぜひ使ってみてください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

前の記事

CloudfFormationについて

次の記事

AWS VPCの料金について