開發(fā)者：Serverless 從懵比到實戰(zhàn)(Vue+Express，收藏！)

作者介紹：陌小路，嗶哩嗶哩前端
GitHub：https://github.com/STDSuperman
本文選自「掘金x騰訊云征文|萬物皆可 Serverless」
原文鏈接：https://juejin.cn/post/6895346770177687566

Serverless 是一種執(zhí)行模型（execution model）。在這種模型中，云服務(wù)商負(fù)責(zé)通過動態(tài)地分配資源來執(zhí)行一段代碼。云服務(wù)商僅僅收取執(zhí)行這段代碼所需要資源的費(fèi)用。代碼通常會被運(yùn)行在一個無狀態(tài)的容器內(nèi)，并且可被多種事件觸發(fā)（http 請求、數(shù)據(jù)庫事件、監(jiān)控報警、文件上傳、定時任務(wù)……）。代碼常常會以函數(shù)（function）的形式被上傳到云服務(wù)商以供執(zhí)行，因此Serverless也會被稱作Functions as a Service 或者 FaaS。

• BaaS: Backend as a Service，這里的Backend可以指代任何第三方提供的應(yīng)用和服務(wù)，比如提供云數(shù)據(jù)庫服務(wù)的Firebase和Parse，提供統(tǒng)一用戶身份驗證服務(wù)的Auth0和Amazon Cognito等。
• FaaS: Functions as a Service，應(yīng)用以函數(shù)的形式存在，并由第三方云平臺托管運(yùn)行，比如騰訊云云函數(shù) SCF、AWS Lambda 等。

背景

那么我們?yōu)槭裁葱枰?code style="word-wrap: break-word;margin: 0 2px;background-color: rgba(27,31,35,.05);font-family: Operator Mono, Consolas, Monaco, Menlo, monospace;word-break: break-all;color: #595959;line-height: 1.5;font-size: 90%;padding: 3px 5px;border-radius: 2px;">Serverless呢？對于這個問題來說，我們可以從日常個人的開發(fā)中找到原因。無論是個人博客、小程序，還是個人網(wǎng)站，我們都要面臨一個問題：怎么解決服務(wù)器部署相關(guān)的問題。

對于常規(guī)的項目來說，一般的流程莫過于：購買服務(wù)器 => 域名備案（這一步可能可以不用，看個人需求） => 環(huán)境搭建 => 部署

那么我們?nèi)绻麅H僅是想要開發(fā)一個幾乎不太需要多強(qiáng)的后臺支持時，卻要去做這么多操作，這對于整個項目的開發(fā)來說是十分不友好的，很容易就會讓人放棄上線的念頭。

那么Serverless就是用于解決這個問題的存在，他具備托管服務(wù)端各項功能的能力，讓你無需進(jìn)行上述繁瑣的步驟就能輕松讓你的網(wǎng)站或服務(wù)正常運(yùn)行且可訪問，同時能夠極大降低個人的維護(hù)成本，這對于廣大開發(fā)者而言無疑是十分實用的。

Serverless特點(diǎn)

1. 低成本

眾所周知，我們購買一個云服務(wù)器，拋去人力成本不計，單從收費(fèi)方式上來分析，各廠商都是采用按月計費(fèi)的方式來收取，也就是即使沒有人訪問你的網(wǎng)站或服務(wù)，每月需要支付的租金都是不變的。

然后再來看Serverless應(yīng)用，它是按你實際使用的資源量來進(jìn)行計價的，可以理解為你用多少付多少，可以類比于我們手機(jī)流量的方式來收取。同時，根據(jù)福布斯2015年發(fā)布的一份研究報告，從全年來看，一個典型的數(shù)據(jù)中心里的服務(wù)器平均資源使用率只有可憐的 5%~15%，也就是說如果全部使用Serverless，理論上至少可以節(jié)省80%的運(yùn)行成本。

對比分析之后，Serverless 在成本方面無疑是較低的。

2. 自動擴(kuò)縮容

正如上文所述，函數(shù)即應(yīng)用，每一個函數(shù)只會服務(wù)于特定的功能，它可以隨意的進(jìn)行動態(tài)拓展或者收縮容量，同時不會影響到其他函數(shù)，并且粒度更小，速度更快。反觀我們的單體應(yīng)用和微服務(wù)來說，借助于各種容器編排技術(shù)，雖然也能實現(xiàn)自動擴(kuò)縮容，但由于粒度關(guān)系，相比函數(shù)，始終會存在一定的資源浪費(fèi)。

3. 事件驅(qū)動

函數(shù)本質(zhì)上實現(xiàn)的是一種 IPO（Input-Process-Output）模型，它是短暫的，是即用即走的。這點(diǎn)是函數(shù)區(qū)別于單體應(yīng)用和微服務(wù)的另一個特征。不管是單體應(yīng)用，還是微服務(wù)，都是系統(tǒng)中的常駐進(jìn)程，即便你不使用，它依舊會一直運(yùn)行。而對于函數(shù)來說，沒有請求就不需要消耗任何資源，只有在收到請求時才會調(diào)動資源進(jìn)行響應(yīng)，完成之后就會立刻釋放資源，這在節(jié)省資源方面無疑是巨大的優(yōu)點(diǎn)。

