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

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

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

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

大事な

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

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

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

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

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

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

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

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

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

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

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

JSSアプリケーションのルート フォルダで、構成パッチ /sitecore/config/<AppName>.configを含むファイルを開き、hostName属性がサーバーが応答する必要があるホスト ヘッダーと一致することを確認します。 SitecoreインストールのデフォルトサイトとしてJSSアプリをデプロイする場合は、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キー のItem 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アプリを構成した自動構成デプロイにより、そのサイトが作成され、公開せずにライブ モードが有効になります。開発者は、パッチ ファイルを慎重に確認して、すべての設定が環境に対して正しいことを確認する必要があります。たとえば、本番環境では、アプリケーションをライブモードで実行しないでください。

手記

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

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

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

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

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

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

次のコマンドを使用して、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アプリをローカルのSitecoreインスタンスにデプロイwithローカルの自己署名SSL証明書を使用

ローカルの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インスタンスにログインします。 /sitecore/Content/<YourJSSAppName>の下にJSSアプリのアイテムが表示されます。

    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

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

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