如果我們要使用它，只需要新建一個專案 express-demo，然後修改 serverless.yml 配置如下：

express:  component: '@serverless/tencent-express'  inputs:    region: ap-shanghai

因為 serverless 框架部署到雲的鑑權都是基於 dotenv 注入全域性的變數來實現的，所以還得在根目錄下新增 .env 檔案，並配置對應的鑑權引數。

之後我們就可以在 app.js 中輕鬆的編寫基於 express 的介面服務了：

const express = require('express')const app = express()app.get('/', function(req, res) {  res.send('Hello Express')})// 不要忘了匯出，因為該元件會對它進行包裝，輸出成雲函式module.exports = app

這背後所有的流程邏輯都是元件內部實現的，包括：雲函式的部署，API閘道器的生成等。

下面是一張簡單的元件依賴圖：

通過此圖可以清晰地檢視元件帶來的收益，藉助社群現有的 @serverless/tencent-express 和 @serverless/tencent-website 元件，我們就可以很快構建想要的全棧應用。

在開始所有步驟前，需執行 npm install -g serverless 命令，全域性安裝 serverless cli。

準備

新建專案目錄 fullstack-application-vue，在該專案目錄下新增 api 和 dashboard 目錄。然後新增 serverless.yml 和 .env 配置檔案，專案目錄結構如下：

├── README.md       // 專案說明文件├── api                   // Restful api 後端服務├── dashboard           // 前端頁面├── .env                    // 騰訊雲相關鑑權引數：TENCENT_APP_ID，TENCENT_SECRET_ID，TENCENT_SECRET_KEY└── serverless.yml  // serverless 檔案

後端服務開發

進入目錄 api，新增 app.js 檔案，編寫 express 服務程式碼，這裡先新增一個路由 /，並返回當前伺服器時間：

const express = require('express');const cors = require('cors');const app = express();app.use(cors());app.get('/', (req, res) => {  res.send(JSON.stringfy({ message: `Server time: ${new Date().toString()}` }));});module.exports = app;

前端頁面開發

本案例使用的是 Vue.js + Parcel 的前端模板，當然你可以使用任何前端專案腳手架，比如 Vue.js 官方推薦的 Vue CLI 生成的專案。進入 dashboard 目錄，靜態資源你可以直接複製我準備好的 專案模板，編寫入口檔案 src/index.js:

// 這裡初始是沒有 env.js 模組的，第一次部署後會自動生成require('../env');const Vue = require('vue');module.exports = new Vue({  el: '#root',  data: {    message: 'Click me!',    isVisible: true,  },  methods: {    async queryServer() {      const response = await fetch(window.env.apiUrl);      const result = await response.json();      this.message = result.message;    },  },});

配置

前後端程式碼都準備好了，現在我們還需要簡單配置下 serverless.yml 檔案了：

部署

以上所有的步驟都完成後，接下來就是第一次部署了。

為什麼不是直接聯調開發呢？因為後端服務是雲函式，但是到目前為止，所有程式碼都是在本地編寫，前端頁面介面請求連結還不存在。所以需要先將雲函式部署到雲端，才能進行前後端除錯。這個也是本人目前遇到的痛點，因為每次修改後端服務後，都需要重新部署，然後進行前端開發除錯。如果你有更好的建議，歡迎評論指教~

部署時，只需要執行 serverless 命令就行，當然如果你需要檢視部署中的 DEBUG 資訊，還需要加上 --debug 引數，如下：

$ serverless# or$ serverless --debug

然後終端會 balabalabala~, 輸出一大堆 DEBUG 資訊，最後只需要看到綠色的 done 就行了：

線上 Demo

資料庫連線

既然是全棧，怎麼少得了資料庫的讀寫呢？接下來介紹如何新增資料庫的讀寫操作。

準備

想要操作資料庫，必須先擁有一臺資料庫例項，騰訊雲Mysql雲資料庫 現在也很便宜，可以購買一個最基本按量計費 1核1G記憶體 的 1小時收費不到 4 毛錢，是不是非常划算。購買好之後初始化配置，然後新增一個 serverless 資料庫，同時新增一張 users 表：