4. 無狀態(tài)

從事件驅(qū)動能力中我們提到了它只有在收到請求時才會工作起來，工作完成之后就立刻被釋放，也就是各種運(yùn)行時的內(nèi)存緩存都是沒有太大效益的，不僅如此，同一個請求方式，第二次訪問服務(wù)時很有可能被調(diào)度到其他新的機(jī)器上，所以本地緩存方式依舊是失效的，函數(shù)只能使用外存（比如Redis，數(shù)據(jù)庫）進(jìn)行緩存，而操作外存都需要通過網(wǎng)絡(luò)，性能跟內(nèi)存、本地硬盤相比差了一到兩個數(shù)量級。

第一個云函數(shù)

這里將利用騰訊云作為演示平臺，首先你需要先登錄到騰訊云。

接著打開云函數(shù)控制臺：

我們選擇新建一個云函數(shù)，在這里我們可以自由選擇開發(fā)的語言以及是否需要模板，為了演示方便還是選擇勾選模板，然后點(diǎn)擊完成，就能進(jìn)入我們正式的代碼編寫環(huán)節(jié)了。

這里我們可以隨意的修改函數(shù)的返回值，接著就能對它進(jìn)行測試?yán)病?/p>

當(dāng)你看到運(yùn)行后的返回結(jié)果和你編寫的代碼返回值一致時就說明你的云函數(shù)已經(jīng)在工作中了。

當(dāng)然，僅僅只是這么測試一下自然很不過癮，我還想能通過http請求的方式來訪問這個云函數(shù)，又該怎么做呢？

這個其實也很簡單，我們選擇左側(cè)的觸發(fā)管理，新建一個觸發(fā)策略，并選擇觸發(fā)方式為API網(wǎng)關(guān)，然后直接點(diǎn)擊提交。

這個時候我們其實已經(jīng)可以通過url進(jìn)行訪問了，我們復(fù)制訪問路徑，然后在瀏覽器訪問，就能看到我們云函數(shù)給我們返回的內(nèi)容了。

本地開發(fā)

介紹完在云平臺上創(chuàng)建函數(shù)的方式，接下來就該介紹如何進(jìn)行本地開發(fā)并部署的方式了：

1. 安裝

這里將以Node作為開發(fā)語言進(jìn)行演示，更多語言安裝方式請參考官方文檔。

npm i serverless -g

先安裝對應(yīng)的包，這里可以安裝到全局便于以后使用。

接著使用相關(guān)命令生成demo模板項目：

serverless init sls-demo

創(chuàng)建完成之后，我們進(jìn)入生成目錄，映入眼簾的就是一個src目錄和一個serverless.yml配置文件。我們一般將源代碼都放置在src目錄下，當(dāng)然，這個也看個人喜好，如果你不喜歡，可以選擇放在任意文件夾下，不過就需要修改一下配置文件中的src字段對應(yīng)的值了，它默認(rèn)是指向了當(dāng)前目錄下的src目錄。

組件信息：

參數(shù)信息（inputs下對應(yīng)的字段）：

想查詢更多詳細(xì)信息可以參考官方文檔。

2. 開發(fā)

我們可以將業(yè)務(wù)的各項代碼都放置在src目錄下，這里以當(dāng)前demo項目舉例。

我們打開src/index.js，在暴露的這個函數(shù)中我們可以盡情的做一些騷操作，然后返回一個結(jié)果，并進(jìn)行測試。你可以連接數(shù)據(jù)庫操作，或者是發(fā)起請求等，根據(jù)你自己選取的語言來進(jìn)行代碼編寫，筆者這里是選擇的Nodejs環(huán)境進(jìn)行調(diào)試。

不僅如此，我們可以配合其他Node框架

3. 部署

部署就比較簡單了，只要一句小小的命令即可輕松部署到云端：

serverless deploy

如果你屬于第一次部署的話，將會發(fā)現(xiàn)在控制臺打印出了一個二維碼，你需要做的就是用微信進(jìn)行掃碼授權(quán)，然后就靜待部署完成即可。

這里你部署完成之后會發(fā)現(xiàn)你的目錄下生成了一個.env文件，里面保存了你部署需要用到的私密數(shù)據(jù)，然后第二次部署時就可以不用掃碼就能成功部署了（這個授權(quán)信息是有時效的，如果失效則需要重新授權(quán)）。

4. 調(diào)試

執(zhí)行觸發(fā)函數(shù)命令，function= 后面跟著的是你的云函數(shù)名稱，這樣就能判斷是否部署成功了。

serverless invoke  --inputs function=scfdemo-dev-scf-demo

效果預(yù)覽：

全棧項目實戰(zhàn)

如果僅僅只學(xué)會了云函數(shù)的玩法會不會就有點(diǎn)顯示不出serverless的方便性了，這里將用express + Vue3帶來一個實戰(zhàn)項目部署的過程。

結(jié)構(gòu)搭建

