※ これから記載する事項は、私が所属する会社とは一切関係のない事柄です。
B2C CommerceにはのJSやCSS、画像などの静的ファイルのキャッシュやページキャッシュがデフォルトでついているので、そちらの使い方についてみていきたいと思います。こちらのヘルプを参考にしています。
スクリプトを利用してデータをキャッシュするカスタムキャッシュについてはここでは取り扱いません。
静的ファイルのキャッシュ
静的ファイルのキャッシュは以下の３種類あり、それぞれのキャッシュ時間の設定を記載します。
-
組織の静的コンテンツ・カタログの静的ファイル（商品画像）・共有ライブラリ内の静的ファイルキャッシュ
- サイトごとのキャッシュは 管理 > サイト > サイトの管理 > グローバル静的キャッシュ からキャッシュ時間を設定できます。
-
サイト個別（非公開ライブラリ内、カートリッジ内）の静的ファイルキャッシュ
- 上記２つは同様に 管理 > サイト > サイトの管理 > {サイト名} - キャッシュ からキャッシュ時間を設定できます。
-
Business Managerの静的ファイルキャッシュ
- Business Manager のキャッシュは 管理 > サイト > サイトの管理 > Business Manager - キャッシュ からキャッシュ時間を設定できます。
キャッシュクリアの方法も記載します。
-
組織の静的コンテンツ・カタログの静的ファイル（商品画像）・共有ライブラリ内の静的ファイルキャッシュクリア
- ファイルはアップロード時にパス内のフィンガープリントが変わるため自動でキャッシュクリアされます。
-
サイト個別の静的ファイルのキャッシュクリア
- ファイルはアップロード時にパス内のフィンガープリントが変わるため自動でキャッシュクリアされます。
- 万が一更新されない場合は、 管理 > サイト > サイトの管理 > {サイト名} - キャッシュ のキャッシュの無効化「無効にする」ボタンをクリック
-
Business Manager の静的ファイルキャッシュクリア
- Business Manager のキャッシュは 管理 > サイト > サイトの管理 > Business Manager - キャッシュ のキャッシュの無効化から「無効にする」ボタンをクリック
ページキャッシュ
カートリッジ内のISMLから生成されたHTMLのキャッシュです。
ページキャッシュの確認方法
Business Managerの上部の「Toolkit」をクリックし、Toolkitページを表示した上で、右上のストレージアイコンをクリックするとページのキャッシュ状況を確認できます。
キャッシュの有功化
Business Managerの 管理 > サイト > サイトの管理 > {サイト名} - キャッシュ に遷移し、「ページキャッシングを有効にする」にチェックを入れて適用ボタンをクリックする。
キャッシュの方法
ページキャッシュするには２つの方法があります。
コントローラ
コントローラ内のレスポンスオブジェクトに下記のように期間を設定します。（同じ設定を再利用できるため、ミドルウェアとして設定することが多いです。）
res.cachePeriod = 24;
res.cachePeriodUnit = 'hours';
iscache タグを使ったキャッシュもありますがはSFRAでは適していないため、利用しない方が良さそうです。
ページ全体のキャッシュ
コントローラ
コントローラを利用したサンプルで、30時間キャッシュされるような設定です。
"use strict";
var server = require("server");
function cache(req, res, next) {
res.cachePeriod = 30;
res.cachePeriodUnit = "hours";
next();
}
server.get("Show", cache, function (req, res, next) {
res.render("sample/main");
next();
});
module.exports = server.exports();
<html>
<body>
<div>Main</div>
</body>
</html>
結果確認
ページの部分キャッシュ
部分キャッシュはリモートインクルードを行う必要があります。
リモートインクルードは下記のようにコントローラを呼んでインクルードさせる方法です。
<isinclude url="${URLUtils.url('CacheTest-Include')}" />
※ 下記のようなiscomponentでもリモートインクルードと同じような動きになります。
<iscomponent pipeline ="CacheTest-Include" />
サンプル
ページ全体としては30時間キャッシュし、インクルードしたページのキャッシュ時間は10時間とする設定です。
"use strict";
var server = require("server");
function cache(req, res, next) {
res.cachePeriod = 30;
res.cachePeriodUnit = "hours";
next();
}
function cacheInclude(req, res, next) {
res.cachePeriod = 10;
res.cachePeriodUnit = "hours";
next();
}
server.get("Show", cache, function (req, res, next) {
res.render("sample/main");
next();
});
server.get("Include", cacheInclude, server.middleware.include, function (req, res, next) {
res.render("sample/controllerInclude");
next();
});
module.exports = server.exports();
<html>
<body>
<isinclude url="${URLUtils.url('CacheTest-Include')}" />
<div>Main</div>
</body>
</html>
<div>Controller Include</div>
Tips
server.middleware.include を設定することで、ブラウザから直接アクセスできないようにしています。
結果確認
キャッシュパーテーション
コントローラのパイプライン（今回で言うとCacheTest-IncludeやCacheTest-Show）ごとにキャッシュの保存を行うことができ、部分的にキャッシュをすることが可能です。
最大１０パーテーション作成することができ、さらに１パーテーション内には最大１０のパイプラインを含むことが可能です。
キャッシュクリア方法
管理 > サイト > サイトの管理 > {サイト名} - キャッシュ にて「サイトの静的コンテンツキャッシュとページ全体キャッシュ」または「サイトのページ全体キャッシュ」の横の「無効化にする」ボタンをクリックします。
またパーテーションごとのキャッシュをクリアしたい場合は、同ページの「ページパーティション」から作成したパーテーションの横の「無効化する」ボタンをクリックします。
ページキャッシュの注意点
- 本番以外の開発やステージングとして使う環境はキャッシュを無効化することがおすすめです。
-
res.personalized = true;のように個人ごとにキャッシュする機能はありますが、 原則としてユーザ情報が載っているような部分はキャッシュしない方が良いです。
パイプラインごとのパフォーマンスの確認
Business Managerの 管理 > オペレーション > Pipeline Profiler > Sites-{サイト名}-Site に遷移すると、キャッシュのヒット数やレスポンスタイムが確認できます。