CREATE TABLE if not exists `test` ( `name` varchar (32) NOT NULL ,`email` varchar (64) NOT NULL ,`site` varchar (128) NOT NULL ) ENGINE = innodb DEFAULT CHARACTER SET = "utf8mb4" COLLATE = "utf8mb4_general_ci"

前端修改

首先修改前端入口檔案 frontend/src/index.js 新增相關函式操作：

require('../env');const Vue = require('vue');const axios = require('axios');module.exports = new Vue({  el: '#root',  data: {    // ...    form: {      name: '',      email: '',      site: '',    },    userList: [],  },  methods: {    // ...    // 獲取使用者列表    async getUsers() {      const res = await axios.get(window.env.apiUrl + 'users');      this.userList = res.data && res.data.data || [];    },    // 新增一個使用者    async addUser() {      const data = this.form;      const res = await axios.post(window.env.apiUrl + 'users', data);      console.log(res);      if (res.data) {        this.getUsers();      }    },  },  mounted() {    // 檢視掛在後，獲取使用者列表    this.getUsers();  }});

當然你還需要修改檢視模板檔案 frontend/index.html，在頁面模板中新增使用者列表和使用者表單：

後端修改

這裡使用 .env 來進行資料庫連線引數配置，在 api 目錄下新增 .env 檔案，將之前的資料庫配置填入檔案中，參考 api/.env.example 檔案。然後新增並安裝 dotenv 依賴，同時新增 mysql2 模組進行資料庫操作，body-parser 模組進行 POST 請求時的 body 解析。

之後新增後端api，進行資料庫讀寫，修改後的 api/app.js 程式碼如下：

'use strict';require('dotenv').config();const express = require('express');const cors = require('cors');const mysql = require('mysql2');const bodyParser = require('body-parser');// init mysql connectionfunction initMysqlPool() {  const { DB_HOST, DB_PORT, DB_DATABASE, DB_USER, DB_PASSWORD } = process.env;  const promisePool = mysql    .createPool({      host: DB_HOST,      user: DB_USER,      port: DB_PORT,      password: DB_PASSWORD,      database: DB_DATABASE,      connectionLimit: 1,    })    .promise();  return promisePool;}const app = express();app.use(bodyParser.json());app.use(cors());if (!app.promisePool) {  app.promisePool = initMysqlPool();}app.get('/', (req, res) => {  res.send(JSON.stringify({ message: `Server time: ${new Date().toString()}` }));});// get user listapp.get('/users', async (req, res) => {  const [data] = await app.promisePool.query('select * from users');  res.send(    JSON.stringify({      data: data,    }),  );});// add new userapp.post('/users', async (req, res) => {  let result = '';  try {    const { name, email, site } = req.body;    const [res] = await app.promisePool.query('INSERT into users SET ?', {      name: name,      email: email,      site: site,    });    result = {      data: res && res.insertId,      message: 'Insert Success',    };  } catch (e) {    result = {      data: e,      message: 'Insert Fail',    };  }  res.send(JSON.stringify(result));});module.exports = app;

配置修改

這裡資料庫訪問需要通過騰訊雲私有網路，所以還需要為雲函式配置私有網路（VPC），同時還需要配置能夠操作資料庫的角色（關於角色配置，可以直接到 角色管理頁面），這裡我新建了一個 QCS_SCFFull 的角色，可以用來訪問資料庫。然後修改 serverless.yml 中的配置：

# ...api:  component: '@serverless/tencent-express'  # more configuration for @serverless/tencent-website,  # refer to: /file/2020/03/02/20200302193841_65489.jpg.md  inputs:    code: ./api    functionName: fullstack-vue-api    role: QCS_SCFFull # 此角色必須具備訪問資料庫許可權    functionConf:      # 這個是用來訪問新建立資料庫的私有網路，可以在你的資料庫例項管理頁面檢視      vpcConfig:          vpcId: vpc-6n5x55kb          subnetId: subnet-4cvr91js    apigatewayConf:      protocol: https

最後重新部署一下就行了。