首先創(chuàng)建一個目錄來放置我們的前后端項目，然后進(jìn)入目錄，新建一個api目錄用于放置我們服務(wù)端項目代碼，接著在api同級目錄下創(chuàng)建一個vue項目（這里是沒有限制的，你可以選擇react或vue），筆者為了方便，就采用vite創(chuàng)建了一個vue3項目。

同時在該目錄下創(chuàng)建一個serverless.yml作為整體項目的配置文件。

目錄結(jié)構(gòu)圖如下所示，.serverless 這個目錄不用管，后面部署的時候自動生成的。

這樣我們基本的目錄結(jié)構(gòu)就搭好了，下面開始配置一下吧：

a. 服務(wù)端代碼編寫

首先我們打開api目錄，創(chuàng)建一個app.js作為入口文件,并采用npm init初始化一下項目，并安裝express和cors，該演示項目只用這兩個包：

npm init

npm i express cors -S

然后在app.js中編寫如下代碼，并將express實例進(jìn)行導(dǎo)出。

記住這里不要寫app.listen(...)，只要默認(rèn)導(dǎo)出就行了

// app.js文件中代碼

const express = require('express');
const cors = require('cors');

const app = express();

app.use(cors);

app.use('/*', (req, res) => {
    res.send({
        msg: 'hello world'
    })
})

module.exports = app;

b. 前端代碼編寫

這里為了演示方便就寫了一個簡單的例子，看個人愛好來編寫自己喜歡的項目。

首先打開front目錄下的App.vue，并改寫代碼：

<template>
<div>{{message}}div>
template>

<script>
import '../env'; // 部署的時候自動生成
import {
    ref
} from 'vue'

export default {
    name: 'App',
    setup(props) {
        const message = ref();
        fetch(window.env.apiUrl).then(res => res.json()).then(({
            msg
        }) => {
            message.value = msg;
        });

        return {
            message
        }
    }
}
script>

這里筆者是采用vue3編寫的，讀者自己看個人喜歡選擇框架吧，這里主要是想演示一下發(fā)起請求然后渲染頁面的這個過程，這個import '../env'是必要的，我們不必在意它在不在我們項目的目錄下，待會我們部署代碼的時候會自動生成的，也就是我們這里直接導(dǎo)入就行了，它主要的做的事情就是將我們配置好的環(huán)境變量掛在到window上。

筆者這里在serverless.yml文件中配置了項目部署之后的服務(wù)端url的環(huán)境變量（window.env.apiUrl），具體配置方式后面會提到，這里先用就行了

我們看到script中的代碼，這里其實筆者只做了一件事，請求我們服務(wù)器api，然后獲取返回值將他渲染到頁面上，功能比較簡單這里就不進(jìn)行詳細(xì)解釋了。

c. serverless 配置文件

最后一步，我們配置一下項目的部署配置，參數(shù)的用途看代碼的注釋即可，比較簡單。

# 項目名字
name: tencent-fullstack-vue-app

# 前端相關(guān)配置
dashboard:
  # 采用的serverless組件
  component: '@serverless/tencent-website'
  # 設(shè)置輸入?yún)?shù)
  inputs:
    # 我們項目源代碼配置
    code:
      # 部署的文件目錄
      src: dist
      # 項目的根目錄
      root: front
      # 部署之前執(zhí)行的命令，這里用來先打包出dist目錄，然后再將dist目錄部署上去，也就是上面配置的src對應(yīng)的目錄
      hook: npm run build
    # 環(huán)境變量
    env:
      # 部署的路徑
      apiUrl: ${api.url}
# 服務(wù)端相關(guān)配置
api:
  # 采用的serverless組件
  component: '@serverless/tencent-express'
  inputs:
    # 部署上去的服務(wù)端目錄
    code: './api'
    # 云函數(shù)名字
    functionName: tencent-fullstack-vue-api
    apigatewayConf:
      # 協(xié)議
      protocols:
       - https

從這里我們可以看到我們配置的環(huán)境變量apiUrl，這也就是我們上文中在前端項目中用到的屬性，它會在項目部署的時候自動幫我們掛載到window上，我們直接用window.env.apiUrl訪問就行了（前提你需要導(dǎo)入前端項目中根目錄的env文件，這個是自動生成的，上文也有提到）

調(diào)試

上面的工作完成之后就可以開始部署了：

serverless --debug

執(zhí)行上述命令，它會首先自動部署項目到云端，然后將項目的地址打印在控制臺上，我們復(fù)制地址直接訪問就能看到我們部署好的項目了，這里應(yīng)該也會要求你進(jìn)行登錄授權(quán)，控制臺會打印出二維碼，微信掃碼登錄一下就好了。

部署成功后我們控制臺就能看到以上畫面，我們復(fù)制url到瀏覽器打開，我們熟悉的hello world就已經(jīng)完美的展現(xiàn)在頁面上了。

總結(jié)

當(dāng)然這只是一個入門級的教程，這里僅僅只是介紹了Serverless的一小部分功能，而Serverless的強(qiáng)大遠(yuǎn)非如此，這就需要廣大開發(fā)者逐步的開啟這個新世界的大門了。