1. 開発を始める

チュートリアル: Business Toolsのカスタマイズの概要

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

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

Sitecore Experience Commerceリリース パッケージ (オンプレミス ソリューション用) には、XC Business Toolsのカスタマイズ プロジェクトを開始するのに役立つAngularフレームワーク コンポーネントを含むソフトウェア開発キット (SDK) であるSitecore.BizFX.SDKが含まれています。

このチュートリアルでは、Sitecore BizFX SDKを設定してXC Business Toolsカスタマイズ プロジェクトを開始するための基本的な手順について説明します。

前提 条件

このチュートリアルの手順を実行する前に、次のことを行います。

  • Commerce Engineの作業インスタンスが開発環境にデプロイされている必要があります。

  • ワークステーションに次の環境とツールがインストールされていることを確認します

Sitecore.BizFX.SDK開発ソリューションのセットアップ

開発用にSitecore.BizFX.SDKを設定するには:

  • Sitecore XCリリース パッケージを含むフォルダーを開き、Sitecore.BizFX.SDK.*.*.*.zipファイルのコンテンツを任意の場所 ( C:\projects\など) に抽出します。

npm設定にNPMパッケージのSitecoreパブリック フィードを追加します

Sitecore.BizFX.SDKは、NPMパッケージのSitecore公式公開フィードで利用可能なNPMパッケージに依存しています。マシンがフィードに接続してNPMリソースにアクセスできることを確認する必要があります。

NPMパッケージ フィードを設定ファイルに追加するには、次の手順を実行します。

  • ファイル : C:\Users\your user\.npmrcを開き、次のファイルを追加します。

    @speak:registry=https://npm.sitecore.com/resources/
@sitecore:registry=https://npm.sitecore.com/resources/
    手記

    .npmrcファイルがマシンに存在しない場合は、次のコマンドを実行して、必要なフィードURLを使用してファイルを作成します。

    npm config set @speak:registry=https://npm.sitecore.com/resources/
npm config set @sitecore:registry=https://npm.sitecore.com/resources/

Business Toolsのconfig.jsonファイルをデプロイメント構成で更新します

Sitecore.BizFX.SDKフォルダ内のconfig.jsonファイルには、デプロイメントに固有の値で更新する必要がある設定パラメータが含まれています。

構成パラメーターを更新するには、次のようにします。

  1. Sitecore.BizFX.SDK.*.*.*.ZIPを抽出したフォルダーで、src\assets\config.jsonファイルを開きます。

  2. デプロイメントでデフォルトのHabitatオーサリング環境 ("EnvironmentName": "HabitatAuthoring") を使用しない場合は、デプロイメントのオーサリング環境の名前と一致するように "EnvironmentName" パラメーター値を更新します。

  3. プレフィックスが "PlaceholderFor<context>" が付いたすべての値を、デプロイの実際の値に置き換えます (デフォルトの場所はinetpub\wwwroot\SitecoreBizFxSite\assets\config.jsonです)。次に、置換する必要がある "PlaceholderFor..." プレフィックスが付いた値の例を示します。

    {
  "EnvironmentName": "HabitatAuthoring",
  "EngineUri": "PlaceholderForAuthoringUrl",
  "IdentityServerUri": "PlaceholderForIdentityServerUrl",
  "BizFxUri": "PlaceholderForBizFxUrl",
  "Language": "PlaceholderForDefaultLanguage",
  "Currency": "PlaceholderForDefaultCurrency",
  "ShopName": "PlaceholderForDefaultShopName",
  "LanguageCookieName": "selectedLanguage",
  "EnvironmentCookieName": "selectedEnvironment",
  "AutoCompleteTimeout_ms": 300
}
    手記

    基本的な開発シナリオでは、LanguageCookieNameプロパティとEnvironmentCookieNameプロパティの既定値を使用することをお勧めします。

Commerce Engineオーサリング サービス設定の更新

Commerce Engineのオーサリング サービスの構成を更新して、Business Toolsアプリケーションからの要求を受け入れる必要があります。

オーサリングサービスの設定を更新するには:

  1. Commerce Engine開発環境で、オーサリング サービスのconfig.jsonファイル ( \inetpub\wwwroot\CommerceAuthoring_Sc\wwwroot\config.jsonなど) を開きます。

  2. "AppSettings" セクションで、"AllowedOrigins" の値を更新して "http://localhost:4200"を指定します。例えば：

    "AllowedOrigins": "<your deployment values>|http://localhost:4200",

  3. Commerce Engineをブートストラップ して、設定をグローバル データベースに読み込みます。

Sitecore Identityサービスの設定を更新する

Sitecore Identity Serviceの設定を更新して、localhostポート4200をクライアントとして受け入れる必要があります。

Sitecore Identityサービスの設定を更新するには、次の手順に従います。

  1. Commerce Engine開発環境のSitecore IdentityServerサービス フォルダーで、Sitecore.Commerce.Identity ServiceHost.xmlファイルを開きます。たとえば、\inetpub\wwwroot\<yourDeployment>-IdentityServer\wwwroot\Config\production\Sitecore.Commerce.IdentityServer.Host.xmlを開きます。

  2. <Clients>セクションで、<AllowedCorsOriginsGroup1>の値を <your_deployment_values>|http://localhost:4200に変更します。

    例えば：

    <AllowedCorsOrigins>
   <AllowedCorsOriginsGroup1>http://YOUR_VALUES:4200|http://localhost:4200</AllowedCorsOriginsGroup1>

</AllowedCorsOrigins>

  3. 変更を保存します

SPEAKおよびBixFXパッケージのインストール

Business Tools (BizFX) ソリューションをビルドするには、まず必要なSPEAKパッケージとBizFXパッケージをインストールする必要があります。

手記

使用しているSitecore Experience Commerceのバージョンに含まれているSitecore Business Toolsのバージョンを必ずインストールする必要があります。

  • 任意のCLIツールを開き、以前に を抽出Sitecore.BizFX.SDKのフォルダから次のコマンドを実行します。

    npm install @speak/[email protected]
npm install @speak/[email protected]
npm install @speak/[email protected]
npm install @sitecore/bizfx
npm install

BizFxサンプル ソリューション プロジェクトをビルドしてデプロイする

サンプルBizFxアプリケーションをビルドしてデプロイするには、次のようにします。

  1. ソリューションをビルドするには、CLIウィンドウでコマンドng buildを実行します。

    手記

    実稼働用に最適化されたソリューションを取得するには、ng build --configuration productionコマンドを実行します。

    Angularアプリケーションのビルド プロセスでは、ソリューションがワークスペース フォルダーにあるdistという名前の出力フォルダーにコンパイルされます。 distフォルダー内では、sdkソリューションはWebルートの<BizFx>Webサイト フォルダーに相当します。

  2. BizFxソリューションをデプロイするには、dist/sdkフォルダの内容を <web root>\<BizFx> フォルダにコピーします。

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