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

攻略

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

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

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

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

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

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

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

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

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

  1. 例えばSitecore設定ファイルでは、構成/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に設定してください:

    true

  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

    このビルドプロセスはデフォルトのbuildコマンドと同じ操作を行いますが、相対的な静的アセットURLをtunnelUrl設定に基づく絶対的なURLに置き換えます。

  3. ngrokアカウントに登録し、認証トークンを取得してください。

    !注ngrokアカウントの登録は、悪用を防ぐためにサービスの変更により必須のステップです。認証トークンがなければ、HTTPレンダリングエンジンを使ってレンダリングホストインスタンスを起動できず、ngrokエラー9018が発生します。

  4. scripts/http-renderer.jsファイル内で、startRenderHostTunnel関数のオプションに認証トークンを追加します:

    startRenderHostTunnel('localhost', { port: 5000, authtoken: "" })

  5. デフォルトでhttp://localhost:5000にレンダリングホストインスタンスを実行し、[ngrokトンネル](https://ngrok.com/product/secure-tunnels)を開始します。ターミナルで以下のスクリプトを実行します:

    npm run start

    トンネルは、ローカルレンダリングホストを公開HTTPエンドポイントを通じて外部に公開します。これは、リモートSitecoreインスタンスのExperience EditorでJSSアプリをレンダリングする際に、テスト目的で役立ちます。

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