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

FastlyTech

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

手順

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

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

なお、独自ドメインのまま fastly で TLS に対応する場合は有料オプションが必要です。Fastly 側で証明書の設定が必要となるため費用が発生します。

サイト構成

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

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

fastly のアカウント作成

Sign up ページ からアカウントを作成します。
個人利用のため、Company 欄には、Individual と入力しました。(合っているのか不安)

Fastly初期登録

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

ログイン画面 から、作成したアカウントでログインします。
以下のような説明画面が表示されますが、右上の × で一旦閉じておきます。

Fastly登録直後の画面

配信サイトの新規登録

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

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

Fastly配信サイト設定

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

Fastly オプション設定

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

Fastly gzip設定

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

Fastly gzip設定完了後

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

Fastly サイト登録完了画面

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

Free TLS の設定を追加

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

Fastly Free TLS設定

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

Fastly 設定バージョンの新規作成

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

Fastly ドメイン名の追加

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

Fastly 新バージョン設定の反映

ブラウザから動作確認

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

Fastly 無料TLSの動作確認

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

Fastly 無料でHTTP2に対応HTTP2 対応状況の確認

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

Fastly アクセス状況のモニタリング画面

参考資料

FastlyTech