1. Next.js開発のためのJSSの使い始め

ウォークスルー
Next.jsアプリケーションをSitecoreに接続する方法

Version:
日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

すべてのJSSアプリケーションは、ライフサイクルのどこかで切断モードからSitecore環境への展開に移行しなければなりません。JSSのCLIを使って、私たちのアプリをSitecoreにデプロイし、すべての切断されたコンテンツやコンポーネントをItemsにインポートし、それを編集できます。

アプリがSitecoreに接続されると、接続モードで 動かし、Sitecoreのライブデータや 高度なエディターを使ってアプリを開発できます。

!重要コンテナベースのテンプレートで作成されたJSS Next.jsアプリは、すでにDockerコンテナ内のSitecoreインスタンスに接続されています。以下の手順は、NPMイニショナイザーで作成されたJSS Next.jsアプリにのみ実行すればよくなります。

JSSアプリケーションをSitecoreに接続・展開するには、Headless Servicesを持つインスタンスにアクセスできる必要があります。 JSS CLIをグローバルにインストール し、APIキーを作成しています。

このウォークスルーでは、以下の方法を説明します:

  • JSSアプリのサイト名とホスト名を設定してください。
  • 接続情報を設定してください。
  • アプリの設定をSitecoreに展開してください。
  • JSS Next.jsアプリをSitecoreにデプロイしてください。

JSSアプリのサイト名とホスト名を設定してください

JSSサンプルを基にJSSアプリ初期化器で作成されたアプリケーションには、アプリケーションで作成された構成パッチ内にサイト定義が含まれています。

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

複数のJSSアプリケーションを展開する予定がある場合は、Sitecoreで異なるホストやホスト名のバインディングを設定し、正しいサイトを解決する必要があります。

接続情報の設定

接続の設定方法:

  • 端末でJSSコマンド jss setup を実行し、プロンプトに従ってください。プロンプトに従って以下の情報を提供します:

    • ウェブサイトフォルダ

      、Sitecoreインスタンスへのルート物理パスで、設定ファイルをデプロイするために使われます。リモートインスタンスにはファイル共有パスで問題ありません。例えば: c:\inetpub\wwwroot\MySitecore\Website。ウェブサイトフォルダに直接アクセスできない場合は、インスタンスがリモートかどうか尋ねられたら 「いいえ 」と答えてください。

    • 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鍵

      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セットのビルドアーティファクトをコミットして ヘッドレスプロキシにデプロイしたい場合に役立ちます。この手法は 接続GraphQLとは互換性がありません。

アプリの設定をSitecoreにデプロイしてください

JSSアプリは、設定パッチを使ってSitecoreに登録され、そのパッチはSitecoreサーバーにデプロイされます。サーバーを設定する際には、hostName属性を設定する際にこれらのパッチのいずれかをすでに編集済みです。設定パッチがサーバーに適用される前に、まずデプロイする必要があります。設定は自動(推奨)または手動でデプロイできます。

自動展開は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の特性により異なる展開が行われます。本質的には、Next.jsサーバーのため、JSS Next.jsアプリはHTTPレンダリングエンジンを使用します。

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を設定する必要はありません。

この記事を改善するための提案がある場合は、 お知らせください!