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

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

• 从一个实际的例子出发，谈谈SAP Commerce Cloud电商云的UI自定义开发

• SAP Commerce Cloud (电商云) UI 的懒加载功能

• SAP CRM Fiori 应用和 SAP Commerce Cloud (电商云) UI 如何通过调整CSS来改变UI显示风格

• SAP 产品一脉相承的 UI 增强思路，在 SAP Commerce Cloud (电商云) UI 增强实现中的体现

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

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

实际上，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 COMMERCE

2105 版本的在这里。

将下载到本地的安装包解压，按照下列文档介绍的步骤，在 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 的支持。

接下来是 SAP Commerce 安装的老三样了。进入文件夹：

C:\Code\H2011\installer

依次执行下列三个命令：

• ./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 打开的界面外观依次如下三个截图所示：

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

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

下面进行 SAP Spartacus 的安装。

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

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

• Angular CLI
• Node.js
• Yarn

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

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

ng add @spartacus/schematics

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

ng add @spartacus/organization

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

https://localhost:9002

还记得之前 Jerry 的文章：Jerry在2020 SAP全球技术大会的分享：SAP Spartacus技术介绍的文字版 里介绍的一点：SAP Spartacus 100% 的 API 驱动特性么？

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 调用。

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

感谢阅读。