Serverless 的概念或應用場景我們以前講過很多，這里不再冗述，概括性地講 —— Serverless 的內涵就是對全部底層資源和運維作業的封裝，讓開發者更專注于業務邏輯，（本文作者 @Aceyclee）
完備的基礎性文章推薦閱讀這兩篇：
- Serverless 基本概念入門
- Serverless 的運行原理與組件架構
本文嘗試從出圈的角度，以更接地氣的方式聊聊 Serverless，
先講個故事，疫情期間在家辦公，大家肯定沒少做飯，自己做飯才體會到家務不易，你需要：買菜買鍋、處理食材、煎炒蒸煮、最后洗碗，
聽起來是不是還挺像軟體開發？你需要有云服務器、后臺開發、前端開發、還有運維，
你想著，要是我能只翻兩下鏟子，然后就能吃飯那該多好，
巧了，有一些商家就提供了這種服務，幫你準備好了鍋、洗干凈的食材、專業的廚師指點，你只要進去翻兩下鏟子，就能煮一頓精美的飯食！而且不用洗碗，
對應到軟體開發，開發者只需要關注業務邏輯（炒菜），而底層資源和運維作業（鍋碗瓢盆、食材處理）都不用再操心，
終于到了正式復工的時間，你不用再自己做飯，新買的廚具就閑置了，你回想起昨天在商圈里的美好體驗，家里的廚具要是也在能用的時候付費，不用不收費多好啊，
嘿嘿，Serverless 亦如此，按水電般計費，當部署在其上的函式運行時才收費，
所以回到題目中來，Serverless 本身是云計算相關技術，并非前端技術，為何前端要關注 Serverless 呢？
答案很簡單 —— 解放生產力，
你的廚房里已經準備好了所有廚具和處理好的食材，你現在只需要關心火候認真炒菜，成為美食博主指日可待，也就是文首所說的 —— 開發者能更專注于業務邏輯，其他的底層資源和運維作業已經全部封裝好了，
▎Talk is cheap, show you the code.
先給大家展示一個基于 Serverless 構建 docsify 檔案的 demo
這個三分鐘的 demo，不僅完成了 docsify 發布代碼的上傳，還包括了騰訊云物件存盤 COS 資源的申請和配置，而這僅僅是我第一次使用 Serverless 來構建應用，可見它上手性之高，
原文鏈接：《三分鐘入坑指北 Docsify + Serverless Framework 快速創建個人博客》
再進一步，我們演示個 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 應用的開發！
推薦閱讀：《Serverless 架構：從原理、設計到專案實戰》
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/36628.html
標籤：其他