這是Jerry 2021年的第 21 篇文章，也是汪子熙公眾號總共第 292 篇原創文章。

最近一段時間, 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%20COMMERCE

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 前后臺運行環境時遇到問題，歡迎留言討論。

感謝閱讀。

更多閱讀

• 從產品展示頁面談談Hybris的特有概念和設計結構

• 從產品展示頁面談談Hybris系列之二: DTO, Converter和Populator

• Hybris Enterprise Commerce Platform 服務層的設計與實現

• 從一個實際的例子出發，談談SAP Commerce Cloud電商云的UI自定義開發

• SAP Commerce Cloud (電商云) UI 的懶加載功能

• SAP CRM Fiori 應用和 SAP Commerce Cloud (電商云) UI 如何通過調整CSS來改變UI顯示風格

• SAP 產品一脈相承的 UI 增強思路，在 SAP Commerce Cloud (電商云) UI 增強實現中的體現

• Jerry在2020 SAP全球技術大會的分享：SAP Spartacus技術介紹的文字版

更多Jerry的原創文章，盡在：“汪子熙”:

總結

以上是生活随笔為你收集整理的一小时内在本地搭建 SAP Commerce Cloud(电商云)的前后台运行环境的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。