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

Version: 22.x

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

このページの翻訳は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では公式にサポートされていません。

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

ヘッドレスサービスがインストールされているSitecoreインスタンス。
Sitecore APIキー。
次のようなJSSで構築されたReact、Vue.js、またはAngularアプリケーション。
- 統合モードでのサーバー側レンダリングをサポートします。
- Experience Edge GraphQLスキーマをサポートします。
- SITECORE_API_KEYを提供します。GraphQLRequestClientはAPIキーを使用して、Sitecore XM EdgeスキーマとSitecore Experience Edgeの両方で認証のsc_apikeyヘッダーを設定します。

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

ターミナルで、次のJSSコマンドを実行して、node-headless-ssr-experience-edgeサンプルに基づいてアプリケーションを作成し、アプリケーションの名前 ( jss-edgeなど) を指定します。
RequestResponse
```
   npx create-sitecore-jss node-headless-ssr-experience-edge --appName jss-edge
```
別のターミナルで、SSRを実行するJSSアプリのルートディレクトリで、次のスクリプトを実行して、本番環境用のJSSアプリをビルドします。
RequestResponse
```
jss build
```
結果のディレクトリ ( distやbuildなど) をSSRアプリケーションjss-edgeのルートディレクトリ ( dist/<JSS app name>/ ディレクトリなど) にコピーします。

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

大事な

scjssconfig.jsonアプリをSitecoreに接続したことがない場合、JSSファイルは存在しない可能性があります。
SSR jss-edgeアプリで、config.tsファイルを調べて変更 (または環境変数を使用) して、次のプロパティの値を指定します。
- siteName(JSS 21.6以降の場合) またはappName(古いバージョンの場合) - config.appName設定のpackage.jsonファイルに設定されているSitecoreサイトまたはJSSアプリケーションの名前。
- bundlePath - ビルドプロセスの結果としてディレクトリをコピーしたパスserver.bundle.js.たとえば、'./dist/<your-jss-app-name>/server.bundle'のようになります。
- endpoint - Sitecore Experience Edgeエンドポイント。
- apiKey - Sitecore Experience EdgeにプロビジョニングされたAPIキーに設定します。
- defaultLanguage - リクエストURLに言語が指定されていない場合に、言語コンテキストの決定に使用されるJSSアプリで設定されたデフォルトの言語に設定します。
- port - SSRサンプルを開始します。
ターミナルのSSR jss-edgeアプリのルートで、次のスクリプトを実行してSSRアプリケーションをテストします。
RequestResponse
```
npm run start
```

環境変数

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

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

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

パラメーター	形容
SITECORE_SITE_NAME (JSS 21.6以降の場合) SITECORE_JSS_APP_NAME (古いバージョンの場合)	Sitecoreサイト名 / 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	随意。サンプルの開始時に使用されるポート。

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

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