1. サーバーサイドのレンダリングJSSアプリケーション

チュートリアル: ヘッドレスJSSプロキシを使用したJSSアプリのサーバー側のレンダリング

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

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

JSSは、Node.jsアプリケーションのホスティングをサポートする任意のサービスを使用して、ヘッドレス サーバーサイド レンダリング (SSR) をサポートします。JSSアプリは、SitecoreサーバーへのLayout Service要求に書き換えられ、プロキシ化された受信HTTP要求を受信します。その後、Layout Serviceからの応答は、HTMLにレンダリングするためにアプリのSSRインフラストラクチャに提供されます。最後に、結果のHTMLがクライアントに返されます。

Sitecoreには、セットアップ プロセスを簡素化するサンプル アプリケーションが用意されています。アプリケーションはNPMパッケージsitecore-jss-proxyを使用します。

メモ

Node.jsは、ヘッドレス モードの特定のユースケース シナリオに従って構成する必要があるサードパーティのテクノロジです。

この手法を使用するには、次のものが必要です。

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

  • ヘッドレスJSSプロキシを使用してJSSアプリケーションを提供します。

  • ミドルウェアを使用して、潜在的なKeepAliveエラーを回避します。

  • プロキシ アプリから返されたヘッダーを処理します。

  • メディアURLからサーバ ホストを除外します。

ヘッドレスJSSプロキシを使用してJSSアプリケーションを提供する

React、Angular、またはVue.jsアプリケーションをサーバー側でレンダリングするには、アプリケーションの本番ビルド出力を提供できるサーバー実装が必要です。 node-headless-ssr-proxyアプリケーションのサンプルには、このシナリオをサポートするNode.jsサーバーの実装が含まれています。

サンプルnode-headless-ssr-proxyを使用してJSS React、Angular、またはVue.jsアプリをサーバー側でレンダリングするには:

  1. ターミナルで、次のJSSコマンドを実行して、node-headless-ssr-proxyサンプルに基づいてアプリケーションを作成し、アプリケーションの名前 ( jss-proxy-ssrなど) を指定します。

      npx create-sitecore-jss node-headless-ssr-proxy --appName jss-proxy-ssr

  2. SSRを実行するJSSアプリのscjssconfig.jsonファイルで、layoutServiceHostオプションをSitecoreに直接設定するのではなく、jss-proxy-ssrプロキシのホスト名に設定します。

    大事な

    JSSアプリをSitecoreに接続したことがない場合、scjssconfig.jsonファイルが存在しない可能性があります。

    ローカル テストの場合、ホスト名のデフォルトはhttp://localhost:3000です。本番環境では、プロキシアプリケーションをデプロイするアドレスです ( https://www.mysite.comなど)。

    手記

    リバースプロキシを介してすべてを実行したくない場合は、Sitecoreに直接リクエストを送信することもできます。ただし、データAPIをプロキシすると、Sitecoreインスタンスをファイアウォールの内側に存在できるという利点があります。

  3. ターミナルで、サーバー側でレンダリングするJSSアプリのルート ディレクトリで、次のスクリプトを実行して、JSSアプリを運用環境用にビルドします。

    jss build

  4. 結果のディレクトリ ( distやbuildなど) をSSR jss-proxy-ssrアプリのルート ディレクトリ ( dist/<JSS app name>/ ディレクトリなど) にコピーします。

    または、JSSアプリのscjssconfig.jsonファイルで、instancePathをSSRサンプルのルートパスに変更します。ターミナルでjss deploy filesコマンドを実行して、ビルド結果をプロキシ アプリにデプロイします。

  5. SSR jss-proxy-ssrアプリで、config.jsファイルを調べて変更 (または環境変数を使用) して、次のプロパティの値を指定します。

    • appName- config.appName設定のpackage.jsonファイルで設定されたJSSアプリケーションの値。

    • bundlePath - ビルド プロセスの結果としてディレクトリをコピーしたパスserver.bundle.js.たとえば、'./dist/<JSS app name>/server.bundle'のようになります。

    • apiHost - Sitecoreインスタンスのホスト名。本番環境ではHTTPSを使用する必要があります。

    • apiKey - Sitecore SSC APIキー。

    • createViewBag() 関数で、ディクショナリ サービス パスをJSSアプリのディクショナリ サービスURLに設定します。この関数は、ディクショナリのキャッシュを有効にします。ディクショナリを使用していない場合は、createViewBag() 関数全体を削除できます。

  6. プライベート署名証明書を使用して開発用Sitecoreインスタンスにプロキシする場合は、Sitecore CA証明書をNode.jsに設定します。

    または、SSRアプリケーションjss-proxy-ssrのconfig.jsファイルにあるproxyOptionsオブジェクトで、secureをfalseオプションに設定することで、SSL検証を完全に無効にすることもできます。例えば：

      proxyOptions: {
    // NEVER EVER do this in production. It will make your SSL completely insecure.
    secure: false
  }

  7. ターミナルのSSR jss-proxy-ssrアプリのルート ディレクトリで、次のスクリプトを実行してSSRアプリケーションをテストします。

    npm run start

ミドルウェアを使用して、潜在的なKeepAliveエラーを回避する

node-http-proxyに影響を与える問題のため、Keep-Aliveエージェントを使用してミドルウェアを追加しようとすると、サーバーがクラッシュするエラーが発生する可能性があります。この問題は、Keep-Aliveを使用したproxyOptions.onProxyReqの使用に影響します。

この問題を回避するには、次のようにします。

  • src/index.tsファイルで、プロキシする値を含むようにプロキシする前に要求を変更するカスタム ミドルウェアを実装し、next() 関数を呼び出します。例えば：

    server.use((req, res, next) => {
  // add custom logic for changing the request
  next();
});

プロキシ アプリから返されるヘッダーの処理

プロキシアプリが返すヘッダーを明示的に制御できます。

返されるヘッダーを変更するには:

  • ヘッドレス プロキシ アプリケーションのsrc/config.tsファイルで、setHeaders関数の本体を変更して、プロキシ アプリケーションによって返されるヘッダーを制御します。たとえば、関数の既定の実装では、content-security-policyヘッダーが削除されます。

    setHeaders: (req, serverRes, proxyRes) => {
    delete proxyRes.headers['content-security-policy'];
}

    関数の本体を変更して、追加のヘッダーを削除できます。

メディアURLからサーバーホストを除外する

たとえば、http://siteco.reのSitecoreサーバーの場合、レイアウト サービスはSitecoreサーバーのURLを含む画像のURLを返し、Sitecoreサーバーを公開するため、メディア フィールドまたはリッチ テキスト フィールドの画像にはソースURL http://sitecor.re/-/media/jss.jpgがあります。

ただし、ヘッドレスモードでリクエストをプロキシする場合、プロキシホストがhttp://custom-proxy.hostの場合、目的のURLはhttp://custom-proxy.host/-/media/jss.jpg以上 /-/media/jss.jpgです。

Sitecoreサーバーを公開せずにヘッドレス プロキシを使用するには、Sitecore設定パッチを使用してレイアウト サービスを設定できます。

Sitecoreにサーバー ホストをメディア リクエストの一部として含めないように指示するには:

  1. プロキシアプリケーションを使用してサーバー側でレンダリングするJSSアプリケーションで、次の内容を含む設定パッチファイル( sitecore/config/Include/RemoveMediaURLs.configなど)を作成します。

    <configuration xmlns:patch="http://www.sitecore.net/xmlconfig/">
  <sitecore>
    <layoutService>
      <configurations>
        <config name="jss">
          <rendering>
            <renderingContentsResolver>
              <IncludeServerUrlInMediaUrls>false</IncludeServerUrlInMediaUrls>
            </renderingContentsResolver>
          </rendering>
        </config>
      </configurations>
    </layoutService>
  </sitecore>
</configuration>
    大事な

    この設定は、headless JSSアプリケーションを実行するサーバに適しています。この設定を有効にすると、connected modeでJSSアプリケーションを実行すると、イメージがローカルのように提供されるため、イメージが壊れます。この構成は、アクティブな開発で使用されるサーバーには使用しないでください。

  2. JSS CLIコマンドを実行して、設定をSitecoreインスタンスにデプロイします。

    jss deploy config
手記

アプリケーションの作成方法によっては、この構成がすでに存在している場合があります。次のフォルダに含まれるファイルを確認します。

  • /src/platform/App_Config/Include(フルスタックのコンテナベースのソリューションに含まれるアプリの場合)。

  • /sitecore/config(スタンドアロンのJSSアプリケーションの場合)。

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