概要

このプラグインは、Triumph CDNの利用をサポートするために必要です。ご利用には、Triumph CDNの有効なサブスクリプションが必要です。Triumph CDNの詳細については、 https://www.triumph.tech/cdn をご覧ください。

Triumph CDNの効果を最大限に引き出すため、 Triumph Web Agilityプラグインの導入も強くお勧めします。このプラグインをCDNと組み合わせて使用する方法については、以下で詳しく説明します。

CDNの導入

CDN を利用したキャッシュは、パフォーマンスを大幅に向上させ、帯域幅を節約し、サーバーへのトラフィックを軽減するなど、非常に強力なツールですが、それは正しく実施された場合に限られます。設定を誤ると、そのメリットを享受できないだけでなく、間違ったデータが間違ったタイミングで間違った相手に配信されてしまうため、多大なトラブルを招く恐れもあります。 CDNの世界に足を踏み入れるには、ある程度の技術的な理解とノウハウが必要であり、それがすべての人にとって容易なものではないかもしれません。

WebアプリケーションにCDNを適用するのは簡単な作業です。しかし、適用したからといって、それで完了というわけではありません。CDNには、アプリケーションに関する知識が備わっておらず、何をキャッシュすべきか、何をキャッシュすべきでないかを判断できません。何をキャッシュしてほしいかをCDNに理解させるのは、あなた次第です。そのためには、理解しておくべき2つの基本原則があります：

キャッシュ制御ヘッダー-キャッシュ制御ヘッダーを使用することで、CDNに対してキャッシュ対象とする内容を指定します。Rockでは、これらのヘッダーを設定するためのいくつかの方法を提供しています。以下では、サイトに合わせてこれらのヘッダーを最適化する方法について詳しく解説しています。
URLの固有性– HTTPリクエストを処理する際、CDNは完全なURL（クエリ文字列のパラメータを含む）を、キャッシュ可能な固有の項目として扱います。つまり、以下の2つのリクエストは、同じページを指しているにもかかわらず、CDNからは2つの異なるリソースとして扱われます：

https://rock.rocksolidchurchdemo.com/group-detail?GroupId=12

https://rock.rocksolidchurchdemo.com/group-detail?GroupId=13

これは前述のケースでは理にかなっており、まさに期待通りの動作です。グループID 12 のコンテンツは、13 のものとは大きく異なります。では、次のような API リクエストの例を考えてみましょう：

https://api.rocksolidchurchdemo.com/api/People/GetCurrentPerson

なお、このAPIエンドポイントは、リクエストに埋め込まれた認証クッキーを参照して、現在のユーザーを取得します。ただし、このエンドポイントを呼び出すすべてのユーザーに対して、URLは同一になります。この場合、CDNに対してこのリクエストを絶対にキャッシュしないよう明示的に指示する必要があります（その方法については後述します）。

これらの基本概念を踏まえた上で、Rockで使用するCDNのチューニングについて見ていきましょう。

プラグインの設定

プラグインのインストールが完了したら、CDNの設定値を追加する必要があります。これらの設定値は、Triumph TechによるCDNの設定完了後に提供されます。設定ブロックは、「管理ツール > インストール済みプラグイン > Triumph CDN」から確認できます。

CDNのチューニング

それでは、Rockインスタンス向けにTriumph CDNのチューニングを開始する準備が整いました。組織ごとに要件は異なりますので、ここでは、Rockにおいてキャッシュ制御情報を設定できるすべての領域に焦点を当てていきます。

キャッシュ制御ヘッダーの理解

Rockの設定に入る前に、少し時間を取って、キャッシュ制御レスポンスヘッダーについて見てみましょう。前述したように、このヘッダーは、リクエストのコンテンツをどのようにキャッシュすべきかを外部に伝える役割を果たします。コンテンツをキャッシュする主な主体は、クライアントのWebブラウザとCDN（または同様のプロキシ）の2つです。

キャッシュに関する標準的なレスポンスヘッダーのキーは「Cache-Control」です。このヘッダーの値には、いくつかのオプションがあります。

