TheLazy.Dev
Portfolio GitHub

Blog

sitecore |angular |commerce

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

tackme31

tackme

Posted on June 8, 2020

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

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

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

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

開発環境の構築方法

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

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

$ npm install -g @angular/cli
Enter fullscreen mode Exit fullscreen mode

③ 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/
Enter fullscreen mode Exit fullscreen mode

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

$ 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
Enter fullscreen mode Exit fullscreen mode

⑦ 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>
Enter fullscreen mode Exit fullscreen mode

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

  • wwwroot\config.json 
 {
   "AppSettings": {
     ...
     "AllowedOrigins": [
+        "http://localhost:4200",
         "https://localhost:4200",
         "https://bizfx.xc920.local",
         "https://sc920.sc"
     ],
-    "AntiForgeryEnabled":  true,
+    "AntiForgeryEnabled":  false,
   },
Enter fullscreen mode Exit fullscreen mode

⑨ 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
}
Enter fullscreen mode Exit fullscreen mode

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

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

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

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

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

デプロイ方法

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

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

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

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

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

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

💖 💪 🙅 🚩
tackme31
tackme

Posted on June 8, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

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

June 8, 2020