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

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

Version:

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

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

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

SSRに使用するNode.jsインスタンスは、Sitecore設定ファイルを使用して設定できます。

構成オプションには、Node.jsデバッグの有効化が含まれ、Node.jsインスタンスにアタッチできる任意のデバッガーを使用できます。

デフォルト設定

デフォルトのNode.js設定は、インスタンス固有の設定が定義されていないすべてのNode.jsインスタンスに使用されます。デフォルトの設定は、インスタンス固有の設定によって継承および上書きすることもできます。ほとんどの場合、特に同じSitecoreインスタンスで複数のJSSアプリを実行している場合、通常、デフォルト設定のオプションを変更することはお勧めしません。代わりに、デフォルトを継承するインスタンス固有の設定を作成し、インスタンス固有の設定のオプションを変更できます。

SitecoreインスタンスのデフォルトのNode.js設定は、ファイルApp_Config/Sitecore/JavaScriptServices/Sitecore.JavaScriptServices.ViewEngine.Node.configにあります。このファイルには、Node.jsレンダリングエンジンの設定オプションが含まれています。例えば：

<javaScriptServices>
  <renderEngines>
    <renderEngine name="nodejs">
      <instance id="defaults">
        <!--
          If true, the Node.js instance will accept incoming V8 debugger connections (e.g., from node-inspector).
          The node process is invoked with the "inspect" flag.
        -->
        <LaunchWithDebugging>false</LaunchWithDebugging>
        <!--
          If "launchWithDebugging" is true, the Node.js instance will listen for V8 debugger connections on this port.
          IMPORTANT: Node instances _must_ have unique debugging ports. If you try to create multiple node instances with the same debugger port, those node processes will exit.
          Therefore, it is recommended that you create <instance /> configurations for individual JSS apps / renderings if you wish to use remote SSR debugging features.
        -->
        <DebuggingPort></DebuggingPort>
        <!-- If set, the Node.js instance should restart when any matching file on disk within your project changes. -->
        <WatchFileExtensions>.js|.json|.html</WatchFileExtensions>
        <!--
          If set, starts the Node.js instance with the specified environment variables.
        -->
        <EnvironmentVariables>
          <var name="NODE_ENV" value="production" />
        </EnvironmentVariables>
        <!-- Specifies the maximum duration, in milliseconds, that your .NET code should wait for Node.js RPC calls to return. -->
        <InvocationTimeoutMs>60000</InvocationTimeoutMs>
      </instance>
    </renderEngine>
  </renderEngines>
</javaScriptServices>

Node.jsインスタンスの設定

インスタンス固有のNode.js設定では、デフォルトの設定オプションを継承し、特定のJSSアプリケーションやJavaScriptレンダリング用に変更できます。

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

JSSアプリケーション・インスタンス

JSSアプリケーションの場合、id属性はNode.jsインスタンスが関連付けられているJSSアプリケーションの名前で、各JSSアプリケーションには独自のNode.jsインスタンスがあります。JSSアプリの名前は、アプリのSitecore設定ファイル (通常はsitecore/config/<app-name>.configファイル) で定義されます。たとえば、JssReactWebという名前のサンプルのReactアプリは次のように登録されています。

<javaScriptServices>
  <apps>
    <!-- note: other app attributes omitted for brevity -->
    <app name="JssReactWeb" inherits="defaults" />
  </apps>
</javaScriptServices>

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

<javaScriptServices>
  <renderEngines>
    <renderEngine name="nodejs">
      <instance id="JssReactWeb" inherits="defaults">
        <LaunchWithDebugging>true</LaunchWithDebugging>
        <DebuggingPort>9229</DebuggingPort>
        <WatchFileExtensions inherits="true">
          <ext>.vbs</ext>
        </WatchFileExtensions>
        <EnvironmentVariables inherits="true">
          <var name="MY_VAR" value="some value" />
        </EnvironmentVariables>
      </instance>
    </renderEngine>
  </renderEngines>
</javaScriptServices>

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