「公開」 – これにより、誰でもそのコンテンツをキャッシュできることが示されます。
「プライベート」 – これは、そのコンテンツがユーザー固有のものであり、ブラウザによってのみキャッシュされることを示します。
No-Cache– 名称とは裏腹に、このタグが付いたコンテンツはキャッシュ可能ですが、更新されていないことを確認するために、オリジンサーバー（Rock）に対してリクエストの確認を行う必要があります（通常はETagを使用します）。
No-Store– これは「これをキャッシュしない」と明示的に指定する方法です。

「Public」および「Private」オプションには、 CDNに対してコンテンツをキャッシュする期間を指定するための追加設定があります。これは「Max-Age」と呼ばれます。単位は秒です。

なお、「Public」オプションには、実際には2つの異なる Max-Age設定があります。それらは以下の通りです：

Max-Age– ローカルキャッシュ（通常はブラウザ）の有効期限。
公開 Max-Age– CDN やプロキシサーバーなどのネットワークベースのキャッシュの有効期限。

静的コンテンツ

静的コンテンツは、お使いのRock Webサーバーから直接配信されます。アプリケーションとしてのRockは、このコンテンツの配信には一切関与しません。 CDNへの誘導を行うには、サイトから送信されるリクエストのレスポンスヘッダーにHTTPヘッダーを追加する必要があります。これは、 Triumph Web Agilityプラグインを使用すれば簡単に実行できます。以下の例のような「レスポンスヘッダールール」を作成するだけです。

注記

Rockでは、一部の静的ファイルタイプに対してキャッシュ制御ヘッダーを直接追加します。これにはCSSファイルやJavaScriptファイルが含まれます。これらのファイルには、自動的に1年間のキャッシュ有効期間が設定されます。また、これらのファイルにはフィンガープリントが割り当てられており、ファイルに変更が加わると一意のURLが生成され、キャッシュが「無効化」されます。

ファイルの種類

静的画像の設定が完了したので、次は Rock内で管理されている画像についても、同様の設定を行う方法を見ていきましょう。ご存知の通り、 Rockに保存される画像やドキュメントは「ファイルタイプ」として設定されます。これらのタイプにより、ファイルの保存場所や、ファイルを閲覧する際に必要なセキュリティ設定を指定することができます。また、ファイルタイプでは、CDN用のキャッシュヘッダーを設定することも可能です。

ファイルタイプのキャッシュ設定は、「管理ツール > 一般設定 > ファイルタイプ」で行えます。設定したいファイルタイプを選択し、キャッシュ制御ヘッダーの設定を調整してください。

警告

セキュリティが有効になっているファイルについては、キャッシュ設定を行わないようにしてください。これにより、CDNネットワーク上でこれらのファイルが一般にアクセス可能になることを防ぐことができます（ただし、検索可能にはなりません）。

APIエンドポイント

また、Rock APIエンドポイントの結果をキャッシュすることもできます。キャッシュ制御の設定は、RESTアクション単位で有効化されます。この設定は、「管理ツール > セキュリティ > RESTコントローラー」で行えます。コントローラーを選択し、設定したいアクションを選択してください。表示されるモーダル画面で、キャッシュ制御の設定を選択できます。

ロック・ページ

Rockのページ全体をキャッシュするように設定することも可能です。ただし、この設定を行う際は細心の注意を払う必要があります。ページにパーソナライズされたコンテンツが含まれている場合、それらはキャッシュされ、初回読み込み以降のすべてのリクエストに対して送信されてしまいます。とはいえ、この機能は非常に強力です。

ウェブサイトの特定のページで、トラフィックが急増する状況が発生することがあります。例えば、雨の日に休校情報やグラウンドの使用状況などを提供するページなどが挙げられます。パーソナライズされたコンテンツを一切含まないページを作成し、 CDNによるキャッシュ設定を行うことで、 Rockサーバーがリクエストの集中による過負荷から保護されます。なお、このような場合でもページのコンテンツを更新することは可能です。キャッシュの有効期間を1～2分といった非常に短い時間に設定するだけで済みます。たとえ1分という短いキャッシュ有効期間であっても、トラフィックが急増した際にサーバーに届くリクエストの数を大幅に削減することができます。

