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