这是Jerry 2021年的第 21 篇文章，也是汪子熙公众号总共第 292 篇原创文章。

最近一段时间, Jerry 陆续把自己在 SAP Commerce Cloud (电商云) 新一代前台页面开发的日常工作中遇到的一些问题和心得，写成了文章：

*   [从一个实际的例子出发，谈谈SAP Commerce Cloud电商云的UI自定义开发](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491695&idx=1&sn=6affe95459e8d5f1e998fdc426b8d759&chksm=ead652f8dda1dbee864b66a033bc6a39877fbd9f83225ee057624c5f47c8516f4782757f94a2&scene=21#wechat_redirect)

*   [SAP Commerce Cloud (电商云) UI 的懒加载功能](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491712&idx=1&sn=4605662c08eb81ee5f3bcaf8a10a9464&chksm=ead65217dda1db01397065181b534b66270eab3336894adda387f91a7ec69f37f5d8c35c099c&scene=21#wechat_redirect)

*   [SAP CRM Fiori 应用和 SAP Commerce Cloud (电商云) UI 如何通过调整CSS来改变UI显示风格](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491736&idx=1&sn=f65bbda4e8b2226ab3c9d4fc4d8a5919&chksm=ead6520fdda1db19c7d3d1b4d50005eedc7da7df4e99b4784ea287dadd03c16278e9e3d8baf3&scene=21#wechat_redirect)

*   [SAP 产品一脉相承的 UI 增强思路，在 SAP Commerce Cloud (电商云) UI 增强实现中的体现](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491759&idx=1&sn=3243302470e47a3e472960c0e78d9c1e&chksm=ead65238dda1db2e7dc008ee5f1db0710b815dcac3d8787fb6f00337422a3fd06310cecf547a&scene=21#wechat_redirect)

有朋友在文章留言，询问是否可能在本地搭一个 SAP 电商云的运行环境，来学习基于 SAP Spartacus 的新一代电商云前台 ( SAP Spartacus ) 的设计。

这个愿望当然是可以实现的。SAP Commerce Cloud (电商云) 的部署方式非常灵活：不仅能托管在 SAP 自己的基础设施 (infrastructure) 上，也能架设在第三方公有云上。当然，也仍然支持采用以前传统的 Hybris On-Premises 本地部署方式。

![](https://img-blog.csdnimg.cn/img_convert/8d8a351a37c52e7dd0d1b0110964dcc8.png)

实际上，SAP Spartacus 的帮助网站上，给出了如何在本地搭建 SAP Commerce Cloud 前后台运行环境的具体步骤：

https://sap.github.io/spartacus-docs/building-the-spartacus-storefront-from-libraries/

Jerry 自己试过，只要按照网页里描述的步骤一步步操作，如果一切顺利的话，一个小时之内，即可完成 SAP 电商云前后台的搭建，得到一个能够正常运行的环境。

首先从 SAP Software Center 网站下载 SAP Commerce Cloud 的安装包，我选择的是 2011版本：

https://launchpad.support.sap.com/#/softwarecenter/template/products/_APP=00200682500000001943&_EVENT=NEXT&HEADER=Y&FUNCTIONBAR=Y&EVENT=TREE&NE=NAVIGATE&ENR=67837800100800007216&V=MAINT&TA=ACTUAL/SAP%20COMMERCE

![](https://img-blog.csdnimg.cn/img_convert/b4718a4f125da44281d9f3dda0d73918.png)

将下载到本地的安装包解压，按照下列文档介绍的步骤，在 installer/recipes 文件夹内基于 cx 拷贝一个新的文件夹 cx-for-spa 出来，从而新建了一个基于 Spartacus 的安装 recipes.

https://sap.github.io/spartacus-docs/installing-sap-commerce-cloud-2011/

将该 recipes 目录内的 build.gradle 文件内，extensions 列表区域的 spartacussampledata 的注释去掉，从而让该 recipes 启用对 SAP Spartacus 的支持。

![](https://img-blog.csdnimg.cn/img_convert/fc375a1d1d687e3736e871936b9026bd.png)

接下来是 SAP Commerce 安装的老三样了，依次执行下列三个命令：

./install.sh -r cx-for-spa
./install.sh -r cx-for-spa initialize
./install.sh -r cx-for-spa start

cx-for-spa recipe里启用的 spartacussampledata extension，里面包含了很多测试数据。在上面第二条命令，进行 Commerce 平台 initialization 时，会将这些测试数据导入 SAP Commerce 的数据库。

安装完毕后，浏览器里使用 localhost 的主机名，检查本地安装的 SAP Commerce，其 Admin Console，Backoffice 和 基于 JSP 的 Accelerator Storefront 是否能够正常打开：

* Admin Console: https://localhost:9002
* Backoffice: https://localhost:9002/backoffice 
* Accelerator Storefront: https://localhost:9002/yacceleratorstorefront/?site=electronics

这三个 url 打开的界面外观依次如下三个截图所示：

![](https://img-blog.csdnimg.cn/img_convert/c238cbb23ba23b4d0292b3d9b30cf78e.png)

![](https://img-blog.csdnimg.cn/img_convert/d30539cc4a6627590bf89f162b462e8c.png)

![](https://img-blog.csdnimg.cn/img_convert/6f4e89cab9bb64d782c9029eea9957f8.png)

上图就是基于 JSP 技术的 SAP Commerce 传统的 Accelerator Storefront，按照 SAP 官网的说法，Accelerator Storefront 终究将会被 SAP Commerce 新一代的 Spartacus UI 所取代。

https://sap.github.io/spartacus-docs/spartacus-faq/

![](https://img-blog.csdnimg.cn/img_convert/14a7f37e3719a87a83cbfe05987c91cb.png)

下面进行 SAP Spartacus 的安装。

https://sap.github.io/spartacus-docs/building-the-spartacus-storefront-from-libraries/

步骤和 SAP Commerce 的安装流程相比简单了不少，一个命令就能搞定。不过要注意，安装之前，确保下面罗列的三个工具，在本地具有文档内规定的版本号：

* Angular CLI
* Node.js
* Yarn

![](https://img-blog.csdnimg.cn/img_convert/927c62c60308de6c576adfe7a2530c80.png)

首先 ng new samplestore, 创建一个名为 samplestore 的 Angular 应用：

![](https://img-blog.csdnimg.cn/img_convert/6602066a428791a43c08e04ef13ba7fb.png)

进入创建好的 samplestore 目录，使用下面的命令行，能够安装默认支持 B2C 功能的 Spartacus Storefront：

ng add @spartacus/schematics

![](https://img-blog.csdnimg.cn/img_convert/bba3971dc53aefb34af1d0e9cbfac162.png)

如果想支持 B2B 功能，待上面的命令行成功执行完毕后，再执行下面的命令行：

ng add @spartacus/organization

所有的命令行成功执行完毕后，打开 app.module.ts 文件，将配置节点 backend.occ.baseUrl 字段指定为我们本地安装的 SAP Commerce 实例即可：

https://localhost:9002

![](https://img-blog.csdnimg.cn/img_convert/e2e2463df94e5a2a4250c1a33280953a.png)

还记得之前 Jerry 的文章：[**Jerry在2020 SAP全球技术大会的分享：SAP Spartacus技术介绍的文字版**](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247490911&idx=1&sn=ab86c37e6ceb32b5037bce86bf7ea69f&chksm=ead5afc8dda226deb2e9bba385fed2397ddc7f746360200bf21d4f22bf57dd84b444dcd9663e&scene=21#wechat_redirect) 里介绍的一点：SAP Spartacus **100% 的 API 驱动特性**么？

![](https://img-blog.csdnimg.cn/img_convert/d904a901542dc25cafe06b5576d777f7.png)

SAP Spartacus 正是通过这个配置好的 https://localhost:9002/occ/v2 endpoint, 调用 Angular 提供的 HTTP 库，消费本地安装的 SAP Commerce 提供的 Restful API, 将数据呈现在用 Angular 开发而成的 Spartacus 单页面应用里。

ng serve 命令启用这个安装好的 Angular 应用，在 Chrome 开发者工具 Network 标签里，能观察到 SAP Spartacus 的 Restful API 调用。

![](https://img-blog.csdnimg.cn/img_convert/4810658734e3aef102065663dc59c3a4.png)

如果大家在搭建 SAP Commerce Cloud 前后台运行环境时遇到问题，欢迎留言讨论。

感谢阅读。

**更多阅读**

*   [从产品展示页面谈谈Hybris的特有概念和设计结构](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247483969&idx=1&sn=06adb0a08f9a8e1177842a736bbb1efe&chksm=ead5b0d6dda239c0972f2cbceefe9884c75be07d03f087f0706463b16cc532823802d7891b6c&scene=21#wechat_redirect)

*   [从产品展示页面谈谈Hybris系列之二: DTO, Converter和Populator](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247484094&idx=1&sn=eb80fa4ac5c19066c343f7e9dbf850fb&chksm=ead5b029dda2393f58a1e46eb219db1dd724d654bdb89976ca16af0c42d59d2f55b21c10be38&scene=21#wechat_redirect)

*   [Hybris Enterprise Commerce Platform 服务层的设计与实现](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247485067&idx=1&sn=aba6d36b14f03274e7a714e7d8413b90&chksm=ead5b41cdda23d0a07cf3a76dc6c6fe99dd7ba795d04ce7d358664ddffe3e0a96d8a6b8e034c&scene=21#wechat_redirect)

*   [从一个实际的例子出发，谈谈SAP Commerce Cloud电商云的UI自定义开发](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491695&idx=1&sn=6affe95459e8d5f1e998fdc426b8d759&chksm=ead652f8dda1dbee864b66a033bc6a39877fbd9f83225ee057624c5f47c8516f4782757f94a2&scene=21#wechat_redirect)

*   [SAP Commerce Cloud (电商云) UI 的懒加载功能](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491712&idx=1&sn=4605662c08eb81ee5f3bcaf8a10a9464&chksm=ead65217dda1db01397065181b534b66270eab3336894adda387f91a7ec69f37f5d8c35c099c&scene=21#wechat_redirect)

*   [SAP CRM Fiori 应用和 SAP Commerce Cloud (电商云) UI 如何通过调整CSS来改变UI显示风格](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491736&idx=1&sn=f65bbda4e8b2226ab3c9d4fc4d8a5919&chksm=ead6520fdda1db19c7d3d1b4d50005eedc7da7df4e99b4784ea287dadd03c16278e9e3d8baf3&scene=21#wechat_redirect)

*   [SAP 产品一脉相承的 UI 增强思路，在 SAP Commerce Cloud (电商云) UI 增强实现中的体现](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491759&idx=1&sn=3243302470e47a3e472960c0e78d9c1e&chksm=ead65238dda1db2e7dc008ee5f1db0710b815dcac3d8787fb6f00337422a3fd06310cecf547a&scene=21#wechat_redirect)

*   [Jerry在2020 SAP全球技术大会的分享：SAP Spartacus技术介绍的文字版](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247490911&idx=1&sn=ab86c37e6ceb32b5037bce86bf7ea69f&chksm=ead5afc8dda226deb2e9bba385fed2397ddc7f746360200bf21d4f22bf57dd84b444dcd9663e&scene=21#wechat_redirect)

ITPub博客

一小时内在本地搭建SAP Commerce Cloud(电商云)的前后台运行环境

最新文章