Fastly の無料プランでサイトを HTTP2 / TLS に対応させる

概要

CDN サービスの Fastly では、開発者向けに $50 分の無料トライアルが提供されています。
今回はそのプランを利用して、Webサイトを HTTP2 と TLS (HTTPS) に対応させてみました。


手順

1. fastly のアカウント作成
2. 配信サイトの新規登録
3. Free TLS の設定を追加
4. ブラウザから動作確認


注意点
今回の手順では、以下のような fastly ドメインが新たに作成されます。
例: <任意名>.freetls.fastly.net

なお、独自ドメインのまま fastly で TLS に対応する場合は有料オプションが必要です。証明書の関係もありますからね。


サイト構成

今回 HTTP2 対応させるのは以下のサイトです。話題のマストドンの自分用インスタンスです。

なお、登録する元サイトは HTTPS 非対応でも問題ありません。(恐らく…… ※未確認)


fastly のアカウント作成

Sign up ページ からアカウントを作成します。

個人利用のため、Company 欄には、Individual と入力しました。(合っているのか不安)

f:id:yuu2634:20170514220614p:plain

確認メールが来ますので、メール内のリンクにアクセスすると作成が完了します。


ログイン画面 から、作成したアカウントでログインします。

以下のような説明画面が表示されますが、右上の × で一旦閉じておきます。

f:id:yuu2634:20170514221323p:plain


配信サイトの新規登録

以下の画面から、CDN で配信したいサイトの URL を登録します。

左欄にはドメイン名、右欄には IP アドレス・ポート番号を入力し、CONTINUE をクリックします。
HTTPS 対応サイトの場合は 443、非対応の場合は 80になると思います。

f:id:yuu2634:20170514233733p:plain


オプションの選択画面が表示されます。
コンテンツ圧縮のため、gzip を有効にしてみます。ENABLE GZIP をクリックします。

f:id:yuu2634:20170514222956p:plain


gzip の設定画面では特に変更せず、ENABLE をクリックします。

f:id:yuu2634:20170514223155p:plain


gzip が有効になりました。CONTINUE をクリックします。

f:id:yuu2634:20170514223400p:plain


以下の画面が表示されれば登録完了です。EXPLORE をクリックします。

f:id:yuu2634:20170514224024p:plain

この段階で既に fastly 経由のアクセスは可能となっていますが、引き続き HTTP2 / TLS の設定を行います。


Free TLS の設定を追加

管理画面 から CONFIGURATIONClone active をクリックします。

f:id:yuu2634:20170514234402p:plain


現在の設定がコピーされて Version 2 の編集画面になりました。
DOMAINS 内の CREATE DOMAIN をクリックします。 f:id:yuu2634:20170514234530p:plain


Domain Name 欄に <任意名>.global.ssl.fastly.net を入力します。
既に使われているドメイン名の場合はエラーとなります。 f:id:yuu2634:20170514234644p:plain


ドメインが追加されました。設定を有効にするため、ACTIVATE をクリックします。
設定が反映されるまで数分待ちます。 f:id:yuu2634:20170514235443p:plain


ブラウザから動作確認

HTTP2 でアクセスする場合は、作成した <任意名>.global.ssl.fastly.net ではなく <任意名>.freetls.fastly.net を使用します。

f:id:yuu2634:20170515000059p:plain


HTTP/2 and SPDY indicator (Chrome用 / Firefox用) を使用すると、画面右上の稲妻マークで HTTP2 対応の確認ができます。

f:id:yuu2634:20170515001857p:plain f:id:yuu2634:20170515001901p:plain


fastly の管理画面からは、アクセス状況がリアルタイムで確認できます。

f:id:yuu2634:20170515001106p:plain


参考資料