一小時內在本地搭建 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 前后臺運行環境時遇到問題，歡迎留言討論。

感謝閱讀。

ABAP Angular CloudIDE JSON 自建電商

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。