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を起動し、動作を確認してください。
Top comments (0)