Vercel展開時にオフプロセスの編集データキャッシュを使用してください
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
I
!警告JSSバージョン22以降の編集統合は、もはやこの実装を必要としません。
VercelデプロイメントをSitecoreの編集ホストとして使いたい場合は、EditingDataMiddlewareミドルウェア/ハンドラーに対してアウトオブプロセスの編集キャッシュ実装を指定する必要があります。Vercel Redisの実装はRedisキャッシュを使って使うことができます。
カスタムのRedisキャッシュエンドポイントを使いましょう
編集データキャッシュにはVercel Redis以外のストレージを使うことができます。この例はNode Redisライブラリを用いた実装を示していますが、お好きなクライアントを使えます。
カスタムのRedisキャッシュエンドポイントを設定するには:
-
@redis/client依存関係をプロジェクトに追加するには、以下のいずれかのコマンドを使ってください:
npm install redis
または
npm install @redis/client
-
src/libディレクトリで、編集データサービスを初期化・エクスポートするためのファイル(例
.ts)を作成します。 -
EditingDataCacheを実装するクラスを作成してエクスポートします。クラスはKey(文字列)-値(JSON)データをRedisに入力し、後で取得できる必要があります。
以下の例では、ユーザー名やパスワードを指定せずにエンドポイントURLのみで初期化されたRedisクライアントを使用しています。
import { createClient, RedisClientType } from '@redis/client'; import { EditingData, EditingDataCache } from '@sitecore-jss/sitecore-jss-nextjs/editing'; import { BasicEditingDataService } from '@sitecore-jss/sitecore-jss-nextjs/editing';
export class CustomRedisEditingDataCache implements EditingDataCache { private redisCache: RedisClientType;
constructor(redisUrl: string, redisPassword: string) { this.redisCache = createClient({ url: `rediss://${redisUrl}
`, password: redisPassword, }); }set(key: string, editingData: EditingData): Promise
{ return new Promise ((resolve, reject) => { this.redisCache .set(key, JSON.stringify(editingData)) .then(() => resolve()) .catch((err) => reject(err)); }); } get(key: string): Promise<EditingData | undefined> { return new Promise<EditingData | undefined>((resolve, reject) => { this.redisCache .get(key) .then((entry) => { resolve(JSON.parse(JSON.stringify(entry)) as EditingData); }) .catch((err) => reject(err)); }); } }
const redisUrl = 'YOUR_REDIS_ENDPOINT'; export const redisDataService = new BasicEditingDataService({ editingDataCache: new CustomRedisEditingDataCache(redisUrl) });
-
src/pages/api/editing/render.tsファイルでインポートし、redisDataServiceをEditingRenderMiddlewareハンドラーに渡します:
import { redisDataService } from 'lib/redis-editing-service'; ... const handler = new EditingRenderMiddleware({ editingDataService: redisDataService }) .getHandler();
-
src/lib/page-props-factory/plugins/preview-mode.tsファイルで、editingDataServiceインポートをRedis KV実装に変更します:
import { redisDataService as editingDataService } from 'lib/redis-editing-service';