Serverless 的概念或應用場景我們以前講過很多，這里不再冗述。概括性地講 —— Serverless 的內涵就是對全部底層資源和運維工作的封裝，讓開發者更專注於業務邏輯。（本文作者 @Aceyclee）
完備的基礎性文章推薦閱讀這兩篇：
本文嘗試從出圈的角度，以更接地氣的方式聊聊 Serverless。
先講個故事，疫情期間在家辦公，大家肯定沒少做飯，自己做飯才體會到家務不易，你需要：買菜買鍋、處理食材、煎炒蒸煮、最后洗碗。
聽起來是不是還挺像軟件開發？你需要有雲服務器、后台開發、前端開發、還有運維。
你想着，要是我能只翻兩下鏟子，然后就能吃飯那該多好。
巧了，有一些商家就提供了這種服務，幫你准備好了鍋、洗干凈的食材、專業的廚師指點，你只要進去翻兩下鏟子，就能煮一頓精美的飯食！而且不用洗碗。
對應到軟件開發，開發者只需要關注業務邏輯（炒菜），而底層資源和運維工作（鍋碗瓢盆、食材處理）都不用再操心。
終於到了正式復工的時間，你不用再自己做飯，新買的廚具就閑置了。你回想起昨天在商圈里的美好體驗，家里的廚具要是也在能用的時候付費，不用不收費多好啊。
嘿嘿，Serverless 亦如此，按水電般計費，當部署在其上的函數運行時才收費。
所以回到題目中來，Serverless 本身是雲計算相關技術，並非前端技術，為何前端要關注 Serverless 呢？
答案很簡單 —— 解放生產力。
你的廚房里已經准備好了所有廚具和處理好的食材，你現在只需要關心火候認真炒菜，成為美食博主指日可待。也就是文首所說的 —— 開發者能更專注於業務邏輯，其他的底層資源和運維工作已經全部封裝好了。
▎Talk is cheap, show you the code.
先給大家展示一個基於 Serverless 構建 docsify 文檔的 demo
這個三分鍾的 demo，不僅完成了 docsify 發布代碼的上傳，還包括了騰訊雲對象存儲 COS 資源的申請和配置。而這僅僅是我第一次使用 Serverless 來構建應用，可見它上手性之高。
再進一步，我們演示個 Fullstack Application。該項目借助社區現有的 @serverless/tencent-express 和 @serverless/tencent-website 組件來完成。
下面是一張簡單的組件依賴圖：
在開始所有步驟前，需執行
npm install -g serverless命令，全局安裝serverless cli。
1. 准備
新建項目目錄 fullstack-application-vue，在該項目目錄下新增 api 和 dashboard 目錄。然后新增 serverless.yml 和 .env 配置文件，項目目錄結構如下：
├── README.md // 項目說明文檔
├── api // Restful api 后端服務
├── dashboard // 前端頁面
├── .env // 騰訊雲相關鑒權參數：TENCENT_APP_ID，TENCENT_SECRET_ID，TENCENT_SECRET_KEY
└── serverless.yml // 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
},
},
})
3. 配置
前后端代碼都准備好了，再簡單配置下 serverless.yml 文件了：
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
4. 部署
部署時，只需要運行 serverless 命令就行，當然如果你需要查看部署中的 DEBUG 信息，還需要加上 --debug 參數，如下：
$ serverless
# or
$ serverless --debug
最后終端會 balabalabala~, 看到綠色的done就行了。
體驗：在線 Demo
既然是全棧，怎么少得了數據庫的讀寫呢？
讀者可移步作者原文繼續閱讀：《基於 Serverless Component 的全棧解決方案》
從這兩個小項目中已然得解 —— Serverless 的內涵就是對全部底層資源和運維工作的封裝，讓開發者更專注於業務邏輯。
▎寫在后面
題主在問題描述中的思考很有價值，其實 Serverless 的確不是一個前端的概念，甚至都不是為了解決前端的問題而出現的，它其實就是雲計算發展的必經過程。
就好比，底層語言的發展趨勢肯定是高級語言。而高級語言肯定也會封裝起底層的硬件，讓程序員無需關心硬件的狀態，專注編碼。
十年前編程還是比較難的高級學科，如今小學已經開展編程課程。其實就是因為程序語言的發展，讓編程變得更加友好。
同樣地，Serverless 的出現和完善，也是讓軟件開發變得更加友好。不僅前端需要關注 Serverless，它可能屬於每一種類型的應用開發者。
而這會淘汰后端嗎？並不會！
后端會更聚焦於業務邏輯、數據處理、算法策略等更專精的事情。
汽車的出現讓馬車夫成為了司機，技術在變革，工程師也將成長。
傳送門：
- GitHub: github.com/serverless
- 官網：serverless.com
歡迎訪問：Serverless 中文網，您可以在 最佳實踐 里體驗更多關於 Serverless 應用的開發！