ヘッドレスサイトにJSSアプリをインポートしてください
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
クラシックJSSアプリケーションをSXA環境にデプロイする場合、一般的なアプリケーション展開プロセスにはいくつかの違いがあります。ヘッドレスサイト作成ではデフォルト設定がアイテム(Site/Settings/)に追加されるため、jss.sitecore.comで説明した一般的なプロセスのConfig Deploymentステップをスキップする必要があります。GraphQLエンドポイントを定義する必要がある場合、Config Deploymentステップを使う場合は、設定内でアプリノードとサイトノードをコメントアウトする必要があります。
!重要
クラシックJSSアプリをインポートする前に、Sitecore JavaScriptレンダリングSDK(JSS) で説明されている手順に従う必要があります。アプリのサイトやホスト名の設定も含まれます。
スタイルガイドテンプレートに基づいてヘッドレスサイトをインポートする場合、レンダリングのグリッド設定 は機能しません。これらのレンダリングではグリッド とスタイリングのサポートを手動で有効にする必要があります 。
JSSクラシックアプリをヘッドレスサイトにインポートするには:
-
APIキーを作成し、そのアイテムIDをアプリ設定時に記録してください。
-
レイアウトサービスが動作しているかをテストするには、Sitecoreホストのレイアウトサービスにテストリクエストを行ってください。 http://myapp.sitecore/sitecore/api/layout/render/jss?item=/&sc\_apikey={YOUR\_API\_KEY\_ID}
-
Sitecore接続を設定するには、JSSアプリのコマンドラインでjss setupを実行し、プロンプトに従ってください。プロンプトは以下の情報を求めます:
-
Sitecoreフォルダへのパス
。例えば: C:\inetpub\wwwroot\sxa92。 -
ホスト名
。例えば: http://sxa92。 -
インポートサービスURL
。例えば、http://sxa92/sitecore/api/jss/importのままにしてください。 -
APIキー
。 -
デプロイメントシークレット
、エンターキーを押して作成してください。新しいデプロイシークレットを作成する場合は、コンテンツエディター(headless site/Settings)で入力する必要があります。
!重要
-
JSS上でSXA展開作業をしているので、設定展開のステップを省略できます。
-
package.jsonファイルで定義されたアプリケーション名は、設定項目のアプリ名欄で指定されたアプリケーション名と一致しなければなりません。
-
-
JSSアプリケーションで使うレイアウトサービスの設定をsxa-jssに変更してください。
- Next.jsの場合: \src\lib\layout-service-factory.ts ファイルで、 configurationName プロパティを 'sxa-jss'に更新します。
- Reactの場合: \src\lib\layout-service-factory.js ファイルで、 configurationName プロパティを 'sxa-jss'に更新します。
- Angularの場合: \src\app\lib\layout-service-factory.ts ファイルで configurationName プロパティを 'sxa-jss'に更新します。
- Vueの場合: \src\lib\layout-service-factory.js ファイルで、 configurationName プロパティを 'sxa-jss に更新してください。
以下のコード例は、Reactの場合に 'sxa-jss' を加えることがどのようになるかを示しています。
export class LayoutServiceFactory { create(): LayoutService { return process.env.FETCH_WITH === 'GraphQL' ? new GraphQLLayoutService({ endpoint: config.graphQLEndpoint, apiKey: config.sitecoreApiKey, siteName: config.jssAppName, }) : new RestLayoutService({ apiHost: config.sitecoreApiHost, apiKey: config.sitecoreApiKey, siteName: config.jssAppName, configurationName: 'default', }); } }
-
アプリをインポートするには、JSSアプリ内のコマンドプロンプトやターミナルを開き、以下を実行します:
jss deploy app --includeContent --includeDictionary
!注インポートが動作するためには、JSSインポートユーザーが正しい権限を持っている必要があります。ユーザーが正しい権限を持っているか確認するには、コンテンツエディターに行き、 アイテムを選択し、セキュリティセクションで「セキュリティを割り当てる」をクリックしてください。「セキュリティ権限を割り当てる」ダイアログで sitecore\JssImport ユーザーを選択し、 Items と Descendantsの両方に対して書き込み権限を持っていることを確認してください。