--- title: "ウォークスルー:コード優先のJSS Next.jsアプリケーションをSitecoreに接続する方法" slug: "walkthrough--connecting-a-code-first-jss-next-js-application-to-sitecore" abstract: "Connect JSS CLIで作成されたJSS Next.jsアプリで、コードファーストのアーティファクトの初期展開をSitecore・実行します" --- # ウォークスルー:コード優先のJSS Next.jsアプリケーションをSitecoreに接続する方法 すべてのJSSアプリケーションは、ライフサイクルのどこかで切断モードからSitecore環境への展開へ移行しなければなりません。JSS CLIを使ってアプリをSitecoreにデプロイし、切断されたすべてのコンテンツやコンポーネントを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のライブデータを使ってアプリを開発し、[Next.js JSSアプリをExperience EdgeやHorizonなどのコンテンツやレイアウトエディターと統合Sitecore](https://doc.sitecore.com/xp/ja/developers/hd/19/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アプリ](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/walkthrough--setting-up-a-development-environment-with-the-sitecore-containers-template-for-next-js.html "Walkthrough: Setting up a development environment with the Sitecore Containers template for Next.js") は、すでにDockerコンテナ内のSitecoreインスタンスに接続されています。以下の手順は、[JSS CLIで作成されたJSS Next.jsアプリ](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/walkthrough--creating-a-jss-next-js-application-with-the-jss-cli.html "Walkthrough: Creating a JSS Next.js application with the JSS CLI")にのみ実行すればよくなります。 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に展開してください。 - JSS Next.jsアプリを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インスタンスへのルート物理パスで、設定ファイルをデプロイするために使われます。リモートインスタンスにはファイル共有パスで問題ありません。例えば: 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を指定することができます。 - 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セットのビルドアーティファクトを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属性を設定する際にこれらのパッチのいずれかをすでに編集しています。設定パッチが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フォルダにデプロイしてください。デプロイする前に、コンテンツの内容を必ず確認してください。 ## JSS Next.jsアプリをSitecoreにデプロイしてください Next.jsのJSSで構築されたアプリケーションは、React、Angular、Vue.jsのJSSで作られたアプリとは、[Next.jsの特性](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/sitecore-javascript-rendering-sdk--jss--for-next-js.html "Sitecore JavaScript Rendering SDK (JSS) for Next.js")によりSitecoreに異なる展開が行われます。本質的に、Next.jsサーバーのために、JSS Next.jsアプリは[HTTPレンダリングエンジン](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/http-rendering-engine.html "HTTP rendering engine")を使用します。つまり、任意のSitecoreインスタンスはNext.jsアプリケーションに接続されたリモートSitecoreインスタンスとして振る舞います。 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を設定する必要はありません。