--- title: "ウォークスルー:ヘッドレスJSSプロキシを使ってサーバーサイドでJSSアプリのレンダリング" slug: "walkthrough--rendering-a-jss-app-server-side-using-the-headless-jss-proxy" abstract: "JSS React、Angular、またはVue.jsアプリのヘッドレスSSRにnode-headless-ssr-proxyサンプルアプリの使い方" --- # ウォークスルー:ヘッドレスJSSプロキシを使ってサーバーサイドでJSSアプリのレンダリング JSSは、Node.jsアプリケーションのホスティングをサポートするサービスを用いたヘッドレスサーバーサイドレンダリング(SSR)をサポートしています。JSSアプリは受信するHTTPリクエストを受け取り、それを書き換えてSitecoreサーバーへのレイアウトサービスのリクエストにプロキシします。レイアウトサービスからの返信はアプリのSSRインフラストラクチャに提供され、HTMLにレンダリングされます。最後に、得られたHTMLがクライアントに返されます。 Sitecoreセットアッププロセスを簡素化するための [サンプルアプリケーション](https://github.com/Sitecore/jss/tree/release/19.0.0/samples/node-headless-ssr-proxy) を提供しています。アプリケーションはNPMパッケージsitecore-jss-proxyを使用します。 > !注Node.jsはサードパーティ製の技術で、ヘッドレスモードの特定のユースケースに応じて設定する必要があります。 この技術を使うには、以下の条件が必要です: - [ヘッドレスサービス](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アプリケーションで、 [統合モードでサーバー側レンダリング](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")をサポートするJSSで構築されています。 このウォークスルーでは、以下の方法を説明します: - ヘッドレスJSSプロキシでJSSアプリケーションを担当します。 - ミドルウェアを使ってKeepAliveのエラーを回避しましょう。 - プロキシアプリから返されるヘッダーを処理します。 - メディアのURLからサーバーホストを除外してください。 ## ヘッドレスJSSプロキシでJSSアプリケーションをサービスします React、Angular、またはVue.jsアプリケーションのサーバー側レンダリングには、アプリケーションの本番ビルド出力を処理できるサーバー実装が必要です。 node-headless-ssr-proxyアプリケーションサンプルには、このシナリオをサポートするNode.jsサーバー実装が含まれています。 サンプルnode-headless-ssr-proxyを使ってサーバーサイドでJSS React、Angular、またはVue.jsアプリをレンダリングするには: 1. ターミナルでは、jss-proxy-ssrのようなアプリケーション名を提供するnode-headless-ssr-proxyサンプルに基づいてアプリケーションを作成するために、以下のJSSコマンドを実行してください。 jss create jss-proxy-ssr node-headless-ssr-proxy 2. SSRしたいJSSアプリのscjssconfig.jsonファイルで、layoutServiceHostオプションをjss-proxy-ssrプロキシのホスト名に設定し、直接Sitecoreに設定しないでください。 > !重要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")していなければ存在しないかもしれません。 ローカルテストでは、ホスト名はデフォルトでhttp://localhost:3000となります。本番環境では、プロキシアプリケーションを展開するアドレスとして使われます。例えばhttps://www.mysite.com。 > !注リバースプロキシ経由ですべてを実行したくない場合は、直接Sitecoreにリクエストを送ることも可能です。しかし、データAPIをプロキシすることで、Sitecoreインスタンスがファイアウォールの背後に存在できるという利点があります。 3. サーバーサイドでレンダリングしたいJSSアプリのルートディレクトリのターミナルで、次のスクリプトを実行して本番用JSSアプリを構築します。 jss build 4. 例えば、distやbuildのようなディレクトリを、SSR jss-proxy-ssrアプリのルートディレクトリ、例えばdist// ディレクトリにコピーします。 または、JSSアプリのscjssconfig.jsonファイルでinstancePathをSSRサンプルルートに変更してください。ターミナルでjss deploy filesコマンドを実行してビルド結果をプロキシアプリに展開します。 5. SSR jss-proxy-ssrアプリでconfig.jsファイルを検査し、以下のプロパティの値を指定するために(または環境変数を使う)ことができます。 - appName\- config.appName構成のpackage.jsonファイルに設定されたJSSアプリケーションの価値。 - bundlePath - ビルドプロセスの結果としてディレクトリをコピーした経路 server.bundle.js。例えば: './dist//server.bundle'。 - apiHost - Sitecoreインスタンスのホスト名。本番環境では必ずHTTPSを使用しなければなりません。 - apiKey\- [Sitecore SSC 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") - createViewBag()関数で、辞書サービスパスをJSSアプリの辞書サービスのURLに設定します。この関数は辞書キャッシュを可能にします。辞書を使っていない場合は、createViewBag()関数全体を削除できます。 6. プライベート署名済みの証明書を使って開発中のSitecoreインスタンスにプロキシする場合は、[Node.js用のSitecore CA証明書を設定し](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/walkthrough--configuring-sitecore-ca-certificates-for-node-js.html "Walkthrough: Configuring Sitecore CA certificates for Node.js")てください。 あるいは、SSRアプリケーションjss-proxy-ssrのconfig.jsファイルのproxyOptionsオブジェクトで、secure to falseオプションを設定することでSSL検証を完全に無効にすることも可能です。例えば: proxyOptions: { // NEVER EVER do this in production. It will make your SSL completely insecure. secure: false } 7. SSR jss-proxy-ssrアプリのルートディレクトリにあるターミナルで、SSRアプリケーションをテストするために以下のスクリプトを実行します。 npm run start ## ミドルウェアを使って、KeepAliveのエラーを回避しましょう 問題のため、[node-http-proxyに影響](https://github.com/chimurai/http-proxy-middleware/issues/472#issuecomment-695656240)する問題があり、Keep-Aliveエージェントでミドルウェアを追加しようとするとエラーが発生し、サーバーがクラッシュすることがあります。この問題はKeep-AliveでのproxyOptions.onProxyReq使用に影響します。 この問題を回避するために: - src/index.tsファイルで、プロキシ前にリクエストを修正してプロキシしたい値を含めるカスタムミドルウェアを実装し、next()関数を呼び出します。例えば: server.use((req, res, next) => { // add custom logic for changing the request next(); }); ## プロキシアプリが返すヘッダーの処理 プロキシアプリがどのヘッダーを返すかを明示的にコントロールできます。 返されたヘッダーを変更するには: - ヘッドレス・プロキシアプリケーションでは、src/config.tsファイル内でsetHeaders関数の本文を修正してプロキシアプリケーションから返されるヘッダーを制御します。例えば、関数のデフォルト実装ではcontent-security-policyヘッダーが削除されます: setHeaders: (req, serverRes, proxyRes) => { delete proxyRes.headers'content-security-policy'; } 関数の本体を修正して追加のヘッダーを削除することができます。 ## メディアURLからサーバーホストを除外する 例えば、http://siteco.reメディアフィールドやリッチテキストフィールド内の画像はソースURL http://sitecor.re/-/media/jss.jpg。なぜなら [レイアウトサービス](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/layout-service.html "Layout Service") はSitecoreサーバーURLを含む画像にURLを返し、Sitecoreサーバーを公開するからです。Sitecore しかし、ヘッドレスモードでリクエストをプロキシする場合、プロキシホストがhttp://custom-proxy.hostされている場合、望ましいURLはhttp://custom-proxy.host/-/media/jss.jpg 、できれば /-/media/jss.jpg。 ヘッドレスプロキシをSitecoreサーバーを公開せずに使うには、レイアウトサービスをSitecoreの設定パッチで設定できます。 Sitecoreにメディアリクエストの一部としてサーバーホストを含めないよう指示するには: 1. サーバー側でプロキシアプリケーションをレンダリングしたいJSSアプリケーションでは、例えばsitecore/config/Include/RemoveMediaURLs.config、以下の内容を含む構成パッチファイルを作成します。 false > !重要この構成は *ヘッドレス*JSSアプリを実行するサーバーに適しています。この構成を有効にすると、*接続モードで*JSSアプリを動かす際にイメージが壊れます。なぜなら、画像がローカルとして提供されるからです。この構成は、アクティブな開発中のサーバーには使用しないでください。 2. JSS CLIコマンドを実行して、構成をSitecoreインスタンスにデプロイします: jss deploy config > !注アプリケーションの作成方法によっては、この設定がすでに存在している場合もあります。以下のフォルダに含まれるファイルを確認してください: > > - /src/platform/App\_Config/Include、フルスタックコンテナベースソリューションに含まれるアプリに対して。 > > - /sitecore/config、スタンドアロンのJSSアプリとして。 >