背景介紹

首先介紹下在本文出現的幾個比較重要的概念：

函數計算（Function Compute）: 函數計算是一個事件驅動的服務，通過函數計算，用戶無需管理服務器等運行情況，只需編寫代碼并上傳。函數計算準備計算資源，并以彈性伸縮的方式運行用戶代碼，而用戶只需根據實際代碼運行所消耗的資源進行付費。函數計算更多信息 [參考](https://statistics.functioncompute.com/?title=輕松搭建基于 SpringBoot + Vue 的 Web 商城應用&author=小默&src=article&url=http://fc.console.aliyun.com/?fctraceid=YXV0aG9yJTNEJUU1JUIwJThGJUU5JUJCJTk4JTI2dGl0bGUlM0QlRTglQkQlQkIlRTYlOUQlQkUlRTYlOTAlQUQlRTUlQkIlQkElRTUlOUYlQkElRTQlQkElOEUlMjBTcHJpbmdCb290JTIwJTJCJTIwVnVlJTIwJUU3JTlBJTg0JTIwV2ViJTIwJUU1JTk1JTg2JUU1JTlGJThFJUU1JUJBJTk0JUU3JTk0JUE4)。
Fun: Fun 是一個用于支持 Serverless 應用部署的工具，能幫助您便捷地管理函數計算、API 網關、日志服務等資源。它通過一個資源配置文件（template.yml），協助您進行開發、構建、部署操作。Fun 的更多文檔 [參考](https://statistics.functioncompute.com/?title=輕松搭建基于 SpringBoot + Vue 的 Web 商城應用&author=小默&src=article&url=https://github.com/alibaba/funcraft)。
litemall 是一個基于 Spring Boot、Vue、微信小程序等技術開發的商場系統。它包括 Spring Boot 后端 Vue 管理員前端 微信小程序用戶前端 Vue 商城移動端。 更多參考。

本文演示如何將該商城應用的 Spring Boot 后端、Vue 管理員前端、Vue 商城移動端三個組件遷移到[函數計算](https://statistics.functioncompute.com/?title=輕松搭建基于 SpringBoot + Vue 的 Web 商城應用&author=小默&src=article&url=http://fc.console.aliyun.com/?fctraceid=YXV0aG9yJTNEJUU1JUIwJThGJUU5JUJCJTk4JTI2dGl0bGUlM0QlRTglQkQlQkIlRTYlOUQlQkUlRTYlOTAlQUQlRTUlQkIlQkElRTUlOUYlQkElRTQlQkElOEUlMjBTcHJpbmdCb290JTIwJTJCJTIwVnVlJTIwJUU3JTlBJTg0JTIwV2ViJTIwJUU1JTk1JTg2JUU1JTlGJThFJUU1JUJBJTk0JUU3JTk0JUE4)。

下面是一個已經將到函數計算應用示例效果演示。

效果演示

管理后臺效果演示

打開 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 git@github.com: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

需要將上面的域名替換為用戶自己的域名，執行完畢后，完成部署。

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

總結

通過本文介紹的技巧，我們實現了快速部署商城應用到[函數計算](https://statistics.functioncompute.com/?title=輕松搭建基于 SpringBoot + Vue 的 Web 商城應用&author=小默&src=article&url=http://fc.console.aliyun.com/?fctraceid=YXV0aG9yJTNEJUU1JUIwJThGJUU5JUJCJTk4JTI2dGl0bGUlM0QlRTglQkQlQkIlRTYlOUQlQkUlRTYlOTAlQUQlRTUlQkIlQkElRTUlOUYlQkElRTQlQkElOEUlMjBTcHJpbmdCb290JTIwJTJCJTIwVnVlJTIwJUU3JTlBJTg0JTIwV2ViJTIwJUU1JTk1JTg2JUU1JTlGJThFJUU1JUJBJTk0JUU3JTk0JUE4)。

“阿里巴巴云原生關注微服務、Serverless、容器、Service Mesh 等技術領域、聚焦云原生流行技術趨勢、云原生大規模的落地實踐，做最懂云原生開發者的技術圈?！?/p>

總結

以上是生活随笔為你收集整理的轻松搭建基于 SpringBoot Vue 的 Web 商城应用的全部內容，希望文章能夠幫你解決所遇到的問題。

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