開發者：Serverless 從懵逼到實戰

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

• BaaS: Backend as a Service，這裏的Backend可以指代任何第三方提供的應用和服務，比如提供雲數據庫服務的Firebase和Parse，提供統一用戶身份驗證服務的Auth0和Amazon Cognito等。
• FaaS: Functions as a Service，應用以函數的形式存在，並由第三方雲平臺託管運行，比如騰訊云云函數 SCF、AWS Lambda 等。

背景

那麼我們爲什麼需要Serverless呢？對於這個問題來說，我們可以從日常個人的開發中找到原因。無論是個人博客、小程序，還是個人網站，我們都要面臨一個問題：怎麼解決服務器部署相關的問題。

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

那麼我們如果僅僅是想要開發一個幾乎不太需要多強的後臺支持時，卻要去做這麼多操作，這對於整個項目的開發來說是十分不友好的，很容易就會讓人放棄上線的念頭。

那麼Serverless就是用於解決這個問題的存在，他具備託管服務端各項功能的能力，讓你無需進行上述繁瑣的步驟就能輕鬆讓你的網站或服務正常運行且可訪問，同時能夠極大降低個人的維護成本，這對於廣大開發者而言無疑是十分實用的。

Serverless特點

1. 低成本

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

然後再來看Serverless應用，它是按你實際使用的資源量來進行計價的，可以理解爲你用多少付多少，可以類比於我們手機流量的方式來收取。同時，根據福布斯2015年發佈的一份研究報告，從全年來看，一個典型的數據中心裏的服務器平均資源使用率只有可憐的 5%~15%，也就是說如果全部使用Serverless，理論上至少可以節省80%的運行成本。

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

2. 自動擴縮容

正如上文所述，函數即應用，每一個函數只會服務於特定的功能，它可以隨意的進行動態拓展或者收縮容量，同時不會影響到其他函數，並且粒度更小，速度更快。反觀我們的單體應用和微服務來說，藉助於各種容器編排技術，雖然也能實現自動擴縮容，但由於粒度關係，相比函數，始終會存在一定的資源浪費。

3. 事件驅動

函數本質上實現的是一種 IPO（Input-Process-Output）模型，它是短暫的，是即用即走的。這點是函數區別於單體應用和微服務的另一個特徵。不管是單體應用，還是微服務，都是系統中的常駐進程，即便你不使用，它依舊會一直運行。而對於函數來說，沒有請求就不需要消耗任何資源，只有在收到請求時纔會調動資源進行響應，完成之後就會立刻釋放資源，這在節省資源方面無疑是巨大的優點。

4. 無狀態

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

第一個雲函數

這裏將利用騰訊雲作爲演示平臺，首先你需要先登錄到騰訊雲。

接着打開雲函數控制檯：

我們選擇新建一個雲函數

在這裏我們可以自由選擇開發的語言以及是否需要模板，爲了演示方便還是選擇勾選模板，然後點擊完成，就能進入我們正式的代碼編寫環節了。

這裏我們可以隨意的修改函數的返回值，接着就能對它進行測試啦。

當你看到運行後的返回結果和你編寫的代碼返回值一致時就說明你的雲函數已經在工作中了。

當然，僅僅只是這麼測試一下自然很不過癮，我還想能通過http請求的方式來訪問這個雲函數，又該怎麼做呢？

這個其實也很簡單，我們選擇左側的觸發管理，新建一個觸發策略，並選擇觸發方式爲API網關，然後直接點擊提交。

這個時候我們其實已經可以通過url進行訪問了，我們複製訪問路徑，然後在瀏覽器訪問，就能看到我們雲函數給我們返回的內容了。

本地開發

介紹完在雲平臺上創建函數的方式，接下來就該介紹如何進行本地開發並部署的方式了：

1. 安裝

這裏將以Node作爲開發語言進行演示，更多語言安裝方式請參考官方文檔。

npm i serverless -g

先安裝對應的包，這裏可以安裝到全局便於以後使用。

接着使用相關命令生成demo模板項目：

serverless init sls-demo

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

組件信息：

字段名	是否必選	說明
component	是	component 的名稱，可使用 sls registry 命令查詢可引入的組件。
name	是	創建的實例名稱，每個組件在部署時將創建一個實例。

參數信息（inputs下對應的字段）：

字段名	說明
name	雲函數名稱，同時也作爲資源 ID。
src	代碼路徑。
handler	函數處理方法名稱。
runtime	雲函數運行環境，目前支持： Python2.7、Python3.6、Nodejs6.10、Nodejs8.9、Nodejs10.15、Nodejs12.16、PHP5、PHP7、Go1、Java8 和 CustomRuntime。
region	雲函數所在的區域。
events	觸發器。支持的觸發器爲：timer、apigw、cos、cmq、ckafka 。

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