Node.jsを使用して個々のJavaScriptレンダリングをレンダリングする場合、<instance /> 要素に割り当てられるid属性は、レンダリングServer Script Pathフィールド内で指定される値 (/dist/myComponents/components.bundle.jsなど) です。つまり、Sitecoreサーバーには、スクリプトパスごとに少なくとも1つのNode.jsインスタンスがあります。

<instance id="/dist/myComponents/components.bundle.js" inherits="defaults">
  <LaunchWithDebugging>true</LaunchWithDebugging>
  <DebuggingPort>9230</DebuggingPort>
  <WatchFileExtensions inherits="true">
    <ext>.vbs</ext>
  </WatchFileExtensions>
  <EnvironmentVariables inherits="true">
    <var name="MY_VAR" value="some value" />
  </EnvironmentVariables>
</instance>

大事な

ルート/アイテムごとに複数のJavaScriptレンダリングがあり、それぞれが個別のNode.jsインスタンスを使用するシナリオは容易に想像できます。そのため、個々のJavaScriptレンダリングは、膨大な数のノードインスタンスが作成されるのを防ぐために、できるだけ少ないファイルにバンドルstrongly recommend 。

構成の継承

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

WatchFileExtensionsおよびEnvironmentVariables構成オプションの場合、オプション定義自体にinherits属性を指定して、そのオプションが値を継承する方法を決定することもできます。

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

たとえば、次のbase構成があるとします。

<instance id="base">
  <WatchFileExtensions>
    <ext>.js|.json</ext>
  </WatchFileExtensions>
  <EnvironmentVariables>
    <var name="NODE_ENV" value="production" />
  </EnvironmentVariables>
</instance>

base設定を継承する設定を追加します。例えば：

<instance id="my-jss-app" inherits="base">
  <WatchFileExtensions inherits="true">
    <ext>.html</ext>
  </WatchFileExtensions>
  <EnvironmentVariables>
    <var name="MY_VAR" value="some value" />
  </EnvironmentVariables>
</instance>

この設定により、my-jss-app設定の値は次のものになります。

WatchFileExtensionsの場合、.js|.json|.html。

EnvironmentVariablesの場合:

<var name="NODE_ENV" value="production" />
<var name="MY_VAR" value="some value" />

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

<instance id="my-jss-app" inherits="base">
  <WatchFileExtensions inherits="false">
    <ext>.html</ext>
  </WatchFileExtensions>
  <EnvironmentVariables>
    <var name="MY_VAR" value="some value" />
  </EnvironmentVariables>
</instance>

この設定により、次の設定になります。

WatchFileExtensions属性inheritsがfalseであるため、サーバは.htmlファイルの変更のみを監視します。
EnvironmentVariables属性inheritsはtrueであるため、次のようになります。
<var name="NODE_ENV" value="production" /> <var name="MY_VAR" value="some value" />

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

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

<var name="NODE_ENV" value="development" />

デバッグ

デフォルトでは、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.ノード・プロセスは、inspectフラグを使用して呼び出されます。
DebuggingPort	null	LaunchWithDebuggingがtrueの場合、Node.jsインスタンスはこのポートでV8デバッガー接続をリッスンします。大事なノードインスタンスmust一意のデバッグポートを持つことができます。同じデバッガーポートで複数のノードインスタンスを作成しようとすると、それらのノードプロセスは終了します。
WatchFileExtensions	.js, .json, .html	設定されている場合、プロジェクト内の一致するファイルがディスク上で変更されたときに、Node.jsインスタンスが再起動します。手記これにより、IISプロセスがリサイクルされたり、ブラウザーでアプリが再読み込みされたりすることはありません。代わりに、SSRに使用されたNode.jsインスタンスが再起動され、キャッシュがクリアされるか、Node.jsプロセスによって保持されているリソースロックが解除されます。
EnvironmentVariables	<var name="NODE_ENV" value="production" />	Node.jsインスタンスに渡される環境変数はon startupです。
InvocationTimeoutMs	60000	Node.js RPC呼び出しが返されるまで .NETコードが待機する必要がある最大期間をミリ秒単位で指定します。

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