ディスクベースの編集キャッシュ実装で使用されるデフォルトのディレクトリを上書きします
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
JSS Next.jsアプリと高度なSitecoreコンテンツやレイアウトエディタを統合するために使われるディスクベースのキャッシュは、デフォルトでオペレーティングシステムのtempディレクトリを使用します。Next.jsアプリケーションをVercelでホストする場合、デフォルトのtempディレクトリは問題なく動作します。しかし、他のプラットフォームでは、デフォルトのtempディレクトリを使うと編集データミドルウェアが誤作動し、Experience Editorで断続的に500エラーが発生することがあります。
エラーを解決するには、ディスクベースのキャッシュに使われているディレクトリを上書きする必要があります。
デフォルトのtempディレクトリを上書きするには:
-
例えば新しいファイル /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, });
-
/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;
-
/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;
-
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();