概要
このプラグインは、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– 名称とは裏腹に、このタグが付いたコンテンツはキャッシュ可能ですが、更新されていないことを確認するために（通常はETagを使用して）、オリジンサーバー（Rock）にリクエストを確認する必要があります。
- No-Store– これは「これをキャッシュしない」と明示的に指定する方法です。
「パブリック」および「プライベート」オプションには、
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などの別のブラウザでリクエストをテストする方法があります。
画像の最適化
トライアンフのソリューションは、一般的なCDNの枠を超え、
以下のような機能を備えた世界最高水準の画像最適化を提供します：
- 画像のサイズ変更とトリミング- これにより、サイト上の元画像のサイズを自由に設定できます。特定のページではサムネイルとして画像を正方形に表示し、他のページでは元の画像をそのまま表示するように設定できます。
- 圧縮 - Triumph CDN は、ベストプラクティスに基づいたアルゴリズムを用いて、画像を自動的に圧縮することができます。
- フォーマットの自動選択- Triumphの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）で実際に試してみることで確認できます。