---
title: "攻略:JSSアプリのHTTPレンダリングエンジンの設定"
slug: "walkthrough--configuring-the-http-rendering-engine-for-your-jss-app"
abstract: "JSSアプリ用のHTTPレンダリングエンジンを設定してください"
---
# 攻略:JSSアプリのHTTPレンダリングエンジンの設定

[HTTPレンダリングエンジン](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/http-rendering-engine.html "HTTP rendering engine")、またはレンダリングホストは、JSSアプリのクライアント側およびサーバー側の設定を必要とします。以下の手順は、React、Angular、Vue.jsサンプルアプリケーションに基づくJSSアプリケーションに適用されます。Next.jsサンプルに基づくJSSアプリケーションはHTTPレンダリングエンジンを使用するよう事前設定されています。

このウォークスルーでは、以下の方法を説明します:

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

## レンダリングエンジンをサーバー側で設定する

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

固定レンダリングホストURLを設定するには、[JSSアプリの設定](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/jss-app-configuration-api.html "JSS App Configuration API")を更新する必要があります。

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

1.  例えばSitecore設定ファイルでは、<app/>構成/sitecore/config/JssReactWeb.config、serverSideRenderingEngine属性をhttpに設定します。
2.  serverSideRenderingEngineEndpointUrl属性をレンダリングホストのURLに設定します。例えば、http://localhost:5000.

あるいは、レンダリングホストのURLを動的に設定する方法は以下の通りです:

1.  例えば、HTTPレンダリングエンジンの設定ファイル \\App\_Config\\Sitecore\\JavaScriptServices\\Sitecore.JavaScriptServices.ViewEngine.Http.configでプロパティAllowOptionsOverrideの値をtrueに設定してください:
    
    <AllowOptionsOverride>true</AllowOptionsOverride>
    
2.  sc\_httprenderengineurlクエリ文字列パラメータ(例えば、http://mysitecore.local/?&sc\_httprenderengineurl=https://2ea61a8f80b9.ngrok.io/api/editing/render)を使ってページにアクセスする
    

## レンダリングエンジンをクライアント側で設定する

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

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

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

1.  package.jsonファイルのconfigセクションで、tunnelUrl設定をレンダリングホストのURLに更新してください。レンダリングホストはローカルURLでもリモートURLでも構いません。例えば、ローカルテストではhttp://localhost:5000:
    
    "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値を用いて、画像、JavaScript、CSSファイルなどの相対的な静的アセットURL(画像、、CSSファイル)をすべて絶対的なURLに変換します。静的アセットはSitecoreサーバー上に表示されないため、リモートSitecoreインスタンスが正しくレンダリングされることが保証されます。
    
2.  レンダリングホスト用のアプリを作成し、*/build*フォルダに入れます。ターミナルで以下のスクリプトを実行します。
    
    npm run build:rendering-host
    
    このビルドプロセスはデフォルトのbuildコマンドと同じ操作を行いますが、相対的な静的アセットURLをtunnelUrl設定に基づく絶対的なURLに置き換えます。
    
3.  [ngrok](https://ngrok.com/)アカウントに登録し、認証トークンを取得してください。
    
    > !注ngrokアカウントの登録は、悪用を防ぐためにサービスの変更により必須のステップです。認証トークンがなければ、HTTPレンダリングエンジンを使ってレンダリングホストインスタンスを起動できず、[ngrokエラー9018](https://ngrok.com/docs/errors/err_ngrok_9018)が発生します。
    
4.  scripts/http-renderer.jsファイル内で、startRenderHostTunnel関数のオプションに認証トークンを追加します:
    
    startRenderHostTunnel('localhost', { port: 5000, authtoken: "<your-ngrok-authtoken>" })
    
5.  デフォルトでhttp://localhost:5000にレンダリングホストインスタンスを実行し、[ngrokトンネル](https://ngrok.com/product/secure-tunnels)を開始します。ターミナルで以下のスクリプトを実行します:
    
    npm run start:rendering-host
    
    トンネルは、ローカルレンダリングホストを公開HTTPエンドポイントを通じて外部に公開します。これは、リモートSitecoreインスタンスのExperience EditorでJSSアプリをレンダリングする際に、テスト目的で役立ちます。