2. 開發

我們可以將業務的各項代碼都放置在src目錄下，這裏以當前demo項目舉例。

我們打開src/index.js，在暴露的這個函數中我們可以盡情的做一些騷操作，然後返回一個結果，並進行測試。你可以連接數據庫操作，或者是發起請求等，根據你自己選取的語言來進行代碼編寫，筆者這裏是選擇的Nodejs環境進行調試。

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

3. 部署

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

serverless deploy

如果你屬於第一次部署的話，將會發現在控制檯打印出了一個二維碼，你需要做的就是用微信進行掃碼授權，然後就靜待部署完成即可。

這裏你部署完成之後會發現你的目錄下生成了一個.env文件，裏面保存了你部署需要用到的私密數據，然後第二次部署時就可以不用掃碼就能成功部署了（這個授權信息是有時效的，如果失效則需要重新授權）。

4. 調試

執行觸發函數命令，function= 後面跟着的是你的雲函數名稱，這樣就能判斷是否部署成功了。

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

效果預覽：

全棧項目實戰

如果僅僅只學會了雲函數的玩法會不會就有點顯示不出serverless的方便性了，這裏將用express + Vue3帶來一個實戰項目部署的過程。

結構搭建

首先創建一個目錄來放置我們的前後端項目，然後進入目錄，新建一個api目錄用於放置我們服務端項目代碼，接着在api同級目錄下創建一個vue項目（這裏是沒有限制的，你可以選擇react或vue），筆者爲了方便，就採用vite創建了一個vue3項目。

同時在該目錄下創建一個serverless.yml作爲整體項目的配置文件。

目錄結構圖如下所示，.serverless 這個目錄不用管，後面部署的時候自動生成的。

這樣我們基本的目錄結構就搭好了，下面開始配置一下吧：

a. 服務端代碼編寫

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

npm init

npm i express cors -S

然後在app.js中編寫如下代碼，並將express實例進行導出。

記住這裏不要寫app.listen(...)，只要默認導出就行了

// 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編寫的，讀者自己看個人喜歡選擇框架吧，這裏主要是想演示一下發起請求然後渲染頁面的這個過程，這個import '../env'是必要的，我們不必在意它在不在我們項目的目錄下，待會我們部署代碼的時候會自動生成的，也就是我們這裏直接導入就行了，它主要的做的事情就是將我們配置好的環境變量掛在到window上。

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

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

c. serverless 配置文件

最後一步，我們配置一下項目的部署配置，參數的用途看代碼的註釋即可，比較簡單。

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

# 前端相關配置
dashboard:
  # 採用的serverless組件
  component: '@serverless/tencent-website'
  # 設置輸入參數
  inputs:
    # 我們項目源代碼配置
    code:
      # 部署的文件目錄
      src: dist
      # 項目的根目錄
      root: front
      # 部署之前執行的命令，這裏用來先打包出dist目錄，然後再將dist目錄部署上去，也就是上面配置的src對應的目錄
      hook: npm run build
    # 環境變量
    env:
      # 部署的路徑
      apiUrl: ${api.url}
# 服務端相關配置
api:
  # 採用的serverless組件
  component: '@serverless/tencent-express'
  inputs:
    # 部署上去的服務端目錄
    code: './api'
    # 雲函數名字
    functionName: tencent-fullstack-vue-api
    apigatewayConf:
      # 協議
      protocols:
       - https

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

調試

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

serverless --debug

執行上述命令，它會首先自動部署項目到雲端，然後將項目的地址打印在控制檯上，我們複製地址直接訪問就能看到我們部署好的項目了，這裏應該也會要求你進行登錄授權，控制檯會打印出二維碼，微信掃碼登錄一下就好了。

部署成功後我們控制檯就能看到以上畫面，我們複製url到瀏覽器打開，我們熟悉的hello world就已經完美的展現在頁面上了。

總結

當然這只是一個入門級的教程，這裏僅僅只是介紹了Serverless的一小部分功能，而Serverless的強大遠非如此，這就需要廣大開發者逐步的開啓這個新世界的大門了。

作者介紹：陌小路，嗶哩嗶哩前端
GitHub：https://github.com/STDSuperman
原文鏈接：https://juejin.cn/post/6895346770177687566

One More Thing

立即體驗騰訊雲 Serverless Demo，領取 Serverless 新用戶禮包 👉 serverless/start

歡迎訪問：Serverless 中文網！