JSS アプリのヘッドレス サイトへのインポート

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

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

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

重要

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 などです。

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

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

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

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

      ヘッドレス配置のシークレット
    重要

    JSS の SXA デプロイで作業を行っているため、構成デプロイのステップを省略できます。

  4. Web アプリケーションに GraphQL を使用する場合は、サイトの [設定] アイテムを開いて [GraphQL エンドポイント] フィールドの値を /sitecore/api/graph/edge に置き換えます。次のサンプル パッチを利用できますが、URL とテンプレート パスは必ず更新してください。

    RequestResponse
    <!--
      JSS Sitecore Configuration Patch File
    
      This configuration file registers the JSS site with Sitecore, and configures the Layout Service
      to work with it. Config patches need to be deployed to the Sitecore server.
    
      Normally `jss deploy config` can do this for local development. To manually deploy, or to deploy via CI,
      this file can be placed in the `App_Config/Include` folder, or a subfolder of it, within the Sitecore site.
    -->
    <configuration xmlns:patch="http://www.sitecore.net/xmlconfig/" xmlns:set="http://www.sitecore.net/xmlconfig/set/" xmlns:role="http://www.sitecore.net/xmlconfig/role/">
      <sitecore>
        <api>
          <!--
            Define the app's Sitecore GraphQL API endpoint
            Note: this can be removed if you are not using GraphQL.
            Note: the endpoint must be defined both for integrated and connected type GraphQL queries.
          -->
          <GraphQL>
            <endpoints>
              <carsGraphQLEndpoint url="/api/cars" type="Sitecore.Services.GraphQL.Hosting.DatabaseAwareGraphQLEndpoint, Sitecore.Services.GraphQL.NetFxHost" resolve="true">
                <url>$(url)</url>
    
                <enabled>true</enabled>
                <enableSubscriptions>true</enableSubscriptions>
    
                <!-- lock down the endpoint when deployed to content delivery -->
                <graphiql role:require="ContentDelivery">false</graphiql>
                <enableSchemaExport role:require="ContentDelivery">false</enableSchemaExport>
                <enableStats role:require="ContentDelivery">false</enableStats>
                <enableCacheStats role:require="ContentDelivery">false</enableCacheStats>
                <disableIntrospection role:require="ContentDelivery">true</disableIntrospection>
    
                <schema hint="list:AddSchemaProvider">
                  <content type="Sitecore.Services.GraphQL.Content.ContentSchemaProvider, Sitecore.Services.GraphQL.Content">
                    <!-- scope typed template generation to just this app's templates -->
                    <templates type="Sitecore.Services.GraphQL.Content.TemplateGeneration.Filters.StandardTemplatePredicate, Sitecore.Services.GraphQL.Content">
                      <database>context</database>
                      <paths hint="list:AddIncludedPath">
                        <templates>/sitecore/templates/Project/Demo</templates>
                      </paths>
                      <fieldFilter type="Sitecore.Services.GraphQL.Content.TemplateGeneration.Filters.StandardFieldFilter, Sitecore.Services.GraphQL.Content">
                        <exclusions hint="raw:AddFilter">
                          <!--
                              Remove system fields from the API (e.g. __Layout) to keep the schema lean
                          -->
                          <exclude name="__*" />
                        </exclusions>
                      </fieldFilter>
                    </templates>
    
                    <queries hint="raw:AddQuery">
                      <!-- enable querying on items via this API -->
                      <query name="item" type="Sitecore.Services.GraphQL.Content.Queries.ItemQuery, Sitecore.Services.GraphQL.Content" />
                    </queries>
    
                    <fieldTypeMapping ref="/sitecore/api/GraphQL/defaults/content/fieldTypeMappings/standardTypeMapping" />
                  </content>
                </schema>
    
                <!-- Enables the 'jss' graph nodes that are preformatted to use with JSS rendering components, and the datasource resolving queries for JSS -->
                <extenders hint="list:AddExtender">
                  <layoutExtender type="Sitecore.JavaScriptServices.GraphQL.JssExtender, Sitecore.JavaScriptServices.GraphQL" resolve="true" />
                </extenders>
    
                <!-- Determines the security of the service. 'publicService' is open to anonymous access, but requires an SSC API key. -->
                <security ref="/sitecore/api/GraphQL/defaults/security/publicService" />
    
                <!-- Determines how performance is logged for the service. Defaults are defined in Sitecore.Services.GraphQL.config -->
                <performance ref="/sitecore/api/GraphQL/defaults/performance/standard" />
              </carsGraphQLEndpoint>
            </endpoints>
          </GraphQL>
        </api>
      </sitecore>
    </configuration>
    
  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 アイテムにスニペットも追加する必要があります。

    RequestResponse
    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 ユーザーを選択し、[アイテム] と [階層下のすべてのサブアイテム] の両方に書き込み権限があることを確認します。

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

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