前端為什麼要關注 Serverless?

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。

下面是一張簡單的組件依賴圖：

在開始所有步驟前，需執行 npm install -g serverless 命令，全局安裝 serverless cli。

1. 準備

新建項目目錄 fullstack-application-vue，在該項目目錄下新增 api 和 dashboard 目錄。然後新增 serverless.yml 和 .env 配置文件，項目目錄結構如下：

<code>├── README.md         // 項目說明文檔
├── api                      // Restful api 後端服務
├── dashboard            // 前端頁面
├── .env                    // 騰訊雲相關鑑權參數：TENCENT_APP_ID，TENCENT_SECRET_ID，TENCENT_SECRET_KEY
└── serverless.yml    // serverless 文件/<code>

2. 後端服務開發

進入目錄 api，新增 app.js 文件，編寫 express 服務代碼，這裡先新增一個路由 /，並返回當前服務器時間：

<code>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/<code>

3. 前端頁面開發

本案例使用的是 Vue.js + Parcel 的前端模板，當然你可以使用任何前端項目腳手架，比如 Vue.js 官方推薦的 Vue CLI 生成的項目。進入 dashboard 目錄，編寫入口文件 src/index.js:

<code>// 這裡初始是沒有 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
    },
  },
})/<code>

3. 配置

前後端代碼都準備好了，再簡單配置下 serverless.yml 文件了：

<code>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/<code>

4. 部署

部署時，只需要運行 serverless 命令就行，當然如果你需要查看部署中的 DEBUG 信息，還需要加上 --debug 參數，如下：

<code>$ serverless
# or
$ serverless --debug/<code>

最後終端會 balabalabala~, 看到綠色的done就行了。

體驗：在線 Demo

既然是全棧，怎麼少得了數據庫的讀寫呢？

讀者可移步作者原文繼續閱讀：《基於 Serverless Component 的全棧解決方案》

從這兩個小項目中已然得解 —— Serverless 的內涵就是對全部底層資源和運維工作的封裝，讓開發者更專注於業務邏輯。

▎寫在後面

題主在問題描述中的思考很有價值，其實 Serverless 的確不是一個前端的概念，甚至都不是為了解決前端的問題而出現的，

就好比，底層語言的發展趨勢肯定是高級語言。而高級語言肯定也會封裝起底層的硬件，讓程序員無需關心硬件的狀態，專注編碼。

十年前編程還是比較難的高級學科，如今小學已經開展編程課程。其實就是因為程序語言的發展，讓編程變得更加友好。

同樣地，Serverless 的出現和完善，也是讓軟件開發變得更加友好。不僅前端需要關注 Serverless，它可能屬於每一種類型的應用開發者。

而這會淘汰後端嗎？並不會！

後端會更聚焦於業務邏輯、數據處理、算法策略等更專精的事情。

汽車的出現讓馬車伕成為了司機，技術在變革，工程師也將成長。

閱讀更多 Serverless 的文章

關鍵字: 軟件 美好，一直在身邊 雲計算