ページごとのキャッシュ制御設定を行うには、そのページの「ページのプロパティ」ダイアログを開き、「詳細設定」タブをクリックします。

CDNの設定確認

すべての設定が完了したら、CDNが意図した通りにキャッシュされているかを確認しましょう。設定の確認は少々難しく、ブラウザの開発者ツールの知識が必要となります。それでは、テストを始めましょう。（以下の手順は、PC版のChromeに限定されています。）

まず、確認したいページやリソースをブラウザで読み込んでください。
ページを右クリックして「要素を検査」を選択し、ブラウザの開発者ツールを有効にしてください。
開発者ツールの「ネットワーク」タブを開きます。最初は何も表示されていません。
ブラウザでページまたはリソースを再読み込みしてください。情報が「ネットワーク」タブに表示されます。
ファイル一覧から該当するリソースを見つけ、「レスポンスヘッダー」セクションを確認してください。ここに「Cache-Control」ヘッダーとその値が表示されます。この値が想定どおりであることを確認してください。
次に、コンテンツがCDNのキャッシュから配信されたのか、それともRockサーバーから読み込まれたのかを確認します。これは「X-Cache」ヘッダーに表示されます。値が「HIT」の場合はコンテンツがCDNから配信されたことを意味し、「MISS」または「TCP_MISS」の場合はRockサーバーから配信されたことを意味します。

ここで少し混乱するかもしれません。本来なら「HIT」と表示されるはずの場面で、「MISS」と表示されることがよくあります。コンテンツが初めてリクエストされた際、CDNはRockサーバーからそのコンテンツを取得する必要があります。これは「MISS」としてカウントされます。しかし、ページを再読み込みした後も、依然として「MISS」と表示されることがあり、非常に混乱を招きます。これは、ブラウザが実際にファイルをキャッシュしており、そのキャッシュに元のHTTPヘッダーが含まれているためです。正しい表示を確認するには、ネットワークタブでファイルを右クリックし、「ブラウザのキャッシュを消去」を選択してから、ページを再読み込みしてください。

無効化の問題に対する別の解決策として、Edge、 Firefox、Safariなどの別のブラウザでリクエストをテストする方法があります。

画像の最適化

Triumphのソリューションは、一般的なCDNの枠を超え、以下のような機能を備えた世界最高水準の画像最適化を提供します：

画像のサイズ変更とトリミング- これにより、サイト上のソース画像のサイズを自由に設定できます。特定のページではサムネイルとして画像を正方形に表示し、他のページでは元の画像をそのまま表示するように設定できます。
圧縮 - Triumph CDN は、ベストプラクティスに基づいたアルゴリズムを用いて、画像を自動的に圧縮することができます。
フォーマットの自動選択- トライアンフのCDNは、リクエスト元のブラウザやプラットフォームを分析し、各リクエストに最適な画像フォーマットを自動的に選択します。個々のリクエストにとって最適な形式に応じて、JPGファイルが配信される場合もあれば、WebPファイルが配信される場合もあります。
画像の加工- 最適化に加え、Triumph CDNでは、画像に対して数百種類もの加工を施すことも可能です。加工の例としては、ぼかし、モノクロ化、デュオトーン、ノイズ除去、マスク、回転、顔検出などが挙げられ、その他にも数え切れないほどの加工機能があります。

Triumphの画像最適化機能は、人気のあるimgixウェブサービスに基づいています。追加の設定や imgixに関する知識は必要ありません。ウェブサイト上の画像に最適化を適用するには、以下に示すように、新しいLavaフィルターを使用するだけです。

<img src="{{ '/content/sample.jpg' | TriumphImgCdn:'auto=compress&auto=format' }}">

imgixの機能に関する詳細情報は、ドキュメントサイト（https://docs.imgix.com/apis/rendering）をご覧になるか、画像サンドボックス（https://sandbox.imgix.com/create）で実際に試してみることで確認できます。