---
title: "Vercel展開時にオフプロセスの編集データキャッシュを使用してください"
slug: "use-an-out-of-process-editing-data-cache-with-vercel-deployments"
abstract: "VercelのSitecoreの編集ホストとして使用されるEditingDataMiddlewareミドルウェア/ハンドラーのオフプロセス編集キャッシュ実装の使い方。"
---
# Vercel展開時にオフプロセスの編集データキャッシュを使用してください

I

> !警告JSSバージョン22以降の編集統合は、もはやこの実装を必要としません。

VercelデプロイメントをSitecoreの編集ホストとして使いたい場合は、EditingDataMiddlewareミドルウェア/ハンドラーに対してアウトオブプロセスの編集キャッシュ実装を指定する必要があります。Vercel Redisの実装はRedisキャッシュを使って使うことができます。

## カスタムのRedisキャッシュエンドポイントを使いましょう

編集データキャッシュにはVercel Redis以外のストレージを使うことができます。この例は[Node Redis](https://www.npmjs.com/package/redis)ライブラリを用いた実装を示していますが、お好きなクライアントを使えます。

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

1.  @redis/client依存関係をプロジェクトに追加するには、以下のいずれかのコマンドを使ってください:
    
    npm install redis
    
    または
    
    npm install @redis/client
    
2.  src/libディレクトリで、編集データサービスを初期化・エクスポートするためのファイル(例:redis-editing-service.ts)を作成します。
    
3.  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}:6380\`,
     password: redisPassword,
     });
     }
    
     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)
    });
    
4.  src/pages/api/editing/render.tsファイルでインポートし、redisDataServiceをEditingRenderMiddlewareハンドラーに渡します:
    
    import { redisDataService } from 'lib/redis-editing-service';
    ...
    const handler = new EditingRenderMiddleware({
     editingDataService: redisDataService
    })
    .getHandler();
    
5.  src/lib/page-props-factory/plugins/preview-mode.tsファイルで、editingDataServiceインポートをRedis KV実装に変更します:
    
    import { redisDataService as editingDataService } from 'lib/redis-editing-service';