- English
- 日本語
5. 公開する
最終更新日 2023-09-25
このページは、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 をクリックします。以下のウィンドウが表示されます。
フォームに入力して、ドメインを追加し、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 レコードは、伝播するのに少し時間がかかりますが、以下のコマンドを使用して、ステータスを確認することができます:
$ dig www.tacolabs.com +shortdualstack.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 サービスがリダイレクトを処理するように設定されています。ここで、tacolabs.com
に DNS レコードを追加する必要があります。TLS ページに、DNS A レコードの anycast IP アドレスを表示するセクションがあったのを思い出してください。以下のように、この anycast IP addresses を使用して、tacolabs.com
用に Route 53 で新しいDNS A レコードを作成することができます。
DNS レコードが反映された後、curl を使用して、リダイレクトが機能しているかどうかをテストすることができます。以下のように、tacolabs.com
は www.tacolabs.com
にリダイレクトされます。
$ curl -sLD - http://tacolabs.com -o /dev/null -w '%{url_effective}'HTTP/1.1 301 Moved PermanentlyServer: VarnishRetry-After: 0cache-control: max-age=86400Location: http://www.tacolabs.com/Content-Length: 0Accept-Ranges: bytesDate: Mon, 18 Oct 2021 19:25:46 GMTVia: 1.1 varnishConnection: closeX-Served-By: cache-den8264-DENX-Cache: HITX-Cache-Hits: 0X-Timer: S1634585146.929981,VS0,VE79HTTP/1.1 200 OKx-amz-id-2: NXLv0EZjIymQiCtAvpbeUyXlfiKjvMBbpSOqz84U5JNOfm5ysn1c43hvahA6oKH1/t+uiJS2Xrw=x-amz-request-id: T6JEN0EXBQFXVRCFcache-control: no-store, max-age=0Last-Modified: Fri, 23 Jul 2021 21:54:38 GMTETag: "dcf9e4efa41b023a4280c8305070a1cf"Content-Type: text/htmlServer: AmazonS3Via: 1.1 varnish, 1.1 varnishContent-Length: 4469Accept-Ranges: bytesDate: Mon, 18 Oct 2021 19:25:46 GMTAge: 0Connection: keep-aliveX-Served-By: cache-mdw17341-MDW, cache-phx12427-PHXX-Cache: MISS, MISSX-Cache-Hits: 0, 0X-Timer: S1634585146.116375,VS0,VE94Vary: 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
にリダイレクトされていることを示しています。
$ curl -sLD - http://tacolabs.com -o /dev/null -w '%{url_effective}'HTTP/1.1 301 Moved PermanentlyServer: VarnishRetry-After: 0cache-control: no-store, max-age=0Location: http://www.tacolabs.com/Content-Length: 0Accept-Ranges: bytesDate: Mon, 18 Oct 2021 20:38:35 GMTVia: 1.1 varnishConnection: closeX-Served-By: cache-bur17572-BURX-Cache: HITX-Cache-Hits: 0X-Timer: S1634589516.510082,VS0,VE58Strict-Transport-Security: max-age=300HTTP/1.1 301 Moved PermanentlyServer: VarnishRetry-After: 0Location: https://www.tacolabs.com/Content-Length: 0Accept-Ranges: bytesDate: Mon, 18 Oct 2021 20:38:35 GMTVia: 1.1 varnishConnection: closeX-Served-By: cache-phx12424-PHXX-Cache: HITX-Cache-Hits: 0X-Timer: S1634589516.811935,VS0,VE1Strict-Transport-Security: max-age=300https://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つです。
翻訳についての注意事項
このフォームを使用して機密性の高い情報を送信しないでください。サポートが必要な場合は、サポートチームまでご連絡ください。このフォームは reCAPTCHA によって保護されており、Google のプライバシーポリシーと利用規約が適用されます。