チュートリアル: JSSアプリのHTTPレンダリングエンジンの構成

Version: 20.x

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

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

HTTPレンダリングエンジン (レンダリングホスト) には、JSSアプリのクライアント側とサーバー側の構成が必要です。次の手順は、React、Angular、およびVue.jsサンプルアプリケーションに基づくJSSアプリケーションに適用されます。Next.jsサンプルに基づくJSSアプリケーションは、HTTPレンダリングエンジンを使用するように事前設定されています。

このチュートリアルでは、次の方法について説明します。

レンダリングエンジンをサーバー側で設定します。
レンダリングエンジンをクライアント側で設定します。

レンダリングエンジンのサーバー側の設定

サーバー上でHTTPレンダリングエンジンを設定するには、絶対設定を選択するか、レンダリングホストURLを動的に設定するかを選択できます。

固定レンダリングホストURLを設定するには、JSSアプリの設定を更新する必要があります。

固定レンダリングホストURLを設定するには:

Sitecore設定ファイル ( /sitecore/config/JssReactWeb.configなど) で、<app/> 設定でserverSideRenderingEngine属性をhttpに設定します。
serverSideRenderingEngineEndpointUrl属性をレンダリングホストのURLを指すように設定します。たとえば、http://localhost:5000.

または、レンダリングホストURLを動的に設定するには、次のようにします。

HTTPレンダリングエンジン設定ファイル ( \App_Config\Sitecore\JavaScriptServices\Sitecore.JavaScriptServices.ViewEngine.Http.configなど) で、プロパティのAllowOptionsOverrideの値をtrueに設定します。
RequestResponse
```
<AllowOptionsOverride>true</AllowOptionsOverride>
```
sc_httprenderengineurlクエリ文字列パラメータ (http://mysitecore.local/?&sc_httprenderengineurl=https://2ea61a8f80b9.ngrok.io/api/editing/renderなど) を使用してページにアクセスします。

レンダリングエンジンのクライアント側の設定

JSSアプリケーションをサーバー側でレンダリングできるようにするには、クライアント側でもHTTPレンダリングエンジンを構成する必要があります。

メモ

この手順は、Reactアプリケーションに適用されます。Vue.jsおよびAngularアプリケーションの場合は、レンダリングホストビルドスクリプトを実装する必要があります。

レンダリングホストを実行するには:

package.jsonファイルのconfigセクションで、レンダリングホストのURLを指すようにtunnelUrl設定を更新します。レンダリングホストは、ローカルURLまたはリモートURLにすることができます。たとえば、ローカルテストの場合は、次のように設定できますhttp://localhost:5000
RequestResponse
```
  "config": {    
    "appName": "JssReactWeb",    
    "rootPlaceholders": [      
      "jss-main"    
    ],    
    "sitecoreDistPath": "/dist/JssReactWeb",    
    "sitecoreConfigPath": "/App_Config/Include/zzz",    
    "graphQLEndpointPath": "/sitecore/api/graph/edge",    
    "language": "en",    
    "tunnelUrl": "http://localhost:5000"  
  },
```
ビルドプロセスでは、tunnelUrl値を使用して、すべての相対的な静的アセットURL (画像、JavaScript、CSSファイル) を絶対URLに変換します。静的アセットはSitecoreサーバーに表示されないため、これにより、リモートSitecoreインスタンスがそれらを正しくレンダリングすることが保証されます。
レンダリングホスト用のアプリをビルドし、/buildフォルダーに配置します。ターミナルで、次のスクリプトを実行します。
RequestResponse
```
npm run build:rendering-host
```
このビルドプロセスでは、既定のbuildコマンドと同じアクションを実行しますが、tunnelUrl設定に基づいて、相対的な静的アセットURLを絶対URLに置き換えます。
ngrokアカウントに登録し、認証トークンを取得します。

手記

ngrokアカウントの登録は、悪用を防ぐためのサービスの変更のため、必要な手順です。認証トークンがないと、HTTPレンダリングエンジンを使用してレンダリングホストインスタンスを開始できず、ngrokエラー 9018が発生します。
scripts/http-renderer.jsファイルで、認証トークンをstartRenderHostTunnel関数のオプションに追加します。
RequestResponse
```
startRenderHostTunnel('localhost', { port: 5000, authtoken: "<your-ngrok-authtoken>" })
```
レンダリングホストインスタンスをhttp://localhost:5000 (既定) で実行し、ngrokトンネルを開始します。ターミナルで、次のスクリプトを実行します。
RequestResponse
```
npm run start:rendering-host
```
トンネルは、パブリックHTTPエンドポイントを介してローカルレンダリングホストを外部に公開します。これは、テスト目的でリモートSitecoreインスタンスのエクスペリエンスエディターでJSSアプリをレンダリングする場合に便利です。

何かフィードバックはありますか?

この記事を改善するための提案がある場合は、

チュートリアル: JSSアプリのHTTPレンダリング エンジンの構成

レンダリングエンジンのサーバー側の設定

レンダリングエンジンのクライアント側の設定

チュートリアル: JSSアプリのHTTPレンダリングエンジンの構成