輕鬆搭建基於 SpringBoot + Vue 的 Web 商城應用
背景介紹
首先介紹下在本文出現的幾個比較重要的概念：
函式計算（Function Compute）: 函式計算是一個事件驅動的服務，通過函式計算，使用者無需管理伺服器等執行情況，只需編寫程式碼並上傳。函式計算準備計算資源，並以彈性伸縮的方式執行使用者程式碼，而使用者只需根據實際程式碼執行所消耗的資源進行付費。函式計算更多資訊 參考。
Fun: Fun 是一個用於支援 Serverless 應用部署的工具，能幫助您便捷地管理函式計算、API 閘道器、日誌服務等資源。它通過一個資源配置檔案（template.yml），協助您進行開發、構建、部署操作。Fun 的更多文件 參考。
litemall 是一個基於 Spring Boot、Vue、微信小程式等技術開發的商場系統。它包括 Spring Boot 後端 + Vue 管理員前端 + 微信小程式使用者前端 + Vue 商城移動端。 更多參考。
本文演示如何將該商城應用的 Spring Boot 後端、Vue 管理員前端、Vue 商城移動端三個元件遷移到函式計算。
下面是一個已經將到函式計算應用示例效果演示。
效果演示
管理後臺效果演示
開啟 http://litemall.mofangdegisn.cn 顯示登陸頁面：
使用預設的賬戶即可登陸。完成後，會進入到後臺管理頁面：
可以在後臺管理頁面新增商品類目、上架商品、使用者管理、系統管理等等。
移動端輕商城效果演示
使用手機開啟網址 http://litemall.mofangdegisn.cn/vue/index.html ，可以開啟輕商城：
可以在輕商城中瀏覽商品，並將喜歡的商品新增到購物車中（暫不支援支付）：
架構圖
專案部署
準備工作
- 從 aliyun 獲取基礎資訊： accountId 可以從安全設定頁面獲取、ak 資訊可以從安全資訊管理頁面獲取。
- 下載 Fun 工具： 我們會使用 Fun 工具完成專案的部署工作。這裡建議直接下載二進位制可執行程式。
- 配置 Fun 工具： 下載完成後，執行 fun config 配置 aliyun accountId、ak 以及 region 等資訊。如果域名沒有備案，這裡 region 只能選擇海外叢集。如果域名已經備案，則沒有限制。
- 域名： 比如本文使用的 litemall.mofangdegisn.cn 域名。在域名所在的控制檯新增一個 CNAME 域名解析，將記錄值填寫為 1911504709953557.cn-hangzhou.fc.aliyuncs.com，然後將這裡的 1911504709953557 替換成自己的 accountid，cn-hangzhou 替換為自己在上一步配置的 region。
- Mysql： 可以是自己搭建的 MYSQL 資料庫，也可以使用 aliyun RDS 資料庫，準備好 MYSQL 的使用者名稱以及密碼。如果僅僅是 demo 示例，可以將 rds 白名單設定為 0.0.0.0/0，並申請外網地址，如果是非示例場景，需要為函式計算配置 VPC 訪問，可以參考這裡的教程配置 VPC 訪問 RDS。本文的示例為 demo 性質，因此使用的是 0.0.0.0/0 的方式。
克隆專案
執行下面的命令克隆專案：
git clone [email protected]:tanhe123/litemall.git如果沒有安裝 Git，也可以直接在頁面點選 Downlaoad Zip 直接下載程式碼並解壓：
為域名建立 CNAME
為我們準備好的域名，新增 CNAME 記錄
匯入資料庫
在 MYSQL 資料庫上建立一個名為 litemall 的 database，然後將 litemall-db/sql 中的 litemall_table.sql 以及 litemall_data.sql 兩個檔案匯入到該資料庫中。
如果使用的是 aliyun RDS，可以直接通過下面的方法匯入：
修改 template.yml 中的配置
修改 template.yml 中的 SPRING_DATASOURCE_DRUID_URL 為資料庫地址，修改 SPRING_DATASOURCE_DRUID_USERNAME 為資料庫使用者名稱，修改 SPRING_DATASOURCE_DRUID_PASSWORD 為使用者名稱密碼。
最後將 template.yml 中的域名 litemall.mofangdegisn.cn 替換為自己域名。
安裝商城 Vue 管理員後端 + Vue 商城移動端的 npm 依賴
對於 linux 或者 mac，可以直接執行專案內的 ./install.sh，該命令會分別進入到 litemall-admin 以及 litemall-vue 執行 cnpm install。
編譯 Java 專案並部署
假如我們要使用的域名是 http://litemall.mofangdegisn.cn ，執行以下命令：
DOMAIN=http://litemall.mofangdegisn.cn ./deploy.sh需要將上面的域名替換為使用者自己的域名，執行完畢後，完成部署。
開啟配置的域名即可看到效果。
總結
通過本文介紹的技巧，我們實現了快速部署商城應用到函式計算。
“阿里巴巴雲原生關注微服務、Serverless、容器、Service Mesh 等技術領域、聚焦雲原生流行技術趨勢、雲原生大規模的落地實踐，做最懂雲原生開發者的技術圈。”