--- title: "サーバーサイドではSitecore Experience Edgeエンドポイントを使ってJSSアプリをヘッドレスでレンダリングします" slug: "server-side-render-jss-apps-headlessly-using-a-sitecore-experience-edge-endpoint" abstract: "JSS React、Angular、Vue.jsアプリ向けにSSRをSitecore Experience Edgeエンドポイントで素早くセットアップGraphQL。" --- # サーバーサイドではSitecore Experience Edgeエンドポイントを使ってJSSアプリをヘッドレスでレンダリングします 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サービス](https://doc.sitecore.com/xp/ja/developers/hd/21/sitecore-headless-development/jss-graphql-api.html "JSS GraphQL API") を使ってJSSアプリケーション、レイアウト、辞書データをプロキシせずにレンダリングします。 > !重要Sitecore Experience Edgeエンドポイントを用いたSSRのサンプルは *実験的であり* 、Sitecoreによって公式にサポートされていません。 この技術を使うには、以下の条件が必要です: - [ヘッドレスサービス](https://doc.sitecore.com/xp/ja/developers/hd/21/sitecore-headless-development/sitecore-headless-services.html "Sitecore Headless Services")がインストールされたSitecoreインスタンスです。 - [Sitecore API鍵](https://doc.sitecore.com/xp/ja/developers/hd/21/sitecore-headless-development/create-a-sitecore-services-client-api-key.html "Create a Sitecore services client API key")だ。 - React、Vue.js、またはAngularアプリケーションで構築されたJSS: - [統合モードでサーバー側レンダリング](https://doc.sitecore.com/xp/ja/developers/hd/21/sitecore-headless-development/server-side-rendering-jss-apps-in-integrated-mode.html "Server-side rendering JSS apps in integrated mode")をサポートしています。 - [Experience Edge GraphQLスキーマ](https://doc.sitecore.com/xp/ja/developers/hd/21/sitecore-headless-development/the-experience-edge-schema.html "The Experience Edge schema")をサポートしています。 - SITECORE\_API\_KEYを提供します。GraphQLRequestClientはAPIキーを使ってSitecore XM EdgeスキーマとSitecore Experience Edgeの両方で認証用のsc\_apikeyヘッダーを設定します。 サンプルnode-headless-ssr-experience-edgeを使ってJSS React、Angular、またはVue.jsアプリをヘッドレスでSSRするには: 1. ターミナルで、node-headless-ssr-experience-edgeサンプルに基づいてアプリケーション名を付けるためのJSSコマンドを実行してください。例えば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アプリのscjssconfig.jsonファイルでinstancePathをSSRサンプルルートに変更してください。ターミナルでjss deploy filesコマンドを実行して、ビルド結果をSSRアプリにデプロイします。 > !重要scjssconfig.jsonファイルは、[JSSアプリをSitecoreに接続](https://doc.sitecore.com/xp/ja/developers/hd/21/sitecore-headless-development/walkthrough--connecting-a-jss-application-to-sitecore.html "Walkthrough: Connecting a JSS application to Sitecore")していなければ存在しないかもしれません。 4. 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キー](https://doc.sitecore.com/xp/ja/developers/hd/21/sitecore-headless-development/create-the-api-key.html "Create the API key")に設定。 - defaultLanguage - リクエストURLに言語が指定されていない場合、言語コンテキストを判別するためにJSSアプリで設定したデフォルトの言語に設定します。 - port - SSRサンプルの開始用。 5. 端末の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にプロビジョニングされました](https://doc.sitecore.com/xp/ja/developers/hd/21/sitecore-headless-development/create-the-api-key.html)。 SITECORE\_JSS\_SERVER\_BUNDLE JSSアプリの server.bundle.js ファイルへのパス。 SITECORE\_EXPERIENCE\_EDGE\_ENDPOINT Sitecore Experience Edge終点。 DEFAULT\_LANGUAGE SSRにしたいJSSアプリで設定されたデフォルトの言語。リクエストURLに言語が指定されていない場合、言語コンテキストを判別するために使われます。 PORT オプションです。サンプル開始時に使用したポート。