輕鬆搭建基於 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 ，能夠打開輕商城：

能夠在輕商城中瀏覽商品，並將喜歡的商品添加到購物車中（暫不支持支付）：

架構圖

項目部署

準備工做

1. 從 aliyun 獲取基礎信息： accountId 能夠從安全設置頁面獲取、ak 信息能夠從安全信息管理頁面獲取。
2. 下載 Fun 工具： 咱們會使用 Fun 工具完成項目的部署工做。這裏建議直接下載二進制可執行程序。
3. 配置 Fun 工具： 下載完成後，執行 fun config 配置 aliyun accountId、ak 以及 region 等信息。若是域名沒有備案，這裏 region 只能選擇海外集羣。若是域名已經備案，則沒有限制。
4. 域名： 好比本文使用的 litemall.mofangdegisn.cn 域名。在域名所在的控制檯添加一個 CNAME 域名解析，將記錄值填寫爲 1911504709953557.cn-hangzhou.fc.aliyuncs.com，而後將這裏的 1911504709953557 替換成本身的 accountid，cn-hangzhou 替換爲本身在上一步配置的 region。
5. Mysql： 能夠是本身搭建的 MYSQL 數據庫，也可使用 aliyun RDS 數據庫，準備好 MYSQL 的用戶名以及密碼。若是僅僅是 demo 示例，能夠將 rds 白名單設置爲 0.0.0.0/0，並申請外網地址，若是是非示例場景，須要爲函數計算配置 VPC 訪問，能夠參考這裏的教程配置 VPC 訪問 RDS。本文的示例爲 demo 性質，所以使用的是 0.0.0.0/0 的方式。

克隆項目

執行下面的命令克隆項目：

若是沒有安裝 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 ，執行如下命令：

須要將上面的域名替換爲用戶本身的域名，執行完畢後，完成部署。

打開配置的域名便可看到效果。

總結

經過本文介紹的技巧，咱們實現了快速部署商城應用到函數計算。

---

本文做者：tanhe123

原文連接

本文爲阿里雲內容，未經容許不得轉載。