開發者：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目錄，

組件資訊：

引數資訊（inputs下對應的欄位）：

想查詢更多詳細資訊可以參考官方檔案，

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 = https://www.cnblogs.com/serverlesscloud/p/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 中文網！

標籤：其他

上一篇：CF1467C Three Bags

下一篇：《卡死你3000》批量修改被控機密碼，秘鑰