Vercelデプロイメントでのアウトプロセス編集データキャッシュの使用

Version:

日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

VercelデプロイメントをSitecoreの編集ホストとして使用する場合は、EditingDataMiddlewareミドルウェア/ハンドラのアウトプロセス編集キャッシュ実装を指定する必要があります。Sitecoreが標準で提供しているVercel KVソリューションを使用するか、Redisキャッシングを使用してカスタム実装を追加できます。このトピックでは、両方のアプローチについて説明します。

Vercel KVキャッシュを使用する

Sitecore JSS SDK v21.4.0は、Vercel KVアウトプロセスキャッシングを使用したすぐに使用できるソリューションを提供します。

Vercel KVキャッシングソリューションを有効にするには:

VercelプロジェクトでVercel KVを有効にします。

大事な

.envファイルでKV_REST_API_URL変数とKV_REST_API_TOKEN変数の値を設定してから、アプリをローカルでビルドして実行する必要があります。
src/libディレクトリに、編集データサービスを初期化してエクスポートするためのファイル (redis-editing-service.tsなど) を作成します。

VercelEditingDataCacheサービスをインポートして初期化し、次にBasicEditingDataServiceサービスをインポートして、redisDataCacheのインスタンスで初期化します。

import { VercelEditingDataCache, BasicEditingDataService } from '@sitecore-jss/sitecore-jss-nextjs/editing';

const redisDataCache = new VercelEditingDataCache(     
  process.env.KV_REST_API_URL,     
  process.env.KV_REST_API_TOKEN   
);

export const redisDataService = new BasicEditingDataService({ editingDataCache: redisDataCache });

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インポートを変更して、代わりにVercel KV実装を使用します。
import { redisDataService as editingDataService } from 'lib/redis-editing-service';

カスタムRedisキャッシュエンドポイントを使用する

編集データキャッシュには、Vercel Redis以外のストレージを使用できます。この例では、Node Redisライブラリを使用した実装を示していますが、任意のクライアントを使用できます。

カスタムRedisキャッシュエンドポイントを設定するには:

次のいずれかのコマンドを使用して、@redis/client依存関係をプロジェクトに追加します。
npm install redis
又は
npm install @redis/client
src/libディレクトリに、編集データサービスを初期化してエクスポートするためのファイル (redis-editing-service.tsなど) を作成します。

EditingDataCacheを実装するクラスを作成してエクスポートします。クラスは、key(string)-value(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) {
    this.redisCache = createClient({
      url: redisUrl,
    });
  }

  set(key: string, editingData: EditingData): Promise<void> {
    return new Promise<void>((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ファイルで、Redis KV実装を使用するようにeditingDataServiceインポートを変更します。
import { redisDataService as editingDataService } from 'lib/redis-editing-service';

この記事を改善するための提案がある場合は、お知らせください!