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

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

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

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

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

アプリがSitecoreに接続されると、接続モードで 動かせ、Sitecoreのライブデータを使ってアプリを開発し、Next.js JSSアプリをExperience EdgeやHorizonなどのコンテンツやレイアウトエディターと統合Sitecoreできます。

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

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

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

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

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

JSS CLIが提供するjss createコマンドでJSSサンプルを基に作成されたアプリケーションには、アプリケーションで作成されたSitecore構成パッチ内にSitecoreサイト定義が含まれています。

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

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

接続情報の設定

接続の設定方法:

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

    • ウェブサイトフォルダ

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

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

      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や ヘッドレスプロキシにデプロイしたい場合に役立ちます。この手法は、絶対URLを設定する必要がある 接続されたGraphQLや サーバーサイドレンダリングとは互換性がありません。

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

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