DEV Community

tackme
tackme

Posted on

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

#sitecore #angular #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を起動し、動作を確認してください。

Top comments (0)