---
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アプリをヘッドレスでレンダリングします

Sitecore Experience Edge(GraphQL)エンドポイントを使ってJSSで構築したReact、Angular、またはVue.jsアプリケーションをサーバーサイドでレンダリング(SSR)したい場合、Sitecoreはセットアッププロセスを簡素化する [サンプルアプリケーション](https://github.com/Sitecore/jss/tree/release/19.0.0/samples/node-headless-ssr-experience-edge) を提供しています。

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

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

アプリケーションは[JSS GraphQLサービス](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/jss-graphql-api.html "JSS GraphQL API") を使ってJSSアプリケーション、レイアウト、辞書データをプロキシせずにレンダリングします。

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

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

-   [ヘッドレスサービス](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/sitecore-headless-services.html "Sitecore Headless Services")がインストールされたSitecoreインスタンスです。
-   [Sitecore API鍵](https://doc.sitecore.com/xp/ja/developers/hd/19/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/19/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/19/sitecore-headless-development/the-experience-edge-schema.html "The Experience Edge schema")をサポートしています。
        
        > !重要JSSアプリケーションは、Next.jsベースのものを除き、レガシー/非EdgeのGraphQLスキーマを使用しています。GraphQLのコンポーネントやクエリはExperience Edgeスキーマと互換性のあるものに更新する必要があります。
        
    -   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
    
    jss create jss-edge node-headless-ssr-experience-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アプリにデプロイします。
    
    > !重要scjssconfig.jsonファイルは、[JSSアプリをSitecoreに接続](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/walkthrough--connecting-a-jss-application-to-sitecore.html "Walkthrough: Connecting a JSS application to Sitecore")していなければ存在しないかもしれません。
    
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キー](https://doc.sitecore.com/xp/ja/developers/hd/19/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\_JSS\_APP\_NAME

JSSアプリの名前。レイアウトデータや辞書をGraphQLクエリで要求する際に使われ、 SITECORE\_JSS\_SERVER\_BUNDLE のデフォルト値は設定されていません。

SITECORE\_API\_KEY

[APIキーはSitecore Experience Edgeにプロビジョニングされました](https://doc.sitecore.com/xp/ja/developers/hd/19/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

オプションです。サンプル開始時に使われるポート。 [config.js](https://github.com/Sitecore/jss/blob/release/19.0.0/samples/node-headless-ssr-experience-edge/config.js)のデフォルトを参照してください。