Sitecore Commerce 10 – ビジネスツールの開発環境を整える

ビジネス・ツールは、プラガブル・フレームワークを使用して拡張可能であり、Entity Viewsを使用してUIを拡張することができます。ビジネス・ツールには豊富なコントロール・セットが用意されていますが、最高のビジネス・エクスペリエンスを実現するために、独自のカスタム・コントロールを作成することもできます。

そのためには、まずビジネス・ツールの開発環境を整える必要があります。環境が整うと、カスタム・コントロールの開発やビジネス・ツールのカスタマイズが可能になります。

前提条件

  1. 開発環境にCommerce Engineのインスタンスを配置
  2. Node.js Javascriptランタイムのインストール
  3. Angular CLIツールインストール – npm install -g @angular/cli

SitecoreのパブリックフィードからNPMパッケージを入手するためのNPM設定

Sitecore BizFx SDKは、Sitecore公式のNPMパッケージのパブリックフィードから入手できるNPMパッケージに依存しています。

Poswershellを管理者として開きます。

powershellで以下の2つのコマンドを実行します。

npm config set @speak:registry=https://sitecore.myget.org/F/sc-npm-packages/npm/

npm config set @sitecore:registry=https://sitecore.myget.org/F/sc-npm-packages/npm/

これにより、以下の行が追加されます。

C:\Users\[your user]\.npmrc
[Optional] – この行が追加されているかどうかを確認できます。

@speak:registry=https://sitecore.myget.org/F/sc-npm-packages/npm/
@sitecore:registry=https://sitecore.myget.org/F/sc-npm-packages/npm/

開発ソリューション用のSPEAKとBizFxパッケージのセットアップインストール

Sitecore.BizFX.SDK.4.0.8をdevelopmentフォルダにコピーし、SDKのzipファイルをフォルダに解凍します。

SDKを解凍したフォルダに以下のファイルをコピーします。これらのファイルは、Sitecore XC リリースパッケージに含まれています。

  1. speak-icon-fonts-1.1.0.tgz
  2. speak-ng-bcl-2.0.0-r00116.tgz
  3. speak-styling-1.0.0-r00110.tgz
  4. 上記ファイルをコピーした場所で、以下のコマンドを実行します。
​​​​​​​npm install speak-icon-fonts-1.1.0.tgz
​​​​​​​npm install speak-ng-bcl-2.0.0-r00116.tgz
npm install speak-styling-1.0.0-r00110.tgz
npm install @sitecore/bizfx

npm installを実行します。これにより、必要なnpmモジュールがインストールされ、フォルダnode_modulesが追加されます。

npm install

ビジネスツールのconfig.jsonをデプロイメント構成に合わせて設定する

npmのインストールが完了したら、src\assetsフォルダにあるconfig.jsonファイルを開きます。

BizFxUriを除き、BizFxサイトインスタンスと同じ設定に更新します。以下の設定では、BizFxUri が http を指していることに注意してください。

{
  "EnvironmentName": "HabitatAuthoring",
  "EngineUri": "https://localhost:5000",
  "IdentityServerUri": "https://xp10.IdentityServer",
  "BizFxUri": "http://localhost:4200",
  "Language": "en",
  "ContentLanguage": "en",
  "Currency": "USD",
  "ShopName": "CommerceEngineDefaultStorefront",
  "LanguageCookieName": "selectedLanguage",
  "ContentLanguageCookieName": "selectedContentLanguage",
  "EnvironmentCookieName": "selectedEnvironment",
  "AutoCompleteTimeout_ms": 300,
  "AccessTokenUpdateInterval_ms": 300000
}

開発環境の起動

重要!

SitecoreBizFxサイトは4200ポートをリッスンしているため、サイトを停止します。次のステップでは、解凍したSDKフォルダからサイトをリッスンします。

以下のPowershellコマンドを実行します

ng server

http://localhost:4200/ でブラウザを開くと、Sitecoreクライアントの認証情報を入力するように求められます。

このサイトは安全な接続を提供できません

このエラーが発生する理由は、ID サーバーが http で BizFx サイトをサーバーするように構成されていないためです。

Sitecore Identity Server の構成を更新する

インストールされた Identity Server インスタンスから Sitecore.Commerce.Identity ServiceHost.xml を開きます。

AllowedCorsOriginGroup1 に http://localhost:4200 を追加します。

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

コマースエンジンの設定を更新

  • CommerceAuthoringサイトのwwwrootフォルダからconfig.jsonを開く。
  • AppSettingsのAllowedOriginsを更新して、http://localhost:4200。
  • 設定が変更されているので、オーサリングサイトに変更が適用されるようにブートストラップを行う必要があります。
  • IISを再起動します。オプションとして、Commerce Authoringサイトを再起動することもできます。

開発環境からビジネスツールを実行する

http://localhost:4200/ でブラウザを開く

デモを申し込む

弊社の専門家は最適なソリューションをサポートさせて頂きます。

►►►サービスについて