--- title: "ウォークスルー:コード優先のJSS Next.jsアプリケーションをSitecoreに接続する方法" slug: "walkthrough--connecting-a-code-first-jss-next-js-application-to-sitecore" abstract: "Connect JSS初期化器で作成されたJSS Next.jsアプリで、コードファーストの成果物のSitecoreと初期展開を行います" --- # ウォークスルー:コード優先のJSS Next.jsアプリケーションをSitecoreに接続する方法 すべてのJSSアプリケーションは、ライフサイクルのどこかで切断モードからSitecore環境への展開に移行しなければなりません。JSSのCLIを使って、私たちのアプリをSitecoreにデプロイし、すべての切断されたコンテンツやコンポーネントをItemsにインポートし、それを編集できます。 アプリがSitecoreに接続されると、[接続モードで](https://doc.sitecore.com/xp/ja/developers/hd/21/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/21/sitecore-headless-development/walkthrough--connecting-a-next-js-jss-app-to-sitecore-editors.html "Walkthrough: Connecting a Next.js JSS app to Sitecore editors")を使ってアプリを開発できます。 > !重要コンテナベースのテンプレートで作成されたJSS Next.jsアプリは、すでにDockerコンテナ内のSitecoreインスタンスに接続されています。以下の手順は、[NPMイニショナイザーで作成されたJSS Next.jsアプリ](https://doc.sitecore.com/xp/ja/developers/hd/21/sitecore-headless-development/walkthrough--creating-a-jss-next-js-application-with-the-jss-initializer.html "Walkthrough: Creating a JSS Next.js application with the JSS initializer")にのみ実行すればよくなります。 JSSアプリケーションをSitecoreに接続・展開するには、[Headless Services](https://doc.sitecore.com/xp/ja/developers/hd/21/sitecore-headless-development/sitecore-headless-services.html "Sitecore Headless Services")を持つインスタンスにアクセスできる必要があります。 [JSS CLIをグローバルにインストール](https://doc.sitecore.com/xp/ja/developers/hd/21/sitecore-headless-development/install-the-jss-cli-globally.html "Install the JSS CLI globally") し、[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")ています。 このウォークスルーでは、以下の方法を説明します: - JSSアプリのサイト名とホスト名を設定してください。 - 接続情報を設定してください。 - アプリの設定をSitecoreに展開してください。 - JSS Next.jsアプリをSitecoreにデプロイしてください。 ## JSSアプリのサイト名とホスト名を設定してください JSSサンプルを基に[JSSアプリ初期化器](https://doc.sitecore.com/xp/ja/developers/hd/21/sitecore-headless-development/the-jss-app-initializer.html "The JSS app initializer")で作成されたアプリケーションには、アプリケーションで作成された[構成パッチ](https://doc.sitecore.com/xp/en/developers/104/platform-administration-and-architecture/use-a-patch-file-to-customize-the-sitecore-configuration.html)内に[サイト定義](https://doc.sitecore.com/xp/en/developers/104/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はできません。 以下は、サイト名とホスト名を設定するためのサイト設定の例です: ローカルインスタンスを使用している場合は、hostsファイルエントリで希望するホスト名をローカルホストにマッピングする必要があります。 Windowsのhostsファイルエントリでホスト名をローカルホストにマッピングするには: 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/21/sitecore-headless-development/images/iis-bindings.png) 複数のJSSアプリケーションを展開する予定がある場合は、Sitecoreで異なるホストやホスト名のバインディングを設定し、正しいサイトを解決する必要があります。 ## 接続情報の設定 接続の設定方法: - 端末でJSSコマンド jss setup を実行し、プロンプトに従ってください。プロンプトに従って以下の情報を提供します: - ウェブサイトフォルダ:これは、Sitecoreインスタンスへのルート物理パスで、設定ファイルをデプロイするために使われます。リモートインスタンスにはファイル共有パスで問題ありません。例えば: c:\\inetpub\\wwwroot\\MySitecore\\Website。ウェブサイトフォルダに直接アクセスできない場合は、インスタンスがリモートかどうか尋ねられたら *「いいえ* 」と答えてください。 - Sitecoreホスト名:これはSitecore設定パッチ/sitecore/config/.configで以前設定された*JSSアプリのホスト名*です。例えば:http://jssreactweb - SitecoreインポートサービスURL:これは*JSSアプリのインポートサービスURL*で、デフォルトでは*JSSアプリのホスト名* と /sitecore/api/jss/import: http://jssreactweb/sitecore/api/jss/importを指定します。デフォルト値を使うか、カスタムURLを指定するために空欄のままにしても構いません。 - Sitecore API鍵:このJSSアプリの[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セットのビルドアーティファクトをコミットして [ヘッドレスプロキシ](https://doc.sitecore.com/xp/ja/developers/hd/21/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")にデプロイしたい場合に役立ちます。この手法は [接続GraphQL](https://doc.sitecore.com/xp/ja/developers/hd/21/sitecore-headless-development/connected-graphql-in-jss-apps.html "Connected GraphQL in JSS apps")とは互換性がありません。 ## アプリの設定をSitecoreにデプロイしてください JSSアプリは、設定パッチを使ってSitecoreに登録され、そのパッチはSitecoreサーバーにデプロイされます。サーバーを設定する際には、[hostName属性を設定する](https://doc.sitecore.com/xp/ja/developers/hd/21/sitecore-headless-development/walkthrough--connecting-a-code-first-jss-next-js-application-to-sitecore.html#UUID-dccdafb5-b4c9-20c0-e5ef-ceaa505ea241_section-idm1403269105894518 "Configure the site name and hostname for the JSS app")際にこれらのパッチのいずれかをすでに編集済みです。設定パッチがサーバーに適用される前に、まずデプロイする必要があります。設定は自動(推奨)または手動でデプロイできます。 自動展開は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フォルダにデプロイしてください。デプロイする前に、コンテンツの内容について設定パッチを確認してください。 ## JSS Next.jsアプリをSitecoreにデプロイしてください JSS for Next.jsで作られたアプリケーションは、React、Angular、Vue.js JSSで作られたアプリとは、[Next.jsの特性](https://doc.sitecore.com/xp/ja/developers/hd/21/sitecore-headless-development/sitecore-javascript-rendering-sdk--jss--for-next-js.html "Sitecore JavaScript Rendering SDK (JSS) for Next.js")により異なる展開が行われます。本質的には、Next.jsサーバーのため、JSS Next.jsアプリは[HTTPレンダリングエンジン](https://doc.sitecore.com/xp/ja/developers/hd/21/sitecore-headless-development/http-rendering-engine.html "HTTP rendering engine")を使用します。 JSS Next.jsアプリをSitecoreインストールにデプロイするには: 1. JSSアプリ内でコマンドプロンプトやターミナルを開いてください。 2. 次のコマンドを実行してください: jss deploy items --includeContent --includeDictionary > !重要Next.jsを使う際はjss deploy appやjss deploy filesを使わないでください。 > > Next.js JSSアプリのpackage.jsonファイルでsitecoreDistPathを設定する必要はありません。