1. SXAを使用したヘッドレス サイトの管理

JSSアプリをヘッドレス サイトにインポートする

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

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

従来のJSSアプリケーションをSXA環境にデプロイする場合、一般的なアプリのデプロイ プロセスにはいくつかの違いがあります。ヘッドレス サイト作成では、デフォルトの構成設定がアイテム (Site/Settings/) に追加されるため、jss.sitecore.comで説明する一般的なプロセスのConfig Deploymentステップをスキップする必要があります。GraphQLエンドポイントを定義する必要があるため、Config Deploymentステップを使用する場合は、設定でアプリノードとサイトノードをコメントアウトする必要があります。

大事な

JSSクラシック アプリをヘッドレス サイトにインポートするには:

  1. APIキーを作成し、アプリの設定に使用するためにそのアイテムIDをメモします。

  2. Layout Serviceが機能しているかどうかをテストするには、SitecoreホストのLayout Serviceにテスト要求を行います。 http://myapp.sitecore/sitecore/api/layout/render/jss?item=/&sc_apikey={YOUR_API_KEY_ID}

  3. Sitecore接続を構成するには、JSSアプリ内のコマンドラインでjss setupを実行し、プロンプトに従います。プロンプトでは、次の情報の入力を求められます。

    • Sitecoreフォルダーへのパス: 以前に作成したヘッドレス サイトへのパスを入力します。たとえば、C:\inetpub\wwwroot\sxa92のようになります。

    • ホスト名: SXAサイトのホスト名を入力します。たとえば、http://sxa92のようになります。

    • インポート サービスURL: 既定の設定を変更する必要はありません。たとえば、http://sxa92/sitecore/api/jss/importのままにします。

    • APIキー: APIキーのGUIDを入力します。

    • デプロイシークレット: ここにシークレットを入力するか、Enterキーを押してシークレットを作成します。新しいデプロイメントシークレットを作成する場合は、コンテンツエディター(headless site/Settings)に入力する必要があります。

      Headless Deployment secret
    大事な

    • JSSでSXAデプロイに取り組んでいるため、設定デプロイの手順をスキップできます。

    • package.jsonファイルで定義されているアプリケーション名は、Settings項目のApp Nameフィールドで指定されたアプリケーション名と一致している必要があります。

  4. 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',
        });
  }
}

  5. アプリをインポートするには、JSSアプリ内でコマンド プロンプト/ターミナルを開き、次のコマンドを実行します。

    jss deploy app --includeContent --includeDictionary

メモ

インポートを機能させるには、JSSインポート ユーザーに適切なアクセス許可が必要です。ユーザーに適切な権限があることを確認するには、コンテンツ エディターに移動し、<site>アイテムを選択し、SecurityセクションでAssign securityをクリックします。 Assign Security Rightsダイアログで、sitecore\JssImportユーザーを選択し、ItemsとDescendantsの両方に対する書き込み権限があることを確認します。

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