1. レンダリングエンジンとJSS

Node.jsレンダリングエンジンの設定とデバッグ

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

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

統合モードで動作する場合、Sitecore JSSアプリケーションはクライアントに提供される前にNode.jsインスタンスを使ってサーバーサイドレンダリング(SSR)されます。

Sitecoreの設定ファイルを使えば、SSRに使われるNode.jsインスタンスを設定できます。

設定オプションにはNode.jsのデバッグを有効にし、Node.jsインスタンスに接続可能な任意のデバッガを使えるようにすることが含まれます。

デフォルト構成

Node.jsのデフォルト構成は、インスタンス固有の構成 が定義されていないすべてのNode.jsインスタンスに使われます。デフォルト構成は、インスタンス固有の構成によって継承・上書きされることもあります。ほとんどの場合、特に同じSitecoreインスタンスで複数のJSSアプリが動いている場合、デフォルト設定のオプションを変更することは一般的に推奨されません。代わりに、デフォルトを継承するインスタンス固有の構成を作成し、インスタンス固有の設定でオプションを修正することができます。

デフォルトのNode.js設定はSitecoreインスタンスのファイルApp_Config/Sitecore/JavaScriptServices/Sitecore.JavaScriptServices.ViewEngine.Node.configで見つけることができます。このファイルにはNode.jsレンダリングエンジンの設定オプションが含まれています。例えば:

false .js|.json|.html 60000

Node.jsインスタンス構成

インスタンス固有のNode.js構成により、デフォルトの設定オプションを継承し、特定のJSSアプリやJavaScriptレンダリングに合わせて修正できます。

インスタンス固有のNode.js構成では、要素にid属性を割り当て、オプションでノードの名前を参照するオプションのinherits属性を割り当ててオプションを継承します。

JSSアプリのインスタンス

JSSアプリの場合、id属性はNode.jsインスタンスに関連付けられるJSSアプリの名前であり、各JSSアプリは独自のNode.jsインスタンスを持っています。JSSアプリの名前は通常、sitecore/config/.configファイル内のSitecore設定ファイルに定義されます。例えば、サンプルのReactアプリ( JssReactWeb )は次のように登録されています。

したがって、インスタンス固有のNode.js構成は以下のようになります。 要素内で定義されたすべての設定オプションは、JssReactWebアプリ固有のものです。

true 9229 .vbs

JavaScriptレンダリングインスタンス

Node.jsを使って個々のJavaScriptレンダリングをレンダリングする場合、要素に割り当てられたid属性はレンダリングServer Script Pathフィールド内で指定された値です。例えば/dist/myComponents/components.bundle.js。つまり、Sitecoreサーバー上では、スクリプトパスごとに少なくとも1つのNode.jsインスタンスが存在するということです。

true 9230 .vbs

!重要各ルートやアイテムごとに複数のJavaScriptレンダリングがあり、それぞれ別々のNode.jsインスタンスを使うシナリオは容易に想像できます。したがって、ノードインスタンスが大量に作成されるのを防ぐために、個々のJavaScriptレンダリングはできるだけ少ないファイルにバンドルすることを 強くお勧め します。

構成継承

要素にinherits属性を割り当てると、インスタンス固有の構成は継承した構成からオプション値を引き継ぎます。

WatchFileExtensionsおよびEnvironmentVariablesの設定オプションでは、オプション定義自体にinherits属性を指定することで、そのオプションがどのように値を継承するかを決めることができます。

WatchFileExtensionsまたはEnvironmentVariables要素でinherits属性をtrueに設定すると、インスタンス固有のオプションと継承されたオプションが統合されます。

例えば、次のようなbase構成があると想像してください:

.js|.json

base構成を継承する構成を加えます。例えば:

.html

この構成により、my-jss-app構成の値は以下のようになります。

  • WatchFileExtensions、.js|.json|.html。

  • EnvironmentVariablesについて:

同じbase構成を考慮すると、inherits属性をWatchFileExtensionsまたはEnvironmentVariables要素でfalseに設定すると、インスタンス固有のオプションのみが使用されます。例えば:

.html

この構成により、以下の構成が得られます。

  • 属性inheritsがfalseであるWatchFileExtensions、サーバーはファイルの変更のみを監視.htmlためです。

  • なぜならEnvironmentVariablesの場合、属性inheritsはtrueだからです:

変数名やキーのいずれかが衝突した場合、サーバーはインスタンス固有の値を使用します。

例えば、構成my-jss-appがNODE_ENV変数の値をdevelopmentに設定し、base構成の中のproduction同じ変数が定義されている場合、その変数の得られる値は次のようになります。

デバッグ

デフォルトではNode.jsデバッグは無効です。デバッグを有効にするには、Node.jsインスタンスの設定オプションを設定する必要があります。

Sitecore JSSが起動したNode.jsインスタンスはデバッグが有効時にスイッチ --inspectを使用します。

インスタンスでNode.jsデバッグが有効になった場合、デバッガクライアントを接続できます。

!注Node.jsデバッグの詳細については、Node.jsデバッグガイド をご参照ください。

VS Codeをコードエディタとして使う場合、Node.jsインスタンスにデバッガをアタッチするサポートが内蔵されています。

Node.jsのデバッグプロセスを設定するには、以下の設定オプションを使用できます:

オプション名

デフォルト値

概要

LaunchWithDebugging

false

trueの場合、Node.jsインスタンスはnode-inspectorからのV8デバッガ接続の受信を受け入れます。ノードプロセスはinspectフラグで呼び出されます。

DebuggingPort

null

LaunchWithDebuggingがtrueの場合、Node.jsインスタンスはこのポート上のV8デバッガ接続をリスニングします。

>[!重要]
>ノードインスタンスは固有のデバッグポートを持つ 必要があります 。同じデバッガポートを持つ複数のノードインスタンスを作成しようとすると、それらのノードプロセスは終了します。

WatchFileExtensions

.js, .json, .html

設定すると、プロジェクト内の一致するファイルがディスク上で変更されるとNode.jsインスタンスが再起動します。

> [!注]
> これはIISプロセスをリサイクルせず、ブラウザでアプリを再読み込むこともしません。代わりに、SSRに使用されたNode.jsインスタンスが再起動され、キャッシュがクリアされたり、Node.jsプロセスが保持しているリソースロックが解除されます。

EnvironmentVariables

起動時にNode.jsインスタンスに渡される環境変数。

InvocationTimeoutMs

60000

.NETコードがNode.js RPC呼び出しの返還を待つ最大時間(ミリ秒)を指定します。

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