JSS の切断モードでの作業
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
切断された環境で作業を勧め、あとでデータを Sitecore にデプロイするには、Sitecore を使わずにアプリ データを定義する必要があります。これには、Manifest API でマニフェストを生成します。
マニフェストは、 App Import API を使用して Sitecore にインポートするか、切断モードでアプリをホストするために使用できる形式でデータを表す JSON ファイルです。
切断された環境で作業を進めるには、コード ファーストの開発ワークフローを使用します。
アプリは Sitecore ファーストの開発アプローチを使用できます。その場合はアプリ マニフェストを生成する必要はありません。Sitecore ファーストでの開発には、アプリを実行するため Sitecore インスタンスが必要です。
JSS アプリを最初に Sitecore にデプロイするときは、その後パターンを使用しない場合でも、コード ファーストを使用することをお勧めします。これにより、JSS アプリケーションのアイテムのセットアップにかかる時間を節約できます。
ルート データの定義
ルート データは、切断モードを実行中に、アプリによって処理されるルートを示すために使用されます。Placeholder コンポーネントと、それがレンダリングするその他すべてのコンポーネントでは、ルート データが特定のスキーマに準拠していることが期待されます。
切断された開発環境の場合、ルート データは通常、静的 YAML または JSON ファイルから取得されるか、単純な JavaScript ファイルから取得されます。接続された開発環境や本番の場合、ルート データは Sitecore レイアウト サービス への呼び出しを使用して取得されます (HTTP リクエスト経由、または統合モード SSR のインプロセス)。
サンプル データでは、YAML ファイルを使用してルート データを /data/routes で定義します。YAML の代わりに、好みに応じて JSON ファイルを使用することもできます (ファイル名を .json に変更し、YAML-to-JSON Converter でコンテンツを実行)。YAML は、コメント、マルチライン値、およびコンテンツ作成エクスペリエンスを向上させるその他の機能をサポートしています。
作業中に、フィールド付きのルート タイプを作成することも、コード ファーストの JSS サンプル アプリにルート プレースホルダーを追加することもできます。
切断モードでのデータのカスタマイズ
切断モードが起動すると、Sitecore の接続モードで実行できる JSS サービスのモック バージョンが作成されます。
これらのモック サービスは、切断モードにも同じカスタマイズを受け取るように、レイアウト サービスへのサーバー側のカスタマイズに応じてカスタマイズする必要がある場合があります。
切断モードのプロキシ
切断モードでは、ローカル HTTP サーバーを起動してモック API を実行します。これは scripts/disconnected-mode-proxy のサンプル アプリで定義されており、切断モードのデータを変更したい場合にカスタマイズされます。
既定の切断モードのプロキシには、データをカスタマイズする多数のオプションがあります。sitecore-jss-dev-tools パッケージは、すべてのオプションとそのシグネチャーをドキュメント化する DisconnectedLayoutServiceOptions TypeScript タイピングをエクスポートします。TypeScript アウェアなエディター (VS Code など) では、ファイルが TypeScript でなくてもメタデータを読み取れます。
const proxyOptions = {
appRoot: __dirname,
appName: config.appName,
watchPaths: ['../data'],
language: config.language,
port: 3042,
compilers: ['@babel/register'],
...
};コンテキストのカスタマイズ
Sitecore 側でレイアウト サービス コンテキストのカスタマイズを行う際は、切断モードにも同様のカスタマイズを適用することをお勧めします。これを行うには、customizeContext フックを使用します。
const proxyOptions = {
appRoot: __dirname,
customizeContext: (context, route, currentManifest, request, response) => {
return { myCustomContextProperty: 'helloworld', ...context };
},
...
};コンポーネント データのカスタマイズ
レンダリング コンテンツ リゾルバーまたは統合 GraphQL を使用して Sitecore でコンポーネント データをカスタマイズする際は、切断モードにも同様のカスタマイズを適用することをお勧めします。これを行うには、customizeRendering フックを使用します。
const proxyOptions = {
appRoot: __dirname,
customizeRendering: (rendering, rawManifestRendering) => {
// mock integrated GraphQL results for a specific component name
if (rendering.componentName === 'ContentBlock' && rendering.fields) {
rendering.fields = {
data: {
item: {
id: 'mock-graphql-result-id',
heading: {
jss: rendering.fields.heading,
}
}
}
};
return rendering;
}
// customize data based on a flag value added to the component definition on the route
// i.e. in YAML,
// - componentName: Whatever
// addCoolStuff: true
if (rawManifestRendering.dataSource.addCoolStuff) {
return {
coolStuff: [
'React',
'Vue',
],
...transformed,
};
}
// returning falsy will cause JSS to use the default value
return undefined; // is a function
},
...
};高度なカスタマイズ
サンプル アプリの切断されたサーバーは、既定で createDefaultDisconnectedServer() ヘルパー関数を使用します。この関数は基本的なカスタマイズ API を提供し、切断されたサーバーを機能させるいくつかのミドルウェアの登録をカプセル化します。既定の DisconnectedServerOptions ではサポートされていない高度なカスタマイズを行う場合は、関数を解凍してミドルウェアを自分で登録することもできます。