2. Fastly の使用を開始
最終更新日 2022-08-30
このページは、Fastly の CDN の説明の一部であり、Fastly の CDN の使用方法および Web サイトの例とドメイン名を示して段階的に説明するチュートリアルです。このチュートリアルでは、静的サイト生成ツールの Jekyll、Amazon AWS、Fastly CDN を使用して静的 Web サイトをキャッシュ・配信する手順をご紹介します。詳細については、紹介をご覧ください。
Fastly アカウントを作成し、Fastly コントロールパネルにログインしていきます。無料トライアルに登録できます。クレジットカード情報は必要ありません。登録してアカウントを認証すると、以下の画面が表示されます。
注意
Fastly アカウントを作成して設定を追加しても、本番環境の Web サイトに関連するものは何も変更されません。トラフィックは、DNS レコードを更新するまでに、S3 バケットに流れ続けます。
サービス名の変更
Fastly は、アカウントに登録した際に、サービスを作成しました上のスクリーンショットで サービス設定を確認します。Fastly アカウントに複数のサービスが存在します。どれも異なる Web サイトまたはアプリケーションに対応することができます。サービス設定では、ドメイン名、オリジン、ヘッダー、キャッシュ設定など、Fastly サービスに関するあらゆる設定を行うことができます。
OptionsメニューからEdit service nameを選択して、サービス名を変更していきます。下記に示すように、Taco Labs
などの覚えやすい名前をサービス名に使用します。
現在、設定されているサービスは1つのみですが、今後さらに追加することがあるかもしれません。サービスに分かりやすい名前をつけることで、すべてのサービスが表示されるコントロールパネルのホームページで他のサービスと見分けがつきやすくなります。
ドメインの追加
これで、サービス設定にドメインを追加する準備ができました。ドメインにはユーザーがアクセスするパブリック URL を設定します。これを設定することで、Fastly は、サービスへのトラフィックがどこから発生するかを把握することができます。以下のように、ドメインフィールドにwww.tacolabs.com
を入力し、Addをクリックしてサービス設定にドメインを保存します。
注意
すでにドメインを追加しているため、お客様はサービス内のドメインとして www.tacolabs.com
を追加することはできません。Fastly では、複数のサービスで同じドメインを使用することはできません。
オリジンホスト名の追加
次に、サービス設定にオリジンのホスト名を追加し、Fastly がコンテンツをどこからプルするかを把握できるようにします。サイドバーのHostsリンクをクリックし、以下のように S3 でホストされた静的 Web サイトのパブリック URL (www.tacolabs.com.s3-website.us-east-2.amazonaws.com
) を入力します。
ヒント
オリジンのホスト名を探すには、少し時間がかかります。AWS や Google Cloud Platform などのクラウドサービスを使用している場合、管理コンソールでホスト名を確認することができますが、常にそうできるとは限りません。ここでは、AWS が提供する S3 の静的 Web サイトホスティング機能www.tacolabs.com.s3-website.us-east-2.amazonaws.com
を使用しているため、オリジンのホスト名は、S3 でホストされた Web サイトのパブリック URL () になります。静的 Web サイトのホスティング機能を使用せずに S3 バケットを使用している場合、オリジンのホスト名は Amazon S3 統合ガイドwww.tacolabs.com.s3.us-east-2.amazonaws.com
に記載されている形式に従います ()。また、オリジンサーバーである場合、オリジンホスト名は、IP アドレスとなる可能性が高いです。
オリジン接続の TLS を無効化する
TLS で保護できる接続には、オリジンと Fastly 間の接続、および Fastly とユーザー間の接続の2つがあります。以下の図で2つの接続の違いを確認できます。
Fastly は、Web コントロールパネルをホスト名に入力した場合、オリジンと Fastly の間で TLS を自動的に有効化します。(IP アドレスを入力すると、TLS は自動的に無効化されます。)S3 の静的ホスト機能は TTLS をサポートしていないため、S3 バケットと Fastly の間で TLS を無効化するオリジン設定を調整する必要があります。Fastly とユーザー間の TLS は後で設定します。
ヒント
接続を暗号化すると、よいでしょう!実際の状況では、Fastly とオリジンの接続を可能な限り暗号化してください。オリジンによっては、Let's Encrypt が発行する無料証明書をインストールできる場合があります。
下に示しているように、オリジン設定を編集ペンシルアイコンをクリックし、No, do not enable TLSを選択してください。次に、アップデートボタンをクリックして設定を保存します。これですべて完了です!
サービスのバージョン管理
サービス設定の有効化の準備ができましたが、その前に、Fastly がどのようにしてサービス設定の変更を管理するかについて説明します。これは、多くの新規ユーザーが混乱する問題であり、先へ進める前に、ここで仕組みを説明します。
Fastly のバージョンサービス設定。これは Fastly サービス設定にコントロールパネルを適用するようなものです。このチュートリアルではこれまで、ドラフトサービス設定を使って作業してきました。ドラフトサービス設定を有効にすると、Fastly は設定を本番環境にプッシュし、サービス設定をロックします。変更を行う場合、アクティブなバージョンを複製し、新しいバージョンを編集する必要があります。
上の図が示すように、サービス設定の各バージョンにはバージョン番号が割り当てられています。以前のサービス設定とアクティブな設定は編集することはできませんが、前のバージョンを複製して新しいバージョンで変更することは可能です。コントロールパネルを使用して、バージョンにコメントを追加し、2つの異なるバージョンの違いを表示することができます。また、以前のサーバー設定のバージョンにロールバックすることができます。サービスと仕組みについての詳細を知るには、サービスを設定するのドキュメントをご覧ください。
サービス設定の有効化
サービス設定を有効化しましょう。そうすることで、Fastly がどのように Web サイトをキャッシュし、配信するか確認できます。以下のように、画面の右上にあるActivateボタンをクリックします。これは、どの本番環境の Web サイトにも影響しません。DNS レコードはまだ変更されていません。
Fastly は、サービス設定をロックし、設定を本番環境にプッシュします。
Web サイトの確認
Fastly がサービス設定の変更を伝播するのに、数分かかる場合があります。変更が有効になると、Fastly がどのように Web サイトをキャッシュし、配信するかをプレビューすることができます。Fastly はすべてのサービスにテストドメイン名を提供します。以下のように、ドメインページにテストドメインへのリンクが表示されます。
Web ブラウザでリンクをクリックして開きます。表示されました!http://www.tacolabs.com.global.prod.fastly.net/
にウェブサイトがあります。Fastly は S3 の静的サイトから Web サイトをプルして POP サーバーにキャッシュし、テストドメインを介して配信しました。
キャッシュ状態の確認
この初期段階で、Fastly がどのように Web サイトを配信しているかを確認するため、キャッシュをチェックして、HTTP ヘッダーを確認することをお勧めします。そのためには、2つの方法があります。コントロールパネルを使用して、オブジェクトのキャッシュ状態をチェックするか、または curl と呼ばれるコマンドラインユーティリティを使用することもできます。
まず、コマンドラインインターフェースを使用していきます。通常 curl は Unix と Linux ベースのシステムにデフォルトでインストールされています。端末アプリケーションを開き、次のコマンドを入力します:
$ curl -svo /dev/null -H "Fastly-Debug:1" http://www.tacolabs.com.global.prod.fastly.net
出力で以下のように表示されます:
1< Age: 5855512< X-Served-By: cache-sna10742-LGB3< X-Cache: HIT4< X-Cache-Hits: 1
X-Cache: HIT
は、オブジェクトが Fastly のキャッシュにあることを意味しています。(Web サイトにアクセスする前にコマンドを実行すると、X-Cache: MISS
が確認できます。これは、Web サイトがまだ Fastly のキャッシュにないことを意味します。)キャッシュ内に現在のオブジェクトの時代と、コンピュータにコンテンツを提供するキャッシュノードも表示されます。
ヒント
鋭い読者は、curl コマンドにヘッダーが追加されたことに気付くかと思います。Fastly-Debug
ヘッダーは Fastly 独自のものです。ヘッダーが存在すると、Fastly のキャッシュサーバーが追加のレスポンスヘッダーを出力するよう指示します。
このチュートリアル全体で、キャッシュの確認とヘッダーの検証を続けていきます。詳細に興味をお持ちの方は、キャッシュ状態の確認に関するガイドまたは HTTP ヘッダー参照ドキュメントをご覧ください。
無料 TLS でサイトを保護する
プレビューサイトの URL は、S3 の静的サイトの URL のように、TLS で保護されていません。Fastly の無料 TLS オプションを使用することで、修正できます。これにより、サービスに別のプレビュー URL を付与することができます。デフォルトで TLS を使用するように設計されたものです。
新しい TLS ドメインを追加する前に、サービス設定のアクティブなバージョンを複製する必要があります。Cloneをクリックして新しいドラフトバージョンを作成します。次に、以下のようにドメインページでCreate Domainボタンをクリックして新しいドメインを追加します。Fastly の共有 TLS ドメイン (<name>.global.ssl.fastly.net
) を使用し、最初にtacolabs
を入力します。URL はtacolabs.global.ssl.fastly.net
になります。
ヒント
独自ドメイン名でこの手順に従っている場合、固有でドット区切りの名前でない限り、tacolabs
にはどんな単語でも代入できます (例 : www.example.org.global.ssl.fastly.net
は機能しません)。
Addボタンをクリックしてドメインを追加しましょう。次に、Activateボタンをクリックして、サーバー設定の新しいバージョンを有効化します。Fastly が変更をデプロイし、https://tacolabs.global.ssl.fastly.net で Web サイトを確認できるようになります。これで接続が暗号化されます。いかがですか?
オリジンにホストヘッダーをオーバーライドする
有効化されたサービス設定のバージョンには、多少問題があることが分かりました。https://tacolabs.global.ssl.fastly.net にアクセスすると、以下のページが表示されます。何が問題なのでしょうか?
HTTP ヘッダーについては、先ほど簡単にご説明しました。今度は、Amazon がリクエストを正しくルーティングできるよう、ヘッダーを設定する必要があります。この場合、オリジンレベルでオーバーライドするホストヘッダーを設定することで、オーバーライドホストを指定できます。Amazon は、Fastly が送信するものとは別のホストヘッダーを期待するため、これを行う必要があります。
Edit configurationボタンをクリックして、サーバーを複製し、新しいドラフトバージョンを作成しましょう。次に、オリジンページでペンシルアイコンをクリックして、オリジン設定を編集します。詳細オプションセクションのすぐ上で、Override hostフィールドに以下のようにオリジンのホスト名 (www.tacolabs.com.s3-website.us-east-2.amazonaws.com
) を入力し、Updateボタンをクリックします。
Activateボタンをクリックして、サービス設定の新しいバージョンを有効化します。Fastly が変更をデプロイします。これには数分かかることがあります。その後、https://tacolabs.global.ssl.fastly.net から Web サイトを確認することができます。