5. 公開する

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 マネージド証明書を使用することができます。無料のトライアルアカウントには、無料の Let's Encrypt 認証局を使用した 2 つのドメイン用の Fastly マネージド証明書が含まれています。また、有料アカウントを利用すれば、独自の証明書をアップロードして管理することも可能です。

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

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

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

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

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

1$ dig www.tacolabs.com +short
2dualstack.j.sni.global.fastly.net.
3151.101.198.132

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

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

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

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

1$ curl -sLD - http://tacolabs.com -o /dev/null -w '%{url_effective}'
2HTTP/1.1 301 Moved Permanently
3Server: Varnish
4Retry-After: 0
5cache-control: max-age=86400
6Location: http://www.tacolabs.com/
7Content-Length: 0
8Accept-Ranges: bytes
9Date: Mon, 18 Oct 2021 19:25:46 GMT
10Via: 1.1 varnish
11Connection: close
12X-Served-By: cache-den8264-DEN
13X-Cache: HIT
14X-Cache-Hits: 0
15X-Timer: S1634585146.929981,VS0,VE79
16HTTP/1.1 200 OK
17x-amz-id-2: NXLv0EZjIymQiCtAvpbeUyXlfiKjvMBbpSOqz84U5JNOfm5ysn1c43hvahA6oKH1/t+uiJS2Xrw=
18x-amz-request-id: T6JEN0EXBQFXVRCF
19cache-control: no-store, max-age=0
20Last-Modified: Fri, 23 Jul 2021 21:54:38 GMT
21ETag: "dcf9e4efa41b023a4280c8305070a1cf"
22Content-Type: text/html
23Server: AmazonS3
24Via: 1.1 varnish, 1.1 varnish
25Content-Length: 4469
26Accept-Ranges: bytes
27Date: Mon, 18 Oct 2021 19:25:46 GMT
28Age: 0
29Connection: keep-alive
30X-Served-By: cache-mdw17341-MDW, cache-phx12427-PHX
31X-Cache: MISS, MISS
32X-Cache-Hits: 0, 0
33X-Timer: S1634585146.116375,VS0,VE94
34Vary: 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 期間をテストの間隔に設定することをお勧めします。

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

1$ curl -sLD - http://tacolabs.com -o /dev/null -w '%{url_effective}'
2HTTP/1.1 301 Moved Permanently
3Server: Varnish
4Retry-After: 0
5cache-control: no-store, max-age=0
6Location: http://www.tacolabs.com/
7Content-Length: 0
8Accept-Ranges: bytes
9Date: Mon, 18 Oct 2021 20:38:35 GMT
10Via: 1.1 varnish
11Connection: close
12X-Served-By: cache-bur17572-BUR
13X-Cache: HIT
14X-Cache-Hits: 0
15X-Timer: S1634589516.510082,VS0,VE58
16Strict-Transport-Security: max-age=300
17HTTP/1.1 301 Moved Permanently
18Server: Varnish
19Retry-After: 0
20Location: https://www.tacolabs.com/
21Content-Length: 0
22Accept-Ranges: bytes
23Date: Mon, 18 Oct 2021 20:38:35 GMT
24Via: 1.1 varnish
25Connection: close
26X-Served-By: cache-phx12424-PHX
27X-Cache: HIT
28X-Cache-Hits: 0
29X-Timer: S1634589516.811935,VS0,VE1
30Strict-Transport-Security: max-age=300
31https://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つのページがあります。名前が示す通り、リアルタイム可観測性ページにはリアルタイム分析と、過去のキャッシュの統計が表示されます。

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

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

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

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

ログを確認する

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

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

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

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

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

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

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