## 背景介紹
![](https://data-analysis.cn-shanghai.log.aliyuncs.com/logstores/article-logs/track_ua.gif?APIVersion=0.6.0&title=%E8%BD%BB%E6%9D%BE%E6%90%AD%E5%BB%BA%E5%9F%BA%E4%BA%8E%20SpringBoot%20%2B%20Vue%20%E7%9A%84%20Web%20%E5%95%86%E5%9F%8E%E5%BA%94%E7%94%A8&author=%E5%B0%8F%E9%BB%98&src=article)
首先介紹下在本文出現的幾個比較重要的概念：

> **函式計算（Function Compute）**: 函式計算是一個事件驅動的服務，透過函式計算，使用者無需管理伺服器等執行情況，只需編寫程式碼並上傳。函式計算準備計算資源，並以彈性伸縮的方式執行使用者程式碼，而使用者只需根據實際程式碼執行所消耗的資源進行付費。函式計算更多資訊 [參考](https://statistics.functioncompute.com/?title=%E8%BD%BB%E6%9D%BE%E6%90%AD%E5%BB%BA%E5%9F%BA%E4%BA%8E%20SpringBoot%20%2B%20Vue%20%E7%9A%84%20Web%20%E5%95%86%E5%9F%8E%E5%BA%94%E7%94%A8&author=%E5%B0%8F%E9%BB%98&src=article&url=http%3A%2F%2Ffc.console.aliyun.com%2F%3Ffctraceid%3DYXV0aG9yJTNEJUU1JUIwJThGJUU5JUJCJTk4JTI2dGl0bGUlM0QlRTglQkQlQkIlRTYlOUQlQkUlRTYlOTAlQUQlRTUlQkIlQkElRTUlOUYlQkElRTQlQkElOEUlMjBTcHJpbmdCb290JTIwJTJCJTIwVnVlJTIwJUU3JTlBJTg0JTIwV2ViJTIwJUU1JTk1JTg2JUU1JTlGJThFJUU1JUJBJTk0JUU3JTk0JUE4)。
> **Fun**: Fun 是一個用於支援 Serverless 應用部署的工具，能幫助您便捷地管理函式計算、API 閘道器、日誌服務等資源。它透過一個資源配置檔案（template.yml），協助您進行開發、構建、部署操作。Fun 的更多文件 [參考](https://statistics.functioncompute.com/?title=%E8%BD%BB%E6%9D%BE%E6%90%AD%E5%BB%BA%E5%9F%BA%E4%BA%8E%20SpringBoot%20%2B%20Vue%20%E7%9A%84%20Web%20%E5%95%86%E5%9F%8E%E5%BA%94%E7%94%A8&author=%E5%B0%8F%E9%BB%98&src=article&url=https%3A%2F%2Fgithub.com%2Falibaba%2Ffuncraft)。
> **litemall** 是一個基於 Spring Boot、Vue、微信小程式等技術開發的商場系統。它包括 Spring Boot 後端 + Vue 管理員前端 + 微信小程式使用者前端 + Vue 商城移動端。 更多[參考](https://github.com/tanhe123/litemall)。

本文演示如何將該[商城應用](https://github.com/tanhe123/litemall)的 Spring Boot 後端、Vue 管理員前端、Vue 商城移動端三個元件遷移到[函式計算](https://statistics.functioncompute.com/?title=%E8%BD%BB%E6%9D%BE%E6%90%AD%E5%BB%BA%E5%9F%BA%E4%BA%8E%20SpringBoot%20%2B%20Vue%20%E7%9A%84%20Web%20%E5%95%86%E5%9F%8E%E5%BA%94%E7%94%A8&author=%E5%B0%8F%E9%BB%98&src=article&url=http%3A%2F%2Ffc.console.aliyun.com%2F%3Ffctraceid%3DYXV0aG9yJTNEJUU1JUIwJThGJUU5JUJCJTk4JTI2dGl0bGUlM0QlRTglQkQlQkIlRTYlOUQlQkUlRTYlOTAlQUQlRTUlQkIlQkElRTUlOUYlQkElRTQlQkElOEUlMjBTcHJpbmdCb290JTIwJTJCJTIwVnVlJTIwJUU3JTlBJTg0JTIwV2ViJTIwJUU1JTk1JTg2JUU1JTlGJThFJUU1JUJBJTk0JUU3JTk0JUE4)。

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

## 效果演示

### 管理後臺效果演示

開啟 [http://litemall.mofangdegisn.cn](http://litemall.mofangdegisn.cn/) 顯示登陸頁面：

![](https://img.alicdn.com/tfs/TB1qr0KsBr0gK0jSZFnXXbRRXXa-2140-1150.png)

使用預設的賬戶即可登陸。完成後，會進入到後臺管理頁面：

![](https://img.alicdn.com/tfs/TB1eyBLsBr0gK0jSZFnXXbRRXXa-2350-1076.png)

可以在後臺管理頁面新增商品類目、上架商品、使用者管理、系統管理等等。

### 移動端輕商城效果演示

使用手機開啟網址 [http://litemall.mofangdegisn.cn/vue/index.html](http://litemall.mofangdegisn.cn/vue/index.html) ，可以開啟輕商城：

![](https://img.alicdn.com/tfs/TB1eSXJsuL2gK0jSZFmXXc7iXXa-798-1252.png)

可以在輕商城中瀏覽商品，並將喜歡的商品新增到購物車中（暫不支援支付）：

![](https://img.alicdn.com/tfs/TB1DJFKsEz1gK0jSZLeXXb9kVXa-794-1250.png)

## 架構圖

![](https://img.alicdn.com/tfs/TB1LCryrKbviK0jSZFNXXaApXXa-698-558.png)

## 專案部署

### 準備工作
1. **從 aliyun 獲取基礎資訊：**  accountId 可以從[安全設定](https://account.console.aliyun.com/?#/secure)頁面獲取、ak 資訊可以從[安全資訊管理](https://usercenter.console.aliyun.com/#/manage/ak)頁面獲取。
2. **下載 Fun 工具：** 我們會使用 [Fun](https://github.com/alibaba/funcraft/blob/master/docs/usage/installation-zh.md) 工具完成專案的部署工作。這裡建議直接下載二進位制可執行程式。
3. **配置 Fun 工具：** 下載完成後，執行 fun config 配置 aliyun accountId、ak 以及 region 等資訊。如果域名沒有備案，這裡 region 只能選擇海外叢集。如果域名已經備案，則沒有限制。
4. **域名：** 比如本文使用的 [litemall.mofangdegisn.cn](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 訪問，可以參考[這裡的教程](https://help.aliyun.com/document_detail/84514.html)配置 VPC 訪問 RDS。本文的示例為 demo 性質，因此使用的是 0.0.0.0/0 的方式。

### 克隆專案

執行下面的命令克隆專案：

```shell
git clone git@github.com:tanhe123/litemall.git
```

如果沒有安裝 Git，也可以直接在[頁面](https://github.com/tanhe123/litemall)點選 `Downlaoad Zip` 直接下載程式碼並解壓：

![](https://img.alicdn.com/tfs/TB1IdxPsrH1gK0jSZFwXXc7aXXa-940-444.png)

### 為域名建立 CNAME

為我們準備好的域名，新增 CNAME 記錄

### 匯入資料庫

在 MYSQL 資料庫上建立一個名為 litemall 的 database，然後將  litemall-db/sql 中的 litemall_table.sql 以及 litemall_data.sql 兩個檔案匯入到該資料庫中。

如果使用的是 aliyun RDS，可以直接透過下面的方法匯入：

![](https://img.alicdn.com/tfs/TB1rHJNsrj1gK0jSZFOXXc7GpXa-2328-618.png)

### 修改 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 ，執行以下命令：

```shell
DOMAIN=http://litemall.mofangdegisn.cn ./deploy.sh
```

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

開啟配置的[域名](http://litemall.mofangdegisn.cn)即可看到效果。

## 總結

透過本文介紹的技巧，我們實現了快速部署商城應用到[函式計算](https://statistics.functioncompute.com/?title=%E8%BD%BB%E6%9D%BE%E6%90%AD%E5%BB%BA%E5%9F%BA%E4%BA%8E%20SpringBoot%20%2B%20Vue%20%E7%9A%84%20Web%20%E5%95%86%E5%9F%8E%E5%BA%94%E7%94%A8&author=%E5%B0%8F%E9%BB%98&src=article&url=http%3A%2F%2Ffc.console.aliyun.com%2F%3Ffctraceid%3DYXV0aG9yJTNEJUU1JUIwJThGJUU5JUJCJTk4JTI2dGl0bGUlM0QlRTglQkQlQkIlRTYlOUQlQkUlRTYlOTAlQUQlRTUlQkIlQkElRTUlOUYlQkElRTQlQkElOEUlMjBTcHJpbmdCb290JTIwJTJCJTIwVnVlJTIwJUU3JTlBJTg0JTIwV2ViJTIwJUU1JTk1JTg2JUU1JTlGJThFJUU1JUJBJTk0JUU3JTk0JUE4)。

>“[阿里巴巴雲原生](https://developer.aliyun.com/group/alisoftwaretech/)關注微服務、Serverless、容器、Service Mesh 等技術領域、聚焦雲原生流行技術趨勢、雲原生大規模的落地實踐，做最懂雲原生開發者的技術圈。”

輕鬆搭建基於 SpringBoot + Vue 的 Web 商城應用

相關文章