基於 Serverless Component 全棧解決方案（上）

前端時空

前端網紅集結號，傳遞一線全棧技術，帶你穿越前端時空。

公眾號「前端時空」最近推出每日一題活動，

回覆「0」進入交流群，

回覆「1」看每日一題，

回覆「2」看答案解析

來源 | TencentServerless

Serverless Component

什麼是 Serverless Component

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

Serverless Component 工作原理

基於 Serverless Component 架構，你可以將任何雲服務打包成一個組件。這個組件將含有一份 serverless.yml 配置文件，並且通過簡單地進行配置就可以使用。本文以 @serverless/tencent-express 來舉例。如果我們要使用它，只需要新建一個項目 express-demo，然後修改 serverless.yml 配置如下：

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

因為 serverless 框架部署到雲的鑑權都是基於 dotenv 注入全局的變量來實現的，所以還得在根目錄下新增 .env 文件，並配置對應的鑑權參數。之後我們就可以在 app.js 中輕鬆的編寫基於 express 的接口服務了：

<code>const express = require('express')
const app = express()
app.get('/', function(req, res) { 

  res.send('Hello Express')
})
// 不要忘了導出，因為該組件會對它進行包裝，輸出成雲函數
module.exports = app
/<code>

這背後所有的流程邏輯都是組件內部實現的，包括：雲函數的部署，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 配置文件，項目目錄結構如下：

<code>├── 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 文件
/<code>

2、後臺服務開發進入目錄 api，新增 app.js 文件，編寫 express 服務代碼，這裡先新增一個路由 /，並返回當前服務器時間：

<code>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
/<code>

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

<code>// 這裡初始是沒有 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
    },
  },
})
/<code>

4. 配置

前後端代碼都準備好了，現在我們還需要簡單配置下 serverless.yml 文件了：

<code>name: fullstack-application-vue
frontend:
  component: '@serverless/tencent-website'
  # inputs 為 @serverless/tencent-website 組件的輸入
  # 具體配置說明參考：https://github.com/serverless-components/tencent-website/blob/master/docs/configure.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 組件的輸入
  # 具體配置說明參考：https://github.com/serverless-components/tencent-express/blob/master/docs/configure.md
  inputs:
    code: ./api
    functionName: fullstack-vue-api
    apigatewayConf:
      protocol: https
/<code>

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

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

<code>$ serverless
# or
$ serverless --debug
/<code>

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

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

數據庫連接

既然是全棧，怎麼少得了數據庫的讀寫呢？接下來介紹如何添加數據庫的讀寫操作。

<code>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"/<code>

2、前端修改首先修改前端入口文件 frontend/src/index.js 新增相關函數操作：

<code>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()
  },
})
/<code>

當然你還需要修改視圖模板文件 frontend/index.html，在頁面模板中新增用戶列表和用戶表單：

<code>

  

    <label>
      Name:
    /<label>
    

  

  

    <label>
      Email:
    /<label>
    

  

  

    <label>
      Site:
    /<label>
    

  

  <button>Submit/<button>
/
 


  

    

      

        Name: {{ item.name }}
        Email: {{ item.email }}
        Site: {{ item.site }}
      

    

  

  No Data
/
/<code>

注意：如果還不熟悉 Vue.js 語法，請移至 官方文檔，當然如果你想快速上手 Vue.js 開發，也可以閱讀這份 Vue 從入門到精通 教程。

3、後端修改
這裡使用 .env 來進行數據庫連接參數配置，在 api 目錄下新增 .env 文件，將之前的數據庫配置填入文件中，參考 api/.env.example 文件。然後添加並安裝 dotenv 依賴，同時添加 mysql2 模塊進行數據庫操作，body-parser 模塊進行 POST 請求時的 body 解析。之後新增後端 api，進行數據庫讀寫，修改後的 api/app.js 代碼如下：

<code>'use strict'
require('dotenv').config() 

const express = require('express')
const cors = require('cors')
const mysql = require('mysql2')
const bodyParser = require('body-parser')
// init mysql connection
function 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 list
app.get('/users', async (req, res) => {
  const [data] = await app.promisePool.query('select * from users')
  res.send(
    JSON.stringify({
      data: data,
    })
  )
})
// add new user
app.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
/<code>

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

<code># ...
api:
  component: '@serverless/tencent-express'
  # more configuration for @serverless/tencent-website,
  # refer to: https://github.com/serverless-components/tencent-express/blob/master/docs/configure.md
  inputs:
    code: ./api
    functionName: fullstack-vue-api
    role: QCS_SCFFull # 此角色必須具備訪問數據庫權限
    functionConf:
      # 這個是用來訪問新創建數據庫的私有網絡，可以在你的數據庫實例管理頁面查看
      vpcConfig:
        vpcId: vpc-6n5x55kb
        subnetId: subnet-4cvr91js
    apigatewayConf:
      protocol: https
/<code> 

最後重新部署一下就行了。以上基於騰訊雲 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 中文網，您可以在最佳實踐裡體驗更多關於 Serverless 應用的開發！

Serverless Framework 免費試用計劃

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

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

閱讀更多 前端時空 的文章

關鍵字: 全棧 技術 雲計算