回覆「0」進入交流群，

回覆「1」看每日一題，

回覆「2」看答案解析

什麼是 Serverless Component

Serverless Component 是 Serverless Framework 的，支援多個雲資源編排和組織的場景化解決方案。Serverless Component 的目標是磨平不同雲服務平臺之間差異，你可以將它看作是可以更輕鬆地構建應用程式的依賴模組。目前 Serverless Component 已經形成一個由社群貢獻驅動的生態系統，你可以瀏覽和使用社群的所有元件，快速開發一款自己想要的應用。

Serverless Component 工作原理

基於 Serverless Component 架構，你可以將任何雲服務打包成一個元件。這個元件將含有一份 serverless.yml 配置檔案，並且通過簡單地進行配置就可以使用。本文以 @serverless/tencent-express 來舉例。如果我們要使用它，只需要新建一個專案 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 閘道器的生成等。下面是一張簡單的元件依賴圖：

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

全棧應用實戰

接下來將介紹如何藉助 Serverless Component 快速開發全棧 Web 應用。在開始所有步驟前，需執行 npm install -g serverless 命令，全域性安裝 serverless cli。

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

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

2、後臺服務開發進入目錄 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

3、前端頁面開發本案例使用的是 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    },  },})

4. 配置

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

name: fullstack-application-vuefrontend:  component: '@serverless/tencent-website'  # inputs 為 @serverless/tencent-website 元件的輸入  # 具體配置說明參考：/file/2020/04/01/20200401170219_6522.jpg.md  inputs:    code:      src: dist      root: frontend      hook: npm run build    env:      # 下面的 API服務部署後，獲取對應的 api 請求路徑      apiUrl: ${api.url}api:  component: '@serverless/tencent-express'  # inputs 為 @serverless/tencent-express 元件的輸入  # 具體配置說明參考：/file/2020/04/01/20200401170220_6523.jpg.md  inputs:    code: ./api    functionName: fullstack-vue-api    apigatewayConf:      protocol: https

簡單的介紹下配置：首先，該檔案定義了 frontend 和 api 兩個模組，分別通過 component 屬性指定依賴的 Serverless Component。對於一個標準的 Serverless Component，都會接受一個 inputs 屬性引數，然後元件會根據 inputs 的配置進行處理和部署，具體有關配置的引數說明，請參考相關元件的官方配置說明。

5、部署以上所有的步驟都完成後，接下來就是第一次部署了。為什麼不是直接聯調開發呢？因為後端服務是雲函式，但是到目前為止，所有程式碼都是在本地編寫，前端頁面介面請求連結還不存在。所以需要先將雲函式部署到雲端，才能進行前後端除錯。這個也是本人目前遇到的痛點，因為每次修改後端服務後，都需要重新部署，然後進行前端開發除錯。如果你有更好的建議，歡迎評論指教~部署時，只需要執行 serverless 命令就行，當然如果你需要檢視部署中的 DEBUG 資訊，還需要加上 --debug 引數，如下：

$ serverless# or$ serverless --debug

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

Deploy Success Result這樣一個基於 Serverless Component 的全棧應用就開發好了。趕緊點選你部署好的連結體驗一下吧~線上 Demo：https://br1ovx-efmogqe-1251556596.cos-website.ap-guangzhou.myqcloud.com/

資料庫連線

既然是全棧，怎麼少得了資料庫的讀寫呢？接下來介紹如何新增資料庫的讀寫操作。1、準備想要操作資料庫，必須先擁有一臺資料庫例項，騰訊雲 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"

2、前端修改首先修改前端入口檔案 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，在頁面模板中新增使用者列表和使用者表單：

3、後端修改這裡使用 .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

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

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

最後重新部署一下就行了。以上基於騰訊雲 Serverless Framework 來實現，體驗線上 Demo： https://br1ovx-efmogqe-1251556596.cos-website.ap-guangzhou.myqcloud.com檢視完整的模板倉庫：https://github.com/yugasun/tencent-serverless-demo/tree/master/fullstack-application-vue

小結

當然全棧方案，並沒有這麼簡單，這裡只是簡單介紹，如何使用 Serverless Component，快速實現一個全棧應用。如果要應用到實際的業務場景，我們還需考慮更多的問題，期待大家去探索和發現！

傳送門：GitHub: github.com/serverless官網：serverless.com

Serverless Framework 免費試用計劃

Serverless Framework 免費試用名額已開放，我們誠邀您來試用和體驗最便捷的 Serverless 開發和部署方式。包括服務中使用到雲函式 SCF、API 閘道器、物件儲存 COS 等產品，均在試用期內提供免費資源，並伴有專業的技術支援，幫助您的業務快速、便捷實現 Serverless ！Serverless Framework 落地 Serverless 架構的全雲端開發閉環體驗，覆蓋編碼、運維、除錯、部署等開發全生命週期。使用 Serverless Framework 即可在幾秒鐘內將業務部署至雲端。

詳情可查閱：https://cloud.tencent.com/document/product/1154/38792