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

Sitecore Experience Edgeエンドポイントを使用して、サーバーサイドでJSSアプリをヘッドレスでレンダリングします

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

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

Sitecore Experience Edge (GraphQL) エンドポイントを使用してJSSで構築されたReact、Angular、またはVue.jsアプリケーションをサーバー側でレンダリング (SSR) する場合、Sitecoreにはセットアップ プロセスを簡素化するサンプル アプリケーションが用意されています。

Edgeエンドポイントを使用するSSRのサンプル アプリケーションnode-headless-ssr-experience-edgeには、エンドポイントをクエリするためのNode.jsおよびExpressサーバーとサービスが事前構成されています。

メモ

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

このアプリケーションは、リクエストをプロキシせずに 、JSS GraphQLサービス を使用してJSSアプリケーション、クエリ、レイアウト、およびディクショナリデータをレンダリングします。

大事な

Sitecore Experience Edgeエンドポイントを使用したSSRのサンプルはexperimentalされており、Sitecoreでは公式にサポートされていません。

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

サンプルnode-headless-ssr-experience-edgeを使用してJSS React、Angular、またはVue.jsアプリをヘッドレスでSSRするには:

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

       npx create-sitecore-jss node-headless-ssr-experience-edge --appName jss-edge

  2. 別のターミナルで、SSRを実行するJSSアプリのルート ディレクトリで、次のスクリプトを実行して、JSSアプリを運用環境用にビルドします。

    jss build

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

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

    大事な

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

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

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

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

    • endpoint - Sitecore Experience Edgeエンドポイント。

    • apiKey - Sitecore Experience EdgeでプロビジョニングされたAPIキーに設定します。

    • defaultLanguage - リクエストURLに言語が指定されていない場合に、言語コンテキストの決定に使用されるJSSアプリで設定されたデフォルトの言語に設定します。

    • port - SSRサンプルを開始します。

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

    npm run start

環境変数

環境変数を設定してSSRアプリケーションを構成するには、コンテナなどの環境config.jsファイルを変更する代わりに、SSRアプリケーションを構成できます。

ホスティング環境、コンテナ環境、またはSSRアプリケーションで環境変数を設定するには、config.jsファイル内のdotenvJavaなどのライブラリを使用して .envファイルから値を読み取ることができます。

Sitecore Experience Edgeエンドポイントを使用してSSRのJSSアプリの環境を設定するには、次の変数を使用します。

パラメーター

形容

SITECORE_JSS_APP_NAME

JSSアプリケーションの名前。GraphQLクエリを使用してレイアウト データとディクショナリを要求するときに使用され、既定値のSITECORE_JSS_SERVER_BUNDLEは設定されていません。

SITECORE_API_KEY

Sitecore Experience EdgeでプロビジョニングされたAPIキー。

SITECORE_JSS_SERVER_BUNDLE

JSSアプリのserver.bundle.jsファイルへのパス。

SITECORE_EXPERIENCE_EDGE_ENDPOINT

Sitecore Experience Edgeエンドポイント。

DEFAULT_LANGUAGE

SSRにしたいJSSアプリで設定されているデフォルトの言語。要求URLで言語が指定されていない場合に、言語コンテキストを判別するために使用されます。

PORT

随意。サンプルの開始時に使用されるポート。

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