Sitecore Commerceでビジネスツールの開発環境を構築する方法
Tags: sitecore, angular, commerce
Published: 2020-06-08 10:09:49

Sitecore XCのビジネスツールはAngularで実装されており、簡単にカスタマイズできるようになっています。  
SDKが用意されているので、開発環境を構築する方法をまとめました。  

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

## 開発環境の構築方法
① お使いのマシンに[node/npm](https://nodejs.org/ja/)をインストールします。

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

```powershell
$ 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レジストリを登録します。

```powershell
$ 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/
```

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

```powershell
$ 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`

```diff
 <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`

```diff
 {
   "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`

```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で使用しているものを設定してください。

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

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

実行後、`http://localhost:4200`にアクセスしてビジネスツールが正常に動作することを確認してください。  
Marchandisingツールでエラーが発生する場合は、CORSやAnti-Forgeryの設定が正しくできていない可能性があります。  

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

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

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

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

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

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