--- title: "攻略:JSSアプリケーションをSitecoreに接続する方法" slug: "walkthrough--connecting-a-jss-application-to-sitecore" abstract: "Connect React、Angular、またはVue.js JSSアプリでコードファーストのアーティファクトをSitecoreし、初期展開を行うことができます" --- # 攻略:JSSアプリケーションをSitecoreに接続する方法 すべてのJSSアプリケーションは、ライフサイクルのどこかで切断モードからSitecore環境への展開へ移行しなければなりません。JSS CLIを使ってアプリをSitecoreにデプロイし、切断されたすべてのコンテンツやコンポーネントをSitecoreアイテムにインポートし、編集が可能です。 > !重要JSSで構築されたNext.js用アプリケーションは、[Next.jsの特徴](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/sitecore-jss-for-next-js-differences-from-jss-for-react,-angular,-and-vue-js.html "Sitecore JSS for Next.js differences from JSS for React, Angular, and Vue.js")により[異なる展開プロセス](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/walkthrough--connecting-a-code-first-jss-next-js-application-to-sitecore.html "Walkthrough: Connecting a code-first JSS Next.js application to Sitecore")を持ちます。 アプリがSitecoreに展開されると、[接続モードで](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/start-a-jss-app-in-connected-mode.html "Start a JSS app in connected mode")Sitecoreのライブデータを使ってアプリを開発できます。また、[統合モードで](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/start-a-jss-app-in-integrated-mode.html "Start a JSS app in integrated mode") はサーバーサイドでSitecoreがレンダリングし、コンテンツ作成者がアプリケーションのコンテンツやレイアウトを編集できます。 JSS Sitecoreにアプリケーションを接続・展開するには、ヘッド [レスサービスSitecore](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/sitecore-headless-services.html "Sitecore Headless Services") Sitecoreインスタンスにアクセスできる必要があります。 [JSS CLIをグローバルにインストール](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/install-the-jss-cli-globally.html "Install the JSS CLI globally") し、[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")ています。 このウォークスルーでは、以下の方法を説明します: - JSSアプリのサイト名とホスト名を設定してください。 - 接続情報を設定してください。 - アプリの設定をSitecoreに展開してください。 - アプリケーションをSitecoreに展開してください。 - アプリのデプロイを確認してください。 ## JSSアプリのサイト名とホスト名を設定してください [JSS CLI](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/sitecore-javascript-rendering-sdk-cli-tools.html "Sitecore JavaScript Rendering SDK CLI Tools")が提供するjss createコマンドでJSSサンプルを基に作成されたアプリケーションには、アプリケーションで作成された[Sitecore構成パッチ](https://doc.sitecore.com/xp/en/developers/102/platform-administration-and-architecture/use-a-patch-file-to-customize-the-sitecore-configuration.html)内に[Sitecoreサイト定義](https://doc.sitecore.com/xp/en/developers/102/platform-administration-and-architecture/configure-multiple-managed-websites.html)が含まれています。 JSSアプリケーションのルートフォルダで、設定パッチ /sitecore/config/.configを含むファイルを開き、hostName属性がサーバーが応答すべきホストヘッダーと一致しているか確認してください。SitecoreインストールのデフォルトサイトとしてJSSアプリを展開する場合、hostName属性を削除すれば、JSSアプリがどのホストにも応答するようにできます。 > !注開発用ホスト名のトップレベルドメイン(TLD)を提供します。ブラウザMicrosoft EdgeはTLDなしでホスト名を解決しません。例えば、ブラウザはhttp://jss.sitecoreを解決できますが、http://sitecoreはできません。 以下は、サイト名とホスト名を設定するためのサイト設定の例です: ローカルインスタンスを使用する際は、希望するホスト名をローカルホストにマッピングしなければなりません。 Windowsでホスト名をローカルホストにマッピングするには: 1. 管理者としてコードエディタを開きます。 2. エディターでファイルを開C:\\Windows\\System32\\drivers\\etc\\hosts。 3. マッピングを加えます。例えば: 127.0.0.1 myapp.siteco.re 4. ファイルを保存して閉じてください。 ホスト名エントリを追加した後、IISインスタンスにもバインディングとして追加してください: ![IIS Bindings](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/hd/19/sitecore-headless-development/images/iis-bindings.png) 複数のJSSアプリケーションを展開する予定がある場合は、Sitecoreで異なるホストやホスト名のバインディングを設定し、正しいサイトを解決する必要があります。 ## 接続情報の設定 接続の設定方法: - 端末でJSSコマンド jss setup を実行し、プロンプトに従ってください。プロンプトに従って以下の情報を提供します: - ウェブサイトフォルダ:これはSitecoreインスタンスへのルート物理パスで、設定ファイルやJSビルドアーティファクトのデプロイに使用されます。リモートインスタンスにはファイル共有パスで問題ありません。例えば: c:\\inetpub\\wwwroot\\MySitecore\\Website。ウェブサイトフォルダに直接アクセスできない場合は、インスタンスがリモートかどうか尋ねられたら *「いいえ* 」と答えてください。 - Sitecoreホスト名:これはSitecore設定パッチで以前設定された*JSSアプリのホスト名*/sitecore/config/.config。例えば、http://jssreactweb - SitecoreインポートサービスURL:これは*JSSアプリのインポートサービスURL*です。 *JSSアプリのホスト名* と /sitecore/api/jss/import: http://jssreactweb/sitecore/api/jss/importで構成されています。デフォルト値を使えるように空欄にするか、カスタムURLを指定することができます。 - APIのID:この[JSSアプリのSitecore APIキー](create-a-sitecore-services-client-api-key.md "Create a Sitecore services client API key") のアイテムIDを提供します。 - デプロイメントシークレット:これは、Sitecoreへのアプリアイテムのデプロイ認証を可能にする共有シークレットです。セットアッププロセスで生成されるランダムキーの使用を推奨します。自分でキーを選択する場合、シークレットは32文字以上のランダム生成文字列でなければなりません。 > !重要シークレットをソース管理にコミットしないでください。各環境ごとに固有のシークレットを使用し、本番シークレットへのアクセスを制限してください。CI環境では、jss setupパラメータ(\--help)を受け入れ、シークレットやその他のパラメータを変数から渡すことができます。デフォルトではシークレットは /scjssconfig.jsonと /sitecore/config/AppName.deploysecret.configに保存されますが、Gitをソース管理に使うとこれらは自動的に無視されます。 jss setupプロセスは、JSSアプリケーションの接続文字列を含む/scjssconfig.jsonファイルを生成します。 > !ヒントAPIリクエストに常に現在のホスト名を使う本番環境向けに環境に依存しないJSSアプリバンドルを構築するには、scjssconfig.jsonでlayoutServiceHost設定を空欄に設定してください。これは、1セットのビルドアーティファクトをCM+CDや [ヘッドレスプロキシ](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/walkthrough--rendering-a-jss-app-server-side-using-the-headless-jss-proxy.html "Walkthrough: Rendering a JSS app server-side using the headless JSS proxy")にデプロイしたい場合に役立ちます。この手法は、絶対URLを設定する必要がある [接続されたGraphQL](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/connected-graphql-in-jss-apps.html "Connected GraphQL in JSS apps")や [サーバーサイドレンダリング](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/server-side-rendering-jss-applications.html "Server-side rendering JSS applications")とは互換性がありません。 ## アプリの設定をSitecoreにデプロイしてください JSSアプリは、設定パッチを使ってSitecoreに登録され、そのパッチはSitecoreサーバーにデプロイされます。Sitecoreサーバーを設定する際には、[hostName属性を設定する](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/walkthrough--connecting-a-jss-application-to-sitecore.html#UUID-5fc26adc-a353-9ae0-9ec0-8977fe8582a8_section-idm456469661113283263080387184 "Configure the site name and hostname for the JSS app")際にこれらのパッチのいずれかをすでに編集しています。設定パッチがSitecoreサーバーに適用される前に、まずデプロイする必要があります。設定は自動(推奨)または手動でデプロイできます。 自動展開はJSSアプリからJSS CLIを使って設定パッチを直接展開します。 構成パッチを自動的に展開するには: - JSSアプリのワーキングディレクトリのターミナルで、次のコマンドを実行します: jss deploy config スクリプトはsitecore/configフォルダからSitecore App\_Config/Include/zzzフォルダに設定パッチファイルをコピーします。 自動設定展開により、Sitecore内でJSSアプリが設定され、公開なしでライブモードが有効化されます。開発者はパッチファイルを慎重に確認し、環境に合った設定が正しいか確認してください。例えば本番環境では、アプリケーションはライブモードで動作してはいけません。 > !注コマンドを実行するために使うユーザーアカウントが、/scjssconfig.jsonに設定されたSitecoreウェブサイトフォルダに書き込みの権限を持っていることを確認してください。Windowsでは、UACの昇格が含まれることがあります。 JSSアプリ設定が専任のSitecore開発者(またはDevOps)によってデプロイされる場合や、リモートインスタンスで作業する場合、JSSアプリ設定は手動でデプロイする必要がある場合があります。JSSアプリケーションからsitecore/config/\*.configパッチを取得し、zzzフォルダなどお好みの場所にあるApp\_Config/Includeフォルダにデプロイしてください。デプロイする前に、コンテンツの内容を必ず確認してください。 ## アプリケーションをSitecoreに展開する 前のステップが完了したので、JSSアプリをSitecoreに展開する準備が整いました。 デプロイ手順は、アプリ構築に使ったSDKやSitecoreインスタンスによって異なります。シナリオに合った手順を選択してください: - [ローカルの自己署名SSL証明書 *なしで* 、JSSアプリをローカルSitecoreインスタンスに展開](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/walkthrough--connecting-a-jss-application-to-sitecore.html#UUID-5fc26adc-a353-9ae0-9ec0-8977fe8582a8_section-idm4586200338800032630805916733 "Deploy JSS apps to a local Sitecore instance without local self-signed SSL certificates")します。 - [JSSアプリをローカルのSitecoreインスタンスに展開し *、*ローカルの自己署名SSL証明書](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/walkthrough--connecting-a-jss-application-to-sitecore.html#UUID-5fc26adc-a353-9ae0-9ec0-8977fe8582a8_section-idm4613160135646432686114728843 "Deploy JSS apps to a local Sitecore instance with local self-signed SSL certificates")を使用します。 - [リモートのSitecoreインスタンスにJSSアプリを展開](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/walkthrough--connecting-a-jss-application-to-sitecore.html#UUID-5fc26adc-a353-9ae0-9ec0-8977fe8582a8_section-idm4570944034403232630805625823 "Deploy a JSS app to a remote Sitecore instance")します。 ### ローカルの自己署名SSL証明書 *なしで*JSSアプリをローカルSitecoreインスタンスに展開する React、Angular、またはVue.js JSSアプリを、自己署名SSL証明書を使わないローカルSitecoreインスタンスに以下のコマンドで展開できます: jss deploy app --includeContent --includeDictionary コンテンツ、メディア、辞書の項目はデフォルトでデプロイプロセスでインストールされないため、\--includeContent --includeDictionaryを使用します。切断されたコンテンツが更新されている限り含めるのは適切ですが、[コンテンツ編集者がすでにアプリ用のコンテンツを書いている](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/code-first-development-workflow.html "Code-first development workflow")場合は不要です。コンテンツデータが失われる可能性があるためです。アプリケーションに追加言語のコンテンツがある場合は、コマンドjss deploy itemsを使ってその言語のアイテムを別にデプロイする必要があります。例えば、deploy items --language da-DK --includeContent --includeDictionary 。 > !ヒントjss deploy appには多くのオプションがあり、未指定の場合はすべて合理的なデフォルトに設定されています。すべてのオプションはjss deploy app --helpで確認できます。 このコマンドは以下の手順を実行し、必要に応じて独立して実行することも可能です。 - sitecore-import.jsonファイルのJSSコマンドjss manifestを呼び出して[アプリマニフェスト生成](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/generating-a-jss-app-manifest-file.html "Generating a JSS app manifest file")を起動します。 - このプロセスは、 jss package コマンドを呼び出してマニフェストパッケージを生成し、アプリマニフェストファイルおよび参照メディアファイルをパッケージ化することで続きます。 - 通常はビルドスクリプト( build)を呼び出して、本番用にアプリを構築します。 - インポート [サービスエンドポイント](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/import-service.html "Import Service") を使ってマニフェストパッケージをSitecoreに展開します。 jss deploy items --includeContent --includeDictionary - ビルドアーティファクトをコマンド jss deploy filesを使って設定された場所のSitecoreインスタンスにコピーします。 ### ローカルの自己署名SSL証明書 *を持つ* ローカルSitecoreインスタンスにJSSアプリを展開します ローカルのSitecoreインスタンスがローカルの自己署名SSL証明書を使用している場合: 1. JSSアプリディレクトリでターミナルを開いてください。 2. 偽の証明書の指紋を使って次のコマンドを実行してください: jss deploy app --includeContent --includeDictionary --acceptCertificate test > !注パラメータ \--acceptCertificateはサムプリント(証明書ピン)でSSL証明書をホワイトリスト化します。NodeはWindowsの信頼されたルート証明書を尊重しないため、SSL検証を完全に無効にすることなく、自己署名証明書を使用するローカルSitecoreインスタンスにアイテムを展開できます。 3. その結果得られたエラーメッセージから、証明書のサムプリントをコピーします: ![View of SSL certificate thumbprint](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/hd/19/sitecore-headless-development/images/certificate-error.png) 4. 再度デプロイコマンドを実行し、偽の証明書の指紋をコピーしたものに置き換えてください。例えば: jss deploy app --includeContent --includeDictionary --acceptCertificate CA:CD:3B:DB:19:D1:\`97:92\`:F9:\`80:91\`:FF:32:CC:F8:35:DC:F5:0B:01 ### リモートのSitecoreインスタンスにJSSアプリをデプロイする React、Angular、またはVue.js JSSアプリをリモートSitecoreインストールに展開するには: 1. JSSアプリ内でコマンドプロンプトやターミナルを開いてください。 2. 次のコマンドを実行してください: jss deploy items --includeContent --includeDictionary 3. package.jsonファイル(通常build)で定義されたビルドスクリプトを実行して、本番環境のビルドアーティファクトを作成します。 jss build 4. ビルドアーティファクトを、package.jsonファイルでsitecoreDistPathで定義されたSitecoreインスタンスの相対パスにデプロイします。例えば、$sitecore\\dist\\myappname. ## アプリのデプロイを確認しましょう 正しく設定・展開されたJSSアプリケーションは、Sitecoreのワークフローをサポートしなければなりません。以下を確認しなければなりません: - JSSアプリケーションのコンテンツはSitecoreコンテンツツリーに表示されます。JSSアプリのホストhttp://myapp.siteco.re/sitecore/を使ってSitecoreインスタンスにログインしてください。 */sitecore/Content/*のJSSアプリの項目が見えるはずです。 ![A JSS app in the Sitecore content tree](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/hd/19/sitecore-headless-development/images/jss-tree.png) - アプリケーションは、サイトに設定されたホスト名(例えばhttp://myapp.siteco.re/)にアクセスして[統合モードで](start-a-jss-app-in-integrated-mode.md "Start a JSS app in integrated mode")動作しなければなりません。統合モードで正しく動作すれば、ページのソースを見ると完全なHTMLでレンダリングされたアプリが表示されます。 ![View of the deployed JSS app in integrated mode](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/hd/19/sitecore-headless-development/images/jss-deployed.png) - アプリはSitecoreエディターで編集可能です。エクスペリエンスエディターで /Homeページを起動してみてください。例えば、ダッシュボードからhttp://myapp.siteco.re/?sc\_mode=editまたは起動してください。 ![JSS app in the Sitecore Experience Editor](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/hd/19/sitecore-headless-development/images/basic-app-editable-ee.png)