AWSのCloudFrontからコンテンツをHTTP2 & gzipで高速に配信する
こんにちは、高橋です。
みなさん快適で楽しいAWSライフを送れていますか？
実は2ヶ月ほど前、AWSからCloudFrontでHTTP2によるコンテンツの配信ができるようになったので早速導入して見ました。
Amazon CloudFront now supports HTTP/2
S3のバケットにあるCSSやJS、画像などのアセットをCloudFrontから配信するというパターンは AWSでインフラを構築するサービスではよくあると思います。
今回はこういったS3上にあるアセットをHTTP2とgzipを使用してCloudFrontから配信するための設定方法などを見ていきたいと思います。
設定そのものは3分くらいで終わります。
CloudFrontにHTTP2を適用する
先ずはAWSのコンソールを開き、CloudFrontを選択します。
リンクまたはチェックボックスを押して「Distribution Settings」からディストリビューションの設定画面に飛びます。
「General」タブの「Edit」ボタンから基本設定の変更ページへ飛びます。
「Supported HTTP Versions」をHTTP2が含まれているものを選択して、右下の「Yes, Edit」ボタンを押します。
ちなみに「Supported HTTP Versions」の右にある黒いボタンを押すと、下記のような説明が出てきます。
For viewer requests, choose the versions of the HTTP protocol that you want CloudFront to accept. In general, HTTP/2 is faster. CloudFront always forwards requests to the origin using HTTP/1.1.
日本語にすると
ユーザーからCloudFrontへのリクエストの際に使用するHTTPプロトコルを選択してください。一般的にHTTP2は速いっすよ。CloudFrontからオリジンへのリクエストはHTTP 1.1だけ使うでー。
といった感じでしょうか。
ユーザーからのリクエストはHTTP2を使用できますが、CloudFront内部でのリクエストではHTTP2はまだ未対応のようです。
とはいえ、ひとまずこれで設定完了です！楽勝ですね！
あとは設定が完了するまで時間を潰して、 設定が完了したらブラウザから確認できればOK！
Chromeなどのブラウザのデベロッパーツールから見てみると.....
レスポンスは304になっていますが、「Protocol」のところが「h2」になっていれば設定完了です！
CloudFrontでgzip圧縮による配信をする
では次にファイルをgzip圧縮して配信する設定を見ていきましょう。
先ほどのディストリビューションの設定画面に飛びます。
今回は「Behaviors」タブを選択して、gzip配信にしたいものにチェックボックスを入れて「Edit」を押します。
下にスクロールしていくと、一番下に「Compress Objects Automatically」という設定項目があるので、「Yes」を選択してから右下の「Yes, Edit」を押して設定完了！
ちなみに「Compress Objects Automatically」の右にある黒いボタンを押すと、下記のような説明が出てきます。
Select whether you want CloudFront to automatically compress content for web requests that include Accept-Encoding: gzip in the request header. CloudFront compresses files of certain types for both Amazon S3 and custom origins.
日本語にすると
わいに頼んでくれたらリクエストヘッダにAccept-Encoding: gzipがあった時はCloudFrontの方でコンテンツの圧縮しとくで。S3とか別のオリジンのファイルでも圧縮できそうなら、わいが勝手にしとくやでー。
といった感じでしょうか。
圧縮倍率はCloudFrontの方でよしなに決めてくれるようです。
ということで設定が終わったのでブラウザから確認して見ましょう！
先ほどと同様にChromeなどでデベロッパーツールを開き、CloudFrontから配信されているファイルのレスポンスヘッダを確認します。
「content-encoding: gzip」となっていますね！
これでCloudFrontにHTTP2とgzip配信の設定が完了しました！
手軽にできてすぐに効果が期待できるので、気になった方は試して見てください！
We're hiring!
Cluexではビジネスサイド、エンジニアサイド共にメンバーを募集しています！ お気軽にご連絡下さい！
