---
title: "Node.jsレンダリングエンジンの設定とデバッグ"
slug: "configuring-and-debugging-the-node-js-rendering-engine"
abstract: "JSSアプリの統合SSRの設定方法とオプションの概要"
---
# Node.jsレンダリングエンジンの設定とデバッグ

[統合モードで](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/start-a-jss-app-in-integrated-mode.html "Start a JSS app in integrated mode")動作する場合、Sitecore JSSアプリケーションはクライアントに提供される前にNode.jsインスタンスを使って[サーバーサイドレンダリング(SSR](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/server-side-rendering-jss-applications.html "Server-side rendering JSS applications"))されます。

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

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

## デフォルト構成

Node.jsのデフォルト構成は、[インスタンス固有の構成](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/configuring-and-debugging-the-node-js-rendering-engine.html#UUID-0401a9ff-97f9-7498-f1d0-80bd2484e2bc_N1633968019971 "Node.js instance configuration") が定義されていないすべてのNode.jsインスタンスに使われます。デフォルト構成は、インスタンス固有の構成によって継承・上書きされることもあります。ほとんどの場合、特に同じSitecoreインスタンスで複数のJSSアプリが動いている場合、デフォルト設定のオプションを変更することは一般的に推奨されません。代わりに、デフォルトを継承するインスタンス固有の構成を作成し、インスタンス固有の設定でオプションを修正することができます。

デフォルトのNode.js設定はSitecoreインスタンスのファイルApp\_Config/Sitecore/JavaScriptServices/Sitecore.JavaScriptServices.ViewEngine.Node.configで見つけることができます。このファイルには[Node.jsレンダリングエンジンの設定オプション](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/configuring-and-debugging-the-node-js-rendering-engine.html#UUID-0401a9ff-97f9-7498-f1d0-80bd2484e2bc_N1633968250740)が含まれています。例えば:

<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/config/<app-name>.configファイル内のSitecore設定ファイルに定義されます。例えば、サンプルのReactアプリ( JssReactWeb )は次のように登録されています。

<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レンダリング](urn:resource:component:665142)をレンダリングする場合、<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レンダリングはできるだけ少ないファイルにバンドルすることを *強くお勧め* します。

### 構成継承

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

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

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

-   属性inheritsがfalseであるWatchFileExtensions、サーバーはファイルの変更のみを監視.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デバッグガイド](https://nodejs.org/en/docs/guides/debugging-getting-started) をご参照ください。
> 
> VS Codeをコードエディタとして使う場合、[Node.jsインスタンスにデバッガをアタッチ](https://code.visualstudio.com/docs/nodejs/nodejs-debugging)するサポートが内蔵されています。

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

<var name="NODE\_ENV" value="production" />

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

InvocationTimeoutMs

60000

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