1. はじめに

Web サイトまたはアプリケーションを運用している場合、ユーザーに配信するための最良の方法を見つける必要があります。コンテンツ配信ネットワーク (CDN) を使用すると、よりユーザーの近くでキャッシュできるため、Web サイトやアプリケーションを高速化することができます。Fastly のフルサイトデリバリーは、キャッシュと配信ルールをカスタマイズして高速なユーザエクスペリエンスを実現すると同時に、可用性を向上させ、ホスティング費用を削減する強力なツールを提供します。

Fastly の使用を開始する際に参考にしていただけるよう、このステップバイステップのチュートリアルを作成しましたWeb サイトとドメイン名の例を用いて Fastly の使い方をご説明し、Jekyll の静的サイトジェネレーター、Amazon AWS、Fastly CDN を使って静的 Web サイトのキャッシュと配信を行う手順をご紹介します。完全に機能するタコスレシピサイトの Taco Labs を例として使用することで、実用性を高めました。このチュートリアルの終わりには、Fastly CDN を使って Web サイトをキャッシュして配信する方法がお分かりいただけると思います。

前提条件

このチュートリアルでは、以下のテクノロジーとコンセプトをよく理解していることを前提にしています。

• 静的サイトの生成： Fastly は、HTML ファイルとして Markdown ソースを出力するのに Jekyll の静的サイトジェネレーターを使用します。
• バージョンコントロール： バージョンコントロールに Git を、リモートストレージと継続的インテグレーションに GitHub を使用します。
• Amazon Web Services (AWS)： Fastly は、HTML ファイルを保存し、Web サイトとして配信するのに S3 を使用します。また、DNS に Route 53 を使用します。
• DNS レコード： Fastly を指すようにドメインの DNS レコードを更新します。
• コマンドラインインターフェース： curl を使用して HTTP ヘッダーを検証します。

仕組みを理解するために

自分で試して学ぶのが最良の方法です！仕組みを解説するために、チュートリアル全体を通じて特定のドメイン名 (www.tacolabs.com) を例として使用しています。効率的に理解を深めるため、始めはサンプル Web サイトを利用し、その後、独自のドメイン名、DNS レコード、Web ホスティングプロバイダーを使用して試すことをお勧めします。ドメイン名の例が使用されている場所に、ご自身のドメイン名を使用してください。

静的 Web サイトをホストする方法を決定する

実際のシナリオでは、CDN の使用を検討する前に、通常 Web サイトまたはアプリケーションがすでに開発され、ホストされています。このチュートリアルの目的上、裏で行われるアーキテクチャに関する決定について理解することをお勧めします。

Fastly を利用する前に、静的 Web サイトをホストする方法を決定する必要があります。最近は、最先端のサービスが豊富に提供されているため、低コストで簡単に静的 Web サイトをホストすることができます。実際、Taco Labs をどこででもホストすることができます。しかし、ホスティングサービスを細かく見た場合、それぞれ独自のメリットとデメリットがあり、中には不適切なものもあります。

例えば、仮想サーバーに静的サイトをホストすることで、好きなソフトウェアを使用して自由に設定することができますが、終わりのないメンテナンス作業に追われることになります。一方、GitHub Pages は使いやすいのですが、Jekyll に限定されており、Jekyll のカスタムプラグインは使用できません。最終的に、静的 Web サイトをホストする機能を使用して Amazon S3 で Taco Labs をホストすることにしました。

上の図は、Fastly を利用する前に Taco Labs が生成され、ユーザーに配信されるプロセスの概要を示しています。Markdown ファイルにコンテンツを保存し、git をバージョンコントロールに使用し、Jekyll を使って Webサイトを構築しています。git push で GitHub にメインブランチをプッシュすると、GitHub アクションがサイトを自動的に作成し、生成された HTML ファイルが Amazon S3 バケットに送信されます。

ドメイン名レジストラで tacolabs.com のネームサーバーは、Amazon の Route 53 DNS サービスを指しています。上記に示すように、Route 53 にホストされている単一の A DNS レコードは、S3 バケットの www.tacolabs.com に向けられています。

問題と落とし穴

この設定はシンプルで信頼性がありますが、いくつかのデメリットもあります。最も明らかなデメリットは、Amazon S3 でトランスポートレイヤーセキュリティ（TLS）証明書を使用できないことです。その結果、検索エンジンとウェブブラウザによってペナルティが課されます。別の潜在的な問題は、トラフィック急増に伴うコストです。Amazon S3 は安価なストレージを提供しますが、転送コストは別途必要なため、大量のアクセスがあった場合や DDoS 攻撃を受けた場合、手に負えないほどコストが増大する可能性があります。

最大の制約事項のひとつは、S3 バケット、つまりオリジンサーバーにあたるものです。S3 バケットを作成した際、AWS リージョンに位置付ける必要がありました。これは、1つの地理的場所に単一のデータセンターを配置することを意味します (この場合、米国のオハイオ州の us-east-2 リージョンに配置されます）。Taco Labs にアクセスするすべてのユーザーは、物理的な場所にかかわらず、そのデータセンターから Web サイトのアセットを取得する必要があります。オリジンサーバーから最も離れたところにいるユーザーは、その物理的距離を超えてアセットを送信するのに時間がかかるため、最悪のエクスペリエンスに悩まされます。そこで Fastly の出番です！

なぜ Fastly を使用するのか？

Fastly の使用により、配信プロセスを効率化して Web サイトの既存の実装を改善できます。Fastly は、Web サイトをコントロールし、ユーザーの近くに位置する世界中のデータセンターにキャッシュします。(このデータセンターを配信拠点、または POP と呼んでいます。)Web サイトは、本質的に世界中のさまざまな地理的場所でミラーされます。

上の図は、Fastly の使用開始後にサイトがどのように機能しているかを示しています。ユーザーが Web サイトにアクセスしようとすると、リクエストは AWS のリージョンではなく、最も近い Fastly POP にルーティングされます。これにより、ユーザーの読み込み時間が短縮されます。

しかもメリットはこれだけではありません。Fastly はユーザーとオリジンサーバーの間、いわゆるエッジと呼ばれる場所に位置するため、さまざまな Fastly の機能やサーバーレス環境のメリットを利用することができます。例えば、Fastly を使用して TLS 証明書で Web サイトを保護することができます。また、DDoS 攻撃やトラフィックの急増からオリジンサーバーを保護しながら、リダイレクトの管理やトラフィックのログ、レスポンスの設定、リアルタイムのトラフィック統計のモニタリングを行うことも可能です。そして、これらは Fastly がもたらすメリットのほんの一部にすぎません。

初期設定

Fastly を使用して Web サイトを配信する前に、現在の設定のスナップショットを見ていきます。

• ドメイン： www.tacolabs.com
• S3 バケット名： www.tacolabs.com
• オリジンホスト名： www.tacolabs.com.s3-website.us-east-2.amazonaws.com
• エイリアス DNS レコード： www.tacolabs.com → s3-website.us-east-2.amazonaws.com