JSS アプリを JSS サイトにインポートする

Current version: 10.1

JSS アプリを SXA 環境にデプロイする場合、一般的なアプリ デプロイ プロセスとはいくつかの違いがあります。これは、JSS サイト作成では、デフォルトの構成設定がアイテム (Site/Settings/) に追加されているためで、jss.sitecore.com で説明されている一般的なプロセスで、構成デプロイのステップを省略できることを意味します。

JSS アプリを JSS サイトにインポートするには:

  1. JSS アプリをインポートする前に、jss.sitecore.com で説明されている手順に従う必要があります。この手順では、アプリのサイトとホスト名の設定も行います。

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

  3. レイアウト サービスが動作中であることをテストするには、Sitecore ホスト上のレイアウト サービス (http://myapp.siteco.re/sitecore/api/layout/render/jss?item=/&sc_apikey={YOUR_API_KEY_ID}) にテスト リクエストを行います。

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

    • Sitecore フォルダーへのパス: 以前に作成した JSS サイトへのパスを入力します。C:\inetpub\wwwroot\sxa92 など。

    • ホスト名: SXA サイトのホスト名を入力します。http://sxa92 など。

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

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

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

      JSS 配置シークレット
    重要

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

  5. Web アプリケーションに GraphQL を使う場合は、\Website\App_Config\Include\zzz にある設定ファイルに GraphQl エンドポイント設定をデプロイする必要があります。次のサンプル パッチを利用できますが、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>
  6. アプリをインポートするには、JSS アプリ内でコマンド プロンプト/ターミナルを開き、次を実行します。

    jss deploy app --includeContent --includeDictionary

注記

インポートを機能させるために、JSS インポート ユーザーには適切な権限が必要です。ユーザーに適切な権限があることを確認するには、コンテンツ エディターに移動し、[コンテンツ] アイテムを開いて、[セキュリティ]、[割り当て] の順にクリックします。[セキュリティ権限を割り当て] ダイアログで、sitecore\JssImport ユーザーを選択し、[アイテム] と [階層下のすべてのサブアイテム] の両方に書き込み権限があることを確認します。

Do you have some feedback for us?

If you have suggestions for improving this article,