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

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

Version:

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

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

React、Angular、またはVue.jsアプリケーションをSitecore Experience Edge(GraphQL)エンドポイントでJSSでサーバーサイドレンダリング(SSR)したい場合、Sitecoreはセットアッププロセスを簡素化するためのサンプルアプリケーションを提供しています。

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

!注Node.jsとExpressは、ヘッドレスモードの特定のユースケースシナリオに応じて設定しなければならないサードパーティ技術です。

アプリケーションはJSS GraphQLサービスを使ってJSSアプリケーション、レイアウト、辞書データをプロキシせずにレンダリングします。

!重要Sitecore Experience Edgeエンドポイントを用いたSSRのサンプルは 実験的であり 、Sitecoreによって公式にサポートされていません。

この技術を使うには、以下の条件が必要です:

ヘッドレスサービスがインストールされたSitecoreインスタンスです。
Sitecore API鍵だ。
React、Vue.js、またはAngularアプリケーションで構築されたJSS:
- 統合モードでサーバー側レンダリングをサポートしています。
- 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するには:

ターミナルで、node-headless-ssr-experience-edgeサンプルに基づいてアプリケーション名を付けるためのJSSコマンドを実行してください。例えばjss-edge

npx create-sitecore-jss node-headless-ssr-experience-edge --appName jss-edge
別のターミナル、SSRしたいJSSアプリのルートディレクトリで、次のスクリプトを実行して本番用JSSアプリを構築します。

jss build
例えば、distやbuildなどのディレクトリを、SSRアプリのルートディレクトリにコピーします。 jss-edge、例えばdist// ディレクトリ内のディレクトリです。

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

!重要scjssconfig.jsonファイルは、JSSアプリをSitecoreに接続していなければ存在しないかもしれません。
SSR jss-edgeアプリでconfig.tsファイルを検査し、以下のプロパティの値を指定するために(または環境変数を使う)ことができます。
- siteName(JSS 21.6以降の場合)またはappName(古いバージョンの場合)- config.appName設定のpackage.jsonファイルに設定されているSitecoreサイト名またはJSSアプリケーション名。
- bundlePath - ビルドプロセスの結果としてディレクトリをコピーした経路 server.bundle.js。例えば: './dist//server.bundle'。
- endpoint - Sitecore Experience Edge終点。
- apiKey - Sitecore Experience EdgeでプロビジョニングされたAPIキーに設定。
- defaultLanguage - リクエストURLに言語が指定されていない場合、言語コンテキストを判別するためにJSSアプリで設定したデフォルトの言語に設定します。
- port - SSRサンプルの開始用。
端末のSSR jss-edgeアプリのルート上で、SSRアプリケーションをテストするために以下のスクリプトを実行します。

npm run start

環境変数

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

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

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

APIキーはSitecore Experience Edgeにプロビジョニングされました。

SITECORE_JSS_SERVER_BUNDLE

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

SITECORE_EXPERIENCE_EDGE_ENDPOINT

Sitecore Experience Edge終点。

DEFAULT_LANGUAGE

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

PORT

オプションです。サンプル開始時に使用したポート。

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