---
title: "ディスクベースの編集キャッシュ実装で使用されるデフォルトのディレクトリを上書きします"
slug: "override-the-default-directory-used-by-the-disk-based-editing-cache-implementation"
abstract: "EditingDataDiskCacheで使われている一時ディレクトリを変更してください。"
---
# ディスクベースの編集キャッシュ実装で使用されるデフォルトのディレクトリを上書きします

JSS Next.jsアプリと高度なSitecoreコンテンツやレイアウトエディタを統合するために使われるディスクベースのキャッシュは、デフォルトでオペレーティングシステムのtempディレクトリを使用します。Next.jsアプリケーションをVercelでホストする場合、デフォルトのtempディレクトリは問題なく動作します。しかし、他のプラットフォームでは、デフォルトのtempディレクトリを使うと編集データミドルウェアが誤作動し、Experience Editorで断続的に500エラーが発生することがあります。

エラーを解決するには、ディスクベースのキャッシュに使われているディレクトリを上書きする必要があります。

デフォルトのtempディレクトリを上書きするには:

1.  例えば新しいファイル /src/lib/editing.tsでは、編集データディスクのキャッシュを作成し、デフォルトのtempディレクトリを好きなものと新しいキャッシュを利用する新しい編集データサービスで上書きします。
    
    import {
      EditingDataDiskCache,
      BasicEditingDataService,
      ServerlessEditingDataService
    } from '@sitecore-jss/sitecore-jss-nextjs/editing';
    
    // Override the default editingDataDiskCache with an accessible temp directory
    export const myEditingDataDiskCache = new EditingDataDiskCache('C:\\\\temp');
    
    // Override default editingDataService to use myEditingDataDiskCache for BasicEditingDataService
    export const myEditingDataService = process.env.VERCEL
      ? new ServerlessEditingDataService()
      : new BasicEditingDataService({
          editingDataCache: myEditingDataDiskCache,
        });
    
2.  /src/pages/api/editing/data/key.tsファイル内で、EditingDataMiddlewareハンドラを更新して新しい編集データディスクキャッシュを使用させます:
    
    import { EditingDataMiddleware } from '@sitecore-jss/sitecore-jss-nextjs/editing';
    import { myEditingDataDiskCache } from 'lib/editing';
    
    /\*\*
     \* This Next.js API route is used to handle Sitecore editor data storage and retrieval by key
     \* on serverless deployment architectures (such as Vercel) via the \`ServerlessEditingDataService\`.
     \* The \`EditingDataMiddleware\` expects this dynamic route name to be 'key' by default but can
     \* be configured to use something else with the \`dynamicRouteKey\` option. 
    \*/
    
    // Bump body size limit (1mb by default) and disable response limit for Sitecore editor payloads
    // See https://nextjs.org/docs/api-routes/request-helpers#custom-config
    export const config = {
      api: {
        bodyParser: {
          sizeLimit: '2mb',
        },
        responseLimit: false,
      },
    };
    
    // Wire up the EditingDataMiddleware handler
    const handler = new EditingDataMiddleware({
      editingDataCache: myEditingDataDiskCache,
    }).getHandler();
    
    export default handler;
    
3.  /src/pages/api/editing/render.tsファイル内で、既存のハンドラを新しい編集データサービスを使用するEditingRenderMiddlewareクラスの新しいインスタンスで更新します:
    
    import { EditingRenderMiddleware } from '@sitecore-jss/sitecore-jss-nextjs/editing';
    import { myEditingDataService } from 'lib/editing';
    
    /\*\* \* This Next.js API route handles POST requests from Sitecore editors.
     \* This route should match the \`serverSideRenderingEngineEndpointUrl\` in your Sitecore configuration,
     \* which is set to "http://localhost:3000/api/editing/render" by default (see \\sitecore\\config\\nextjs-app.config).
     \* \* The \`EditingRenderMiddleware\` will \*  1. Extract editing data from the Sitecore editor POST request
     \*  2. Stash this data (for later use in the page render request) via an \`EditingDataService\`, which returns a key for retrieval
     \*  3. Enable Next.js Preview Mode, passing our stashed editing data key as preview data
     \*  4. Invoke the actual page render request, passing along the Preview Mode cookies.
     \*     This allows retrieval of the editing data in preview context (via an \`EditingDataService\`) - see \`SitecorePagePropsFactory\`
     \*  5. Return the rendered page HTML to the Sitecore editor
     \*/
    
    // Bump body size limit (1mb by default) and disable response limit for Sitecore editor payloads
    // See https://nextjs.org/docs/api-routes/request-helpers#custom-config
    export const config = {
      api: {
        bodyParser: {
          sizeLimit: '2mb',
        },
        responseLimit: false,
      },
    };
    
    // Wire up the EditingRenderMiddleware handler
    const handler = new EditingRenderMiddleware({
      editingDataService: myEditingDataService,
    }).getHandler();
    
    export default handler;
    
4.  src/lib/page-props-factory/plugins/preview-mode.tsファイルを更新し、PreviewModePluginクラスが新しい編集データサービスを使用するようにします:
    
    import { myEditingDataService } from 'lib/editing';
    import { SitecorePageProps } from 'lib/page-props';
    import { GetServerSidePropsContext, GetStaticPropsContext } from 'next';
    import { Plugin } from '..';
    
    class PreviewModePlugin implements Plugin {
      order = 0;
    
    async exec(props: SitecorePageProps, context: GetServerSidePropsContext | GetStaticPropsContext) {
        if (!context.preview) return props;
    
     // If we're in preview (editing) mode, use data already sent along with the editing request
        const data = await myEditingDataService.getEditingData(context.previewData);
    
     if (!data) {
          throw new Error(
            \`Unable to get editing data for preview ${JSON.stringify(context.previewData)}\`
          );
        }
        props.locale = data.language;
        props.layoutData = data.layoutData;
        props.dictionary = data.dictionary;
        return props;
      }
    }
    
    export const previewModePlugin = new PreviewModePlugin();