1. SXAを用いたJSSアプリの管理

ヘッドレスサイトにJSSアプリをインポートしてください

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

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

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

!重要JSSアプリをインポートする前に、Sitecore JavaScriptサービスSDK(JSS)に記載された手順を必ず確認してください。アプリのサイトやホスト名の設定も含まれます。

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

  1. APIキーを作成し、そのアイテムIDをアプリ設定時に記録してください。

  2. レイアウトサービスが動作しているかをテストするには、Sitecoreホストのレイアウトサービスにテストリクエストを行ってください。 http://myapp.siteco.re/sitecore/api/layout/render/jss?item=/&sc\_apikey={YOUR\_API\_KEY\_ID}

  3. Sitecore接続を設定するには、JSSアプリのコマンドラインでjss setupを実行し、プロンプトに従ってください。プロンプトは以下の情報を求めます:

    • Sitecoreフォルダへのパス

      。例えば: C:\inetpub\wwwroot\sxa92。

    • ホスト名

      。例えば: http://sxa92。

    • インポートサービスURL

      。例えば、http://sxa92/sitecore/api/jss/importのままにしてください。

    • APIキー

      。

    • デプロイメントシークレット

      、エンターキーを押して作成してください。新しいデプロイシークレットを作成する場合は、コンテンツエディター(JSS site/Settings)で入力する必要があります。

      Headless Deployment secret

    !重要JSS上でSXA展開を行っているため、設定展開のステップを省略できます。

  4. ウェブアプリケーションでGraphQLを使いたい場合は、サイトのSettings項目を開き、GraphQL endpointフィールドの値を /sitecore/api/graph/edgeに置き換えてください。以下の例パッチを利用できます。URLとテンプレートパスは必ず更新してください。

    $(url)

    true true

    false false false false true

    context /sitecore/templates/Project/Demo

  5. JSSアプリケーションで使うレイアウトサービスの設定をsxa-jssに変更してください。

    • Next.jsの場合: \src\liv\layout-service-factory.rest.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' を追加する様子を示しています。AngularとVueの場合、スニペットもlayoutServiceConfig項目に追加する必要があります。

    export class LayoutServiceFactory { create(): LayoutService { return new RestLayoutService({ apiHost: config.sitecoreApiHost, apiKey: config.sitecoreApiKey, siteName: config.jssAppName, configurationName: 'sxa-jss', }); } }

  6. アプリをインポートするには、JSSアプリ内のコマンドプロンプトやターミナルを開き、以下を実行します:

    jss deploy app --includeContent --includeDictionary

!注インポートが動作するためには、JSSインポートユーザーが正しい権限を持っている必要があります。ユーザーが正しい権限を持っているか確認するには、コンテンツエディターに行き、 アイテムを選択し、セキュリティセクションで「セキュリティを割り当てる」をクリックしてください。「セキュリティ権限を割り当てる」ダイアログで sitecore\JssImport ユーザーを選択し、 Items と Descendantsの両方に対して書き込み権限を持っていることを確認してください。

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