チュートリアル: JSSアプリケーションをSitecoreに接続する

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

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

すべてのJSSアプリケーションは、ライフサイクルのある時点で、切断モードからSitecore環境へのデプロイに移行する必要があります。JSS CLIを使用してアプリをSitecoreにデプロイすると、切断されたすべてのコンテンツとコンポーネントがSitecoreアイテムにインポートされ、編集できるようになります。

大事な

JSS for Next.jsで構築されたアプリケーションは、Next.jsの特性により、デプロイ プロセスが異なります。

アプリがSitecoreにデプロイされると、Sitecoreのライブ データを使用してアプリを開発する 接続モード と、Sitecoreによってアプリがサーバー側でレンダリングされ、コンテンツ作成者がアプリケーションのコンテンツとレイアウトを編集できる 統合モードで 実行できます。

JSSアプリケーションをSitecoreに接続してデプロイするには、Sitecoreヘッドレス サービスを使用してSitecoreインスタンスにアクセスできること、JSS CLIをインストールし たこと、およびSitecore APIキーを作成していることが必要です。

このチュートリアルでは、次の方法について説明します。

  • JSSアプリのサイト名とホスト名を構成します。

  • 接続情報を設定します。

  • アプリの設定をSitecoreにデプロイします。

  • アプリケーションをSitecoreにデプロイします。

  • アプリのデプロイを確認します。

JSSアプリのサイト名とホスト名を構成する

JSSアプリ初期化子を使用して作成されたアプリケーションには、アプリケーションを使用して作成されたSitecore設定パッチにSitecoreサイト定義が含まれます。

JSSアプリケーションのルートフォルダで、設定パッチ /sitecore/config/<AppName>.configを含むファイルを開き、hostName属性がサーバーが応答する必要があるホストヘッダーと一致することを確認します。JSSアプリケーションをSitecoreインストールのデフォルトサイトとしてデプロイする場合は、hostName属性を削除して、JSSアプリケーションが任意のホストに応答するようにすることができます。

メモ

開発ホスト名のトップレベルドメイン (TLD) を指定します。ブラウザーのMicrosoft Edgeは、TLDがないとホスト名を解決しません。たとえば、ブラウザーはhttp://jss.sitecoreを解決できますが、http://sitecoreは解決できません。

次に、サイト名とホスト名を設定するためのサイト設定例を示します。

RequestResponse
<!-- other attributes removed for brevity -->
<site x:before="site[@name='website']"
      hostName="myapp.siteco.re" />

ローカルインスタンスを使用する場合は、目的のホスト名をローカルホストにマップする必要があります。

Windowsでホスト名をローカルホストにマップするには:

  1. 管理者としてコード エディターを開きます。

  2. エディタで、C:\Windows\System32\drivers\etc\hostsファイルを開きます。

  3. マッピングを追加します。例えば：

    RequestResponse
    127.0.0.1    myapp.siteco.re

  4. ファイルを保存して閉じます。

ホスト名エントリを追加したら、それをIISインスタンスにもバインディングとして追加します。

IIS Bindings

複数のJSSアプリケーションをデプロイする予定の場合は、Sitecoreが正しいサイトを解決するために、IISでさまざまなホストとホスト名のバインドを設定する必要があります。

接続情報を設定する

接続を設定するには:

  • ターミナルでJSSコマンドjss setupを実行し、プロンプトに従います。プロンプトに従って、次の情報を入力します。

    • Webサイト フォルダー: これはSitecoreインスタンスへのルート物理パスで、設定ファイルとJSビルド アーティファクトのデプロイに使用されます。ファイル共有パスは、リモートインスタンスでは問題ありません。たとえば、c:\inetpub\wwwroot\MySitecore\Websiteのようになります。ウェブサイトフォルダに直接アクセスできない場合は、インスタンスがリモートかどうかを尋ねられたら、noと答えます。

    • Sitecoreホスト名: これは、Sitecore設定パッチ /sitecore/config/<AppName>.configで以前に設定されたhostname of your JSS appです。例えばhttp://jssreactweb

    • Sitecoreインポート サービスURL: これはimport service URL of your JSS appです。これは、hostname of your JSS appプラス /sitecore/api/jss/importで構成されています: http://jssreactweb/sitecore/api/jss/import。これを空白のままにしてデフォルト値を使用するか、カスタムURLを指定できます。

    • APIキー ID: このJSSアプリのSitecore APIキー のアイテムIDを指定します。

    • デプロイ シークレット: これは、アプリ アイテムをSitecoreにデプロイするための認証を可能にする共有シークレットです。セットアッププロセスによって生成されたランダムキーを使用することをお勧めします。独自のキーを選択する場合、シークレットはランダムに生成された32文字以上の文字列である必要があります。

      大事な

      シークレットをソース管理にコミットしないでください。環境ごとに一意のシークレットを使用し、本番環境のシークレットへのアクセスを制限します。CI環境の場合、jss setupは、変数からシークレットやその他のパラメーターを渡すために使用できるパラメーター (--help) を受け入れます。デフォルトでは、シークレットは /scjssconfig.jsonと /sitecore/config/AppName.deploysecret.configに格納されますが、ソース管理にGitを使用すると、どちらも自動的に無視されます。

jss setupプロセスでは、JSSアプリケーションの接続文字列を含む /scjssconfig.jsonファイルが生成されます。

先端

APIリクエストに常に現在のホスト名を使用する本番環境で、環境に依存しないJSS App Bundleを作成するには、scjssconfig.jsonでlayoutServiceHost設定を空白に設定します。これは、ビルドアーティファクトの1つのセットをコミットして、それらをCM + CDまたは ヘッドレスプロキシにデプロイする場合に便利です。この手法は、絶対URLを設定する必要がある 接続されたGraphQLおよび サーバー側レンダリングとは互換性がありません。

アプリ設定をSitecoreにデプロイする

JSSアプリは、Sitecoreサーバーにデプロイされる設定パッチを使用してSitecoreに登録されます。Sitecoreサーバーを設定するときに、hostName属性を設定するときに、これらのパッチの1つをすでに編集しています。設定パッチをSitecoreサーバーで有効にする前に、パッチをデプロイする必要があります。構成は、自動的にデプロイ (推奨) または手動でデプロイできます。

自動デプロイでは、JSS CLIを使用してJSSアプリから直接構成パッチがデプロイされます。

設定パッチを自動的にデプロイするには:

  • JSSアプリの作業ディレクトリのターミナルで、次のコマンドを実行します。

    RequestResponse
    jss deploy config

    このスクリプトは、設定パッチ ファイルをsitecore/configフォルダーからSitecore App_Config/Include/zzzフォルダーにコピーします。

Sitecore内でJSSアプリを構成した自動構成デプロイにより、JSSアプリのサイトが作成され、公開しなくてもライブ モードが有効になります。開発者は、パッチ ファイルを慎重に確認して、すべての設定が環境に対して正しいことを確認する必要があります。たとえば、本番環境では、アプリケーションをライブモードで実行しないでください。

手記

コマンドの実行に使用するユーザー アカウントに、/scjssconfig.jsonで設定されたSitecore Webサイト フォルダーに書き込む権限があることを確認します。Windowsでは、これにはUACの昇格が含まれる場合があります。

JSSアプリ設定を専任のSitecore開発者 (またはDevOps) がデプロイする場合、またはリモート インスタンスで作業している場合は、JSSアプリ設定を手動でデプロイする必要がある場合があります。JSSアプリケーションからsitecore/config/*.configパッチを取得し、App_Config/Includeフォルダの任意の場所 ( zzzフォルダなど) にデプロイします。デプロイする前に、構成パッチの内容を確認してください。

アプリケーションをSitecoreにデプロイする

前の手順を完了すると、JSSアプリをSitecoreにデプロイする準備が整いました。

デプロイ手順は、アプリのビルドに使用したSDKとSitecoreインスタンスによって異なります。シナリオに適した手順を選択します。

JSSアプリをローカルの自己署名SSL証明書withoutローカルのSitecoreインスタンスにデプロイする

次のコマンドを使用して、React、Angular、またはVue.js JSSアプリを、自己署名SSL証明書を使用しないローカルのSitecoreインスタンスにデプロイできます。

RequestResponse
jss deploy app --includeContent --includeDictionary

コンテンツ、メディア、および辞書アイテムは、デフォルトではデプロイメント・プロセスによってインストールされないため、--includeContent --includeDictionaryを使用する必要があります。切断されたコンテンツが更新されている限り、それらを含めるのが適切ですが、コンテンツ エディターが既にアプリのコンテンツを書き込んでいる場合は、コンテンツ データが失われる可能性があるため、含める必要はありません。アプリケーションに他の言語のコンテンツがある場合は、コマンドjss deploy itemsを使用して、その言語の項目を個別にデプロイする必要があります。たとえば、deploy items --language da-DK --includeContent --includeDictionary .

先端

jss deploy appには使用可能なオプションが多数あり、指定されていない場合はすべて適切な既定値に設定されます。あなたはそれのためのすべてのオプションを見ることができますjss deploy app --help。

このコマンドは、次の手順を実行しますが、必要に応じて個別に実行することもできます。

  • sitecore-import.jsonファイルでJSSコマンドjss manifestを呼び出すことで、アプリ マニフェストの生成をトリガーします。

  • このプロセスは、jss packageコマンドを呼び出してマニフェスト パッケージの生成を続行し、アプリ マニフェスト ファイルと参照されるメディア ファイルをパッケージ化します。

  • ビルド スクリプト (通常はbuild.

  • インポート サービス エンドポイントを使用してマニフェスト パッケージをSitecoreにデプロイします。jss deploy items --includeContent --includeDictionary

  • ビルド アーティファクトは、コマンドjss deploy filesを使用して、設定された場所にあるSitecoreインスタンスにコピーします。

JSSアプリをローカルの自己署名SSL証明書withローカルのSitecoreインスタンスにデプロイする

ローカルのSitecoreインスタンスがローカルの自己署名SSL証明書を使用している場合:

  1. JSSアプリケーションディレクトリでターミナルを開きます。

  2. 偽の証明書の拇印を使用して次のコマンドを実行します。

    RequestResponse
    jss deploy app --includeContent --includeDictionary --acceptCertificate test
    手記

    パラメータ --acceptCertificateは、拇印 (証明書のピン留め) によってSSL証明書をホワイトリストに登録します。NodeはWindowsの信頼されたルート証明書を尊重しないため、SSL検証を完全に無効にすることなく、自己署名証明書を使用するローカルSitecoreインスタンスにアイテムをデプロイできます。

  3. 結果のエラー メッセージから、証明書の拇印をコピーします。

    View of SSL certificate thumbprint

  4. デプロイ コマンドを再度実行し、偽の証明書の拇印をコピーしたものに置き換えます。例えば：

    RequestResponse
    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

JSSアプリをリモートSitecoreインスタンスにデプロイする

React、Angular、またはVue.js JSSアプリをリモートSitecoreインストールにデプロイするには:

  1. JSSアプリ内でコマンド プロンプト/ターミナルを開きます。

  2. 次のコマンドを実行します。

    RequestResponse
    jss deploy items --includeContent --includeDictionary

  3. アプリの実稼働ビルドアーティファクトを作成するには、package.jsonファイルで定義されているビルドスクリプトを実行します(通常はbuild)。

    RequestResponse
    jss build

  4. ビルド アーティファクトを、package.jsonファイルのsitecoreDistPathで定義されているSitecoreインスタンスの相対パスにデプロイします。たとえば、$sitecore\dist\myappname.

アプリのデプロイを確認する

正しく設定およびデプロイされたJSSアプリケーションは、Sitecoreワークフローをサポートする必要があります。次のことを確認する必要があります。

  • JSSアプリケーションのコンテンツがSitecoreコンテンツ ツリーに表示されます。JSSアプリのホストhttp://myapp.siteco.re/sitecore/を使用してSitecoreインスタンスにログインします。JSSアプリのアイテムが /sitecore/Content/<YourJSSAppName>の下に表示されます。

    A JSS app in the Sitecore content tree

  • アプリケーションは、サイトに設定されたホスト名 (http://myapp.siteco.re/など) にアクセスして統合モードで実行する必要があります。統合モードが正しく機能する場合、ページのソースを表示すると、完全にレンダリングされたアプリが完全なHTMLで表示されます。

    View of the deployed JSS app in integrated mode

  • アプリはSitecoreエディターで編集できます。エクスペリエンス エディターで /Homeページを起動してみてください。たとえば、ダッシュボードからhttp://myapp.siteco.re/?sc_mode=editまたは起動します。

    JSS app in the Sitecore Experience Editor

何かフィードバックはありますか?

この記事を改善するための提案がある場合は、