CDN caches static websites deployed on Function Compute

Function Compute にデプロイした静的 Web サイトを CDN でキャッシュする方法

Function Compute にデプロイしたブログサイトを例に、Function Compute でホストされている静的 Web サイトを CDN でキャッシュする方法を順を追って紹介します。

Function Compute への CDN 機能の追加

1) Function Compute にドメイン名を割り当て、CNAME レコードを追加する

エンドユーザーが blog.dengchao.fun 経由でアクセスできるようにするため、Function Compute に別のドメイン名 blog.xxx.dengchao.fun を割り当てる必要があります。

2) カスタムドメインを追加し、ルーティングを設定する

割り当てたドメイン名を Function Compute のカスタムドメインに設定します。

「CDN 側でも HTTPS を設定でき、Function Compute では SSL プロトコルバージョンを設定できないため、ここでは HTTPS 機能を有効にしていません。」

3) オリジンタイプを「Function Compute ドメイン名」として CDN を追加する

次に、CDN コンソールで新しい高速化ドメイン名を作成します。

エンドユーザーは高速化ドメイン名 blog.dengchao.fun を通じてブログにアクセスします。ビジネスタイプの選択は最終的な高速化効果に影響しないため、任意に選択できます。

次にオリジンを追加します。

Function Compute のカスタムドメインでは HTTPS が有効になっていないため、オリジンのポートをポート 80 に設定する必要があります。これにより、オリジンへの戻り時のレスポンス時間を短縮できます（実際の効果はわずかです）。

4) CNAME タイプの CDN 高速化ドメイン名レコードを追加する

オリジン情報を設定して保存すると、Alibaba Cloud がオリジンの内容をレビューします。レビューに合格すると、CDN サービスプロバイダーのドメイン名が提供されます。

次に、高速化ドメイン名を CDN サービスプロバイダーから提供されたドメイン名に解決する必要があります。

CNAME レコードを追加すると、まもなく CDN コンソールに「設定済み」ステータスが表示され、設定した高速化ドメイン名でアクセスできるようになります。

CDN キャッシュの設定

高速化ドメイン名の設定だけでは不十分です。設定がない場合、ユーザーが高速化ドメイン名にアクセスするたびにオリジンサイトからデータをプルする必要があります。そのため、CDN にキャッシュを設定してオリジンへの戻り回数を減らす必要があります。1) キャッシュ有効期限ルールの追加

Web サイトのルートディレクトリ内のすべてのコンテンツを 1 日間キャッシュする場合、CDN 高速化ドメイン名のキャッシュ管理ページで対応する設定を追加します。

「ここでキャッシュを設定したつもりでしたが、Web サイトをしばらく運用した後、CDN のモニタリングを確認したところ、キャッシュヒット率が低い状態が続いていました。」ブラウザコンソールのネットワークリクエストログを観察し、リクエストヘッダーを一つずつ分析した結果、ついに異常を発見しました。オリジンサーバーが `Cache-Control: public, max-age=0` というレスポンスヘッダーを設定していたのです。

2) Cache-Control レスポンスヘッダーの修正

MDN の Cache-Control レスポンスヘッダーに関するドキュメント [2] と、Alibaba Cloud CDN のキャッシュ有効期限設定に関するドキュメント [3] を注意深く確認したところ、以前の CDN キャッシュ設定に不備があることが判明しました。問題の原因を特定できたことで、対応策も明確になりました。オリジンサーバーから Cache-Control レスポンスヘッダーを削除すればよいのです。

対応策 1：オリジン HTTP サーバーが返す Cache-Control レスポンスヘッダーを修正する。オリジン HTTP サーバーが Cache-Control レスポンスヘッダーを max-age=0 に設定しているため、オリジン HTTP サーバーを変更すればよいと考えられます。しかし、Function Compute にデプロイしている静的 Web サイトは website-fc プラグインが生成した Express サーバーでホストされており、修正には website-fc プラグインのソースコードから調整する必要があります。ただし、website-fc プラグインは不定期に更新されるため、更新のたびに再度パッチを当てる必要があり、実装に手間がかかるため、この対応策は採用できません。

対応策 2：CDN を設定して、オリジン HTTP サーバーが返す Cache-Control レスポンスヘッダーを削除する。ドキュメントを調べたところ、Alibaba Cloud CDN にはオリジンサーバーからの HTTP レスポンスヘッダーを設定する機能 [4] があり、レスポンスヘッダーを削除する機能も含まれていることが分かりました。この機能を使用して、CDN にオリジンサーバーから返される Cache-Control レスポンスヘッダーを削除させることができます。設定後、高速化ドメイン名でのネットワークリクエストのレスポンスヘッダーを再度確認すると、`Cache-Control: public, max-age=0` というレスポンスヘッダーが確かに削除されていることが確認できました。

3) 効果の比較：ブログサイトはトラフィック量が少ないため、効果が分かりにくい状況です。そのため、トラフィックの多い別の Web サイトのモニタリングスクリーンショットを撮影しました。まずトラフィックの比較です。モニタリングデータでは、過去 2 日間のトラフィックに大きな差は見られませんでした。

次にオリジンへの回流トラフィックの比較です。Cache-Control レスポンスヘッダーを削除した後、オリジンへの回流トラフィックが大幅に減少していることが分かります。

同時に、バイトヒット率とリクエストヒット率も大幅に向上しました。

設定したキャッシュが確かに効果を発揮していることが確認できました。

CDN 高速化ドメイン名とキャッシュ有効期限ルールを設定した後、オリジンサーバーのレスポンスヘッダーを必ず確認してください。オリジンのレスポンスにキャッシュ制御関連のレスポンスヘッダーが既に含まれている場合は、オリジンサーバーの HTTP サーバーまたは CDN で適宜調整できます。

p.s 高速化の原理 [7]：高速化ドメイン名を www.aliyundoc.com と仮定します。CDN を通じて高速化サービスを開始した後、北京のエンドユーザーが HTTP リクエストを送信すると、