Sitecore Commerceでビジネスツールの開発環境を構築する方法

Sitecore XCのビジネスツールはAngularで実装されており、簡単にカスタマイズできるようになっています。

SDKが用意されているので、開発環境を構築する方法をまとめました。

以下の手順ではSitecore XC 9.2.0を使用することを前提とします。

開発環境の構築方法

① お使いのマシンにnode/npmをインストールします。

② npmでangular-cliをインストールします。

$ npm install -g @angular/cli

③ Sitecore Commerceのインストールパッケージに含まれているSitecore.BizFX.SDK.3.0.7.zipを解凍します。今回は例としてC:\Project\BizFxに解凍します。

④ Sitecore Commerceのインストールパッケージに含まれているspeak-ng-bcl-0.8.0.tgzとspeak-styling-0.9.0-r00078.tgzを、C:\Project\BizFx内にコピーします。

⑤ 以下のコマンドを実行して、Sitecoreのnpmレジストリを登録します。

$ cd C:\Project\BizFx # 作業フォルダに移動
$ 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/

⑥ 以下のコマンドを実行して、必要なパッケージをインストールします。

$ cd C:\Project\BizFx # 作業フォルダに移動
$ ​​​​​​​npm install .\speak-ng-bcl-0.8.0.tgz
$ npm install .\speak-styling-0.9.0-r00078.tgz
$ npm install @sitecore/bizfx
$ npm install

⑦ Sitecore Commerceで使用しているIdentityServerの以下のファイルを修正します。

• Config\production\Sitecore.Commerce.IdentityServer.Host.xml

 <AllowedCorsOrigins>
-  <AllowedCorsOriginsGroup1>https://localhost:4200|https://localhost:5000</AllowedCorsOriginsGroup1>
+  <AllowedCorsOriginsGroup1>http://localhost:4200|https://localhost:4200|https://localhost:5000</AllowedCorsOriginsGroup1>
   <AllowedCorsOriginsGroup2>https://bizfx.xc920.local|https://commerceauthoring.xc920.local</AllowedCorsOriginsGroup2>
   <AllowedCorsOriginsGroup2>https://bizfx.xc920.local|https://commerceauthoring.xc920.local</AllowedCorsOriginsGroup2>
 </AllowedCorsOrigins>

⑧ Commerce Authoringエンジンの以下のファイルを修正します。

• wwwroot\config.json

 {
   "AppSettings": {
     ...
     "AllowedOrigins": [
+        "http://localhost:4200",
         "https://localhost:4200",
         "https://bizfx.xc920.local",
         "https://sc920.sc"
     ],
-    "AntiForgeryEnabled":  true,
+    "AntiForgeryEnabled":  false,
   },

⑨ IISを再起動し、実行中のビジネスツール（BizFx）のサイトを停止します。

⑩ 作業フォルダにある以下のファイルを修正します。

• C:\Project\BizFx\src\app\assets\config.json

{
  "EnvironmentName": "HabitatAuthoring",
  "EngineUri": "{Commerce AuthoringのURL}",
  "IdentityServerUri": "{Identity ServerのURL}",
  "BizFxUri": "http://localhost:4200",
  "Language": "en",
  "Currency": "USD",
  "ShopName": "Storefront",
  "LanguageCookieName": "selectedLanguage",
  "EnvironmentCookieName": "selectedEnvironment",
  "AutoCompleteTimeout_ms": 300
}

{Commerce AuthoringのURL}および{Identity ServerのURL}には、お使いのSitecore Commerceで使用しているものを設定してください。

⑪ 以下のコマンドを実行して、ビジネスツールをビルド・実行します。

$ cd C:\Projects\BizFx # 作業フォルダに移動
$ ng serve

実行後、http://localhost:4200にアクセスしてビジネスツールが正常に動作することを確認してください。

Marchandisingツールでエラーが発生する場合は、CORSやAnti-Forgeryの設定が正しくできていない可能性があります。

デプロイ方法

① IISで実行中のビジネスツール（BizFx）のサイトを停止します。

② 以下のコマンドを実行してプロジェクトをビルドします。

$ cd C:\Projects\BizFx # 作業フォルダに移動
$ ng build -prod

実行すると、作業フォルダのdist/sdkにビルドされたファイルが出力されます。

③ 出力されたファイルのうちassets/config.json以外をお使いのビジネスツールの物理フォルダに上書きコピーします。

以上でデプロイが完了します。
IISでBizFxを起動し、動作を確認してください。