5. 公開する

5 of 7

このページは、Fastly の CDN の説明の一部であり、Fastly の CDN の使用方法および Web サイトの例とドメイン名を示して段階的に説明するチュートリアルです。このチュートリアルでは、静的サイト生成ツールの Jekyll、Amazon AWS、Fastly CDN を使用して静的Webサイトをキャッシュ・配信する手順をご紹介します。詳細については、こちらをご覧ください。

Taco Labs の Web サイト用に Fastly サービスを準備するため、多くの作業をしてきました。ここでは、公開に向けた最終的な作業を行い、本番環境 Web サイトで Fastly を使い始めましょう。

TLS 証明書を生成する

言うまでもなく、事実上、今日のすべての Web サイトと Web アプリケーションにとって、暗号化は難しい要件です。Taco Labs は、ユーザー認証などの Web アプリケーションによくあるインタラクティブ機能を欠いている静的 Web サイトです。それでも、TLS は使用した方がよいでしょう。使用しなかった場合、検索エンジンと Web ブラウザからペナルティが科されるからです。

これまで、Fastly の共有ドメインで TLS を使用して、Fastly とクライアントの Web ブラウザ間のトラフィックを保護してきました。顧客に公開しないのであれば、このURL (https://tacolabs.global.ssl.fastly.net) を引き続き使用し続けることができます。例えば、iOS アプリケーション内でアセットを提供するために Fastly を使用するのであれば、このまま Fastly の共有ドメインで TLS を使用し続けることができるでしょう。しかしながら、tacolabs.com などのカスタムドメインに使用することはできません。訪問者に証明書エラーが表示されるからです。

カスタムドメインに TLS が必要になるため、Fastly マネージド証明書を使用することができます。トライアルアカウントには、Fastly の認証機関である Certainly と、無料の Let's Encrypt 認証機関を使用するドメイン用に、2つの Fastly マネージド証明書が含まれています。また、有料アカウントでは、商用認証機関である GlobalSign を使用したり、独自の証明書をアップロードして管理することもできます。

画面の上部にある Secure をクリックし、次に TLS management をクリックします。次に、Get started をクリックします。以下のウィンドウが表示されます。

Fastly TLS を有効にする

フォームに入力して、ドメインを追加し、Submit ボタンをクリックすると、以下のように、CNAME レコードを追加するように促すメッセージが表示されます。Fastly は、この情報を使用して、tacolabs.comドメイン名を所有していることを確認します。

Fastly TLSの検証

CNAMEレコードを追加するには、AWS Route 53に戻ります。これで、DNSサービスを処理します。DNSレコードが伝播するのに、数分かかります。Fastly が DNS レコードを検出して検証すると、以下のように、TLS が www.tacolabs.com に対して有効になります。

Fastly TLS を有効化する

DNS レコードを更新する

ドメインの TLS を有効化したので、いよいよ最終ステップです。ドメインの DNS レコードを更新して Fastly を指すようにしましょう。これを行うと、本番トラフィックが Fastly を介して流れ始めます。すべてが適切であることを確認するために、再度設定を確認することをお勧めします。

最初に行うべきことは、Web サイトや Web アプリケーションの既存の DNS レコードを把握することです。Taco LabsはWeb サイトです。最初は、DNSレコードがありませんでした。しかし、実際のシナリオでは、おそらく、すでに DNS レコードのある既存の Web サイトで作業することになるでしょう。Fastly に新しい CNAME レコードを追加する前に、ドメインの既存の DNS レコードを削除する必要があります。

以下のように、TLS ドメインページの See DNS details ボタンをクリックすることで、ドメインの CNAME レコードの値を確認することができます。この値は、IPv6 アドレスをサポートしていませんが、IPv6 を有効化するように準備するdualstackことができます

Fastly TLS CNAME

この場合、Fastly コントロールパネルでは、CNAME レコードの値はj.sni.global.fastly.netですが、IPv6 を有効化する値としてdualstack.j.sni.global.fastly.netを使用します。AWS Route 53 に CNAME レコードを追加しましょう。入力は以下のようになります。

AWS Route 53 で CNAME レコードを作成する

DNS レコードは、伝播するのに少し時間がかかりますが、以下のコマンドを使用して、ステータスを確認することができます:

$ dig www.tacolabs.com +short
dualstack.j.sni.global.fastly.net.
151.101.198.132

これで、すべて設定できました!

apex ドメインを www にリダイレクトする

apex ドメインhttp://tacolabs.comに対応する必要があります: Fastly には、www.tacolabs.comが使用されていますが、wwwなしでドメインを入力したらどうなるでしょうか?リダイレクトを追加し、http://tacolabs.com と入力しても自動的に http://www.tacolabs.com にリダイレクトされるようにする必要があります。

まず、Fastly サービスにドメインとして tacolabs.com を追加する必要があります。Edit configuration ボタンをクリックして、サーバーを複製し、新しいドラフトバージョンを作成しましょう。次に、Domains ページで Create domain をクリックします。Domain フィールドで、tacolabs.com と入力し、次に Add をクリックします。

これで、apex ドメインへのリダイレクトを追加することができます。Settings ページにある Redirect traffic to www subdomains セクションで、Add apex redirect リンクをクリックします。以下のように、Domain メニューから tacolabs.com を選択し、Status メニューから 301 を選択して 301 リダイレクトを使用するようにします。最後に、Save をクリックし、次に Activate をクリックして、サービス設定の新しいバージョンを有効化します。

Fastly コントロールパネルで apex リダイレクトを有効化する

Fastly サービスがリダイレクトを処理するように設定されています。ここで、tacolabs.comに DNS レコードを追加する必要があります。TLS ページに、DNS A レコードの anycast IP アドレスを表示するセクションがあったのを思い出してください。以下のように、この anycast IP addresses を使用して、tacolabs.com 用に Route 53 で新しいDNS A レコードを作成することができます。

AWS Route 53にapex DNSレコードを追加する

DNS レコードが反映された後、curl を使用して、リダイレクトが機能しているかどうかをテストすることができます。以下のように、tacolabs.comwww.tacolabs.com にリダイレクトされます。

$ curl -sLD - http://tacolabs.com -o /dev/null -w '%{url_effective}'
HTTP/1.1 301 Moved Permanently
Server: Varnish
Retry-After: 0
cache-control: max-age=86400
Location: http://www.tacolabs.com/
Content-Length: 0
Accept-Ranges: bytes
Date: Mon, 18 Oct 2021 19:25:46 GMT
Via: 1.1 varnish
Connection: close
X-Served-By: cache-den8264-DEN
X-Cache: HIT
X-Cache-Hits: 0
X-Timer: S1634585146.929981,VS0,VE79
HTTP/1.1 200 OK
x-amz-id-2: NXLv0EZjIymQiCtAvpbeUyXlfiKjvMBbpSOqz84U5JNOfm5ysn1c43hvahA6oKH1/t+uiJS2Xrw=
x-amz-request-id: T6JEN0EXBQFXVRCF
cache-control: no-store, max-age=0
Last-Modified: Fri, 23 Jul 2021 21:54:38 GMT
ETag: "dcf9e4efa41b023a4280c8305070a1cf"
Content-Type: text/html
Server: AmazonS3
Via: 1.1 varnish, 1.1 varnish
Content-Length: 4469
Accept-Ranges: bytes
Date: Mon, 18 Oct 2021 19:25:46 GMT
Age: 0
Connection: keep-alive
X-Served-By: cache-mdw17341-MDW, cache-phx12427-PHX
X-Cache: MISS, MISS
X-Cache-Hits: 0, 0
X-Timer: S1634585146.116375,VS0,VE94
Vary: Accept-Encoding

HSTS を有効化して TLS を強制する

これまでで、ほとんどが完了しましたが、現在の状態において、まだ機能していないものがあります。訪問者は、暗号化されていないwww.tacolabs.comのバージョンにアクセスすることができます。訪問者に、https://www.tacolabs.comでサイトの暗号化されたバージョンを強制する必要があります。

このためには、TLS を強制し、HTTP Strict Transport Security (HSTS) を有効にします。Edit configuration ボタンをクリックして、サーバーを複製し、新しいドラフトバージョンを作成しましょう。Settings ページで、以下のように、Force TLS and enable HSTS スイッチをクリックして ON の位置にします。少なくとも初めは、HSTS 期間をテストの間隔に設定することをお勧めします。

Taco Labs に TLS を強制する

Activate をクリックして、サービス設定の新しいバージョンを有効化します。これで、リダイレクトを確認することができます。今回、以下の curl コマンドの出力は、http://tacolabs.comhttps://www.tacolabs.com にリダイレクトされていることを示しています。

$ curl -sLD - http://tacolabs.com -o /dev/null -w '%{url_effective}'
HTTP/1.1 301 Moved Permanently
Server: Varnish
Retry-After: 0
cache-control: no-store, max-age=0
Location: http://www.tacolabs.com/
Content-Length: 0
Accept-Ranges: bytes
Date: Mon, 18 Oct 2021 20:38:35 GMT
Via: 1.1 varnish
Connection: close
X-Served-By: cache-bur17572-BUR
X-Cache: HIT
X-Cache-Hits: 0
X-Timer: S1634589516.510082,VS0,VE58
Strict-Transport-Security: max-age=300
HTTP/1.1 301 Moved Permanently
Server: Varnish
Retry-After: 0
Location: https://www.tacolabs.com/
Content-Length: 0
Accept-Ranges: bytes
Date: Mon, 18 Oct 2021 20:38:35 GMT
Via: 1.1 varnish
Connection: close
X-Served-By: cache-phx12424-PHX
X-Cache: HIT
X-Cache-Hits: 0
X-Timer: S1634589516.811935,VS0,VE1
Strict-Transport-Security: max-age=300
https://www.tacolabs.com/

対応しなければならない別の問題があります。HTT リダイレクト (https://tacolabs.com から https://www.tacolabs.com へ) で、証明書の不一致エラーが返されています。これを解決するには、前のセクションにある指示に従い、apex ドメイン (tacolabs.com) 用に別の TLS 証明書を追加する必要があります。これが完了すると、リダイレクトはすべて機能します。

統計を見る

これですべての設定が終了し、機能するようになりました!上出来です。Fastly を正常に設定し、オリジンサーバーから Web サイトとアプリケーションをプルして、可能な限り効率的な方法で顧客に配信することができるようになりました。

ここからが興味深いところです。リアルタイムでトラフィックを見てみましょう。Taco Labs は仮の Web サイトであり (まだ) 人気を博してはいませんが、端末コマンドでトラフィックをシミュレートしておいた方がよいでしょう。これにより、Fastly のリアルタイムおよび過去の可観測性機能を実感することができます。

これまで見てきた画面は、ほとんどが Fastly コントロールパネルの Deliver エリアでした。次に、Observability をクリックして、コントロールパネルのその他の部分に移動します。Observability セクションには、Real-time と Historic の2つのページがあります。名前が示す通り、リアルタイム可観測性ページにはリアルタイム分析と、過去のキャッシュの統計が表示されます。

Fastly コントロールパネル内の Observability ページへのリンク

まだ何も表示されない状態ですから、Web サイトにトラフィックを送信してみましょう。無料で利用できる Apache ベンチコマンドツールwatch コマンドで使用することで、訪問者をシミュレートすることができます。

$ watch -n 1 ab -r -n 30 -c 30 -g out.data https://www.tacolabs.com/

端末アプリケーションでこのコマンドを実行すると、以下のように Observability ページにリアルタイムの統計情報が表示されます。

Fastly コントロールパネルに表示されるリアルタイム統計情報

詳細な説明は省きますが、Observability ページは、Webサイトやアプリケーションへのトラフィックの全体像を把握するのに有効です。Observability ページの詳細については、ドキュメントをご確認ください。

ログを確認する

先ほどのチュートリアルでは、ログの設定を行いました。このときに行なった作業を活かす時です。Fastly サービスで本番トラフィックが増加する中、訪問者にエラーが発生しないようにログに気をつける必要があります。実際のシナリオでは、エラーステータスコード、コンバージョン率の低下、およびその他の Web サイトやアプリケーションに特有の問題がないかどうかを確認する必要があります。先を見越したモニタリングだと考えてください。大惨事になる前に、まだ見えない問題の芽を摘むことです。

すでに、2つのエンドポイントが設定されています。Amazon S3 と Papertrail です。Papertrail エンドポイントは、リアルタイムログストリーミングエンドポイントであるため、これをここで使用します。Amazon S3 は、古いイベントを検証するために使用できる履歴レコードです。下記の Papertrail インターフェースを確認すると、ボットがすでに Taco Labs をクロールしていることがわかります。画像の欠落に関連するエラーがいくつかあるようです。

Papertrail のログを確認する

前述したように、ログをフィルターして本当に注意を払う必要のあるイベントを探すことをお勧めします。例えば HTTP ステータスコード 200 のエントリーはすべてフィルターで除外すれば、エラーのみが表示されるようになります。

コントロールパネルを使用してキャッシュを確認する

このチュートリアルでは、curl コマンドを使用して、Fastly がどのように Web サイトをキャッシュしているのかを確認しました。では、コントロールパネルを使用してみましょう。

Service summary の下に、Check cache が表示されています。これをクリックして、コントロールパネルで指定したドメインが含まれる URL を入力します。このツールには、Fastly ネットワーク全体でオブジェクトがどのようにキャッシュされているのかが表示されます。

Fastly コントロールパネルでキャッシュを確認する

ご覧のとおり、コントロールパネルの cache checking ツールからは、curl よりも多くの情報が得られます。これは、Web サイトの問題をトラブルシューティングする際に、使用すべき最初のツールの1つです。


翻訳についての注意事項
このガイドは役に立ちましたか?

このフォームを使用して機密性の高い情報を送信しないでください。サポートが必要な場合は、サポートチームまでご連絡ください。このフォームは reCAPTCHA によって保護されており、Google のプライバシーポリシー利用規約が適用されます。