JSSアプリケーションの開発

攻略

Version:

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

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

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

!重要JSSで構築されたNext.js用アプリケーションは、Next.jsの特徴により異なる展開プロセスを持ちます。

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

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

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

JSSアプリのサイト名とホスト名を設定してください。
接続情報を設定してください。
アプリの設定をSitecoreに展開してください。
アプリケーションを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でホスト名をローカルホストにマッピングするには:

管理者としてコードエディタを開きます。
エディターでファイルを開C:\Windows\System32\drivers\etc\hosts。
マッピングを加えます。例えば:

127.0.0.1 myapp.siteco.re
ファイルを保存して閉じてください。

ホスト名エントリを追加した後、IISインスタンスにもバインディングとして追加してください:

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

接続情報の設定

接続の設定方法:

端末でJSSコマンド jss setup を実行し、プロンプトに従ってください。プロンプトに従って以下の情報を提供します:
- ウェブサイトフォルダ
  、設定ファイルやJSビルドアーティファクトのデプロイに使用されます。リモートインスタンスにはファイル共有パスで問題ありません。例えば: 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を指定することができます。
- APIのID
  JSSアプリのSitecore 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フォルダにデプロイしてください。デプロイする前に、コンテンツの内容を必ず確認してください。

アプリケーションをSitecoreに展開する

前のステップが完了したので、JSSアプリをSitecoreに展開する準備が整いました。

デプロイ手順は、アプリ構築に使ったSDKやSitecoreインスタンスによって異なります。シナリオに合った手順を選択してください:

ローカルの自己署名SSL証明書なしでJSSアプリをローカルSitecoreインスタンスに展開する

React、Angular、またはVue.js JSSアプリを、自己署名SSL証明書を使わないローカルSitecoreインスタンスに以下のコマンドで展開できます:

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インスタンスにコピーします。

ローカルの自己署名SSL証明書を持つローカルSitecoreインスタンスにJSSアプリを展開します

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

JSSアプリディレクトリでターミナルを開いてください。
偽の証明書の指紋を使って次のコマンドを実行してください:

jss deploy app --includeContent --includeDictionary --acceptCertificate test

!注パラメータ --acceptCertificateはサムプリント(証明書ピン)でSSL証明書をホワイトリスト化します。NodeはWindowsの信頼されたルート証明書を尊重しないため、SSL検証を完全に無効にすることなく、自己署名証明書を使用するローカルSitecoreインスタンスにアイテムを展開できます。
その結果得られたエラーメッセージから、証明書のサムプリントをコピーします:
再度デプロイコマンドを実行し、偽の証明書の指紋をコピーしたものに置き換えてください。例えば:

jss deploy app --includeContent --includeDictionary --acceptCertificate CA:CD:3B:DB:19:D1:`97
`:F9:`80
`:FF:32:CC:F8:35:DC:F5:0B

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

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

JSSアプリ内でコマンドプロンプトやターミナルを開いてください。
次のコマンドを実行してください:

jss deploy items --includeContent --includeDictionary
package.jsonファイル(通常build)で定義されたビルドスクリプトを実行して、本番環境のビルドアーティファクトを作成します。

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

アプリのデプロイを確認しましょう

正しく設定・展開されたJSSアプリケーションは、Sitecoreのワークフローをサポートしなければなりません。以下を確認しなければなりません:

JSSアプリケーションのコンテンツはSitecoreコンテンツツリーに表示されます。JSSアプリのホストhttp://myapp.siteco.re/sitecore/を使ってSitecoreインスタンスにログインしてください。 */sitecore/Content/*のJSSアプリの項目が見えるはずです。
アプリケーションは、サイトに設定されたホスト名(例えばhttp://myapp.siteco.re/)にアクセスして[統合モードで](start-a-jss-app-in-integrated-mode.md "Start a JSS app in integrated mode")動作しなければなりません。統合モードで正しく動作すれば、ページのソースを見ると完全なHTMLでレンダリングされたアプリが表示されます。
アプリはSitecoreエディターで編集可能です。エクスペリエンスエディターで /Homeページを起動してみてください。例えば、ダッシュボードからhttp://myapp.siteco.re/?sc\_mode=editまたは起動してください。

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

攻略