如何開發自己的第一個 Serverless Component

如何開發自己的第一個 Serverless Component，很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。

Serverless Component 運行機制

在開始開發之前，我們先來了解下 Serverless Component 的運行機制：

每個 Serverless Component 實際上就是一個 npm 包，你可以通過 npm install 命令直接安裝。當我們在一個依賴 Serverless Component 的應用中，執行命令 serverless --debug 部署時，它首先會讀取 serverless.yml 文件中的 component 參數指定組件模塊，它會像安裝 npm 包一樣，自動安裝到本地，然后自動注入該組件模塊，同時執行組件中的 default 函數（之后會講到），從而完成部署流程。

開發步驟

一個完整組件的開發流程應該包括以下流程：

1. 明確功能需求

2. 定義組件配置：輸入和輸出參數

3. 組件開發：default 函數、remove 函數（可選）

4. 測試組件

5. 發布 npm 包

接下來將按照以上步驟，一步一步實現騰訊云 CDN 組件。

1. 明確功能需求

騰訊云 CDN 控制臺 已經提供了手動配置加速域名的功能，但是作為一名懶惰的程序員，「手動」 一直都是我嘗試規避的問題。于是去看了看騰訊云文檔，看看官方有沒有提供相應便捷的方式。果不其然騰訊云 API 已經提供了相關接口，那么我們為什么不借助 API 實現一個能夠幫助我們自動配置的 CDN 組件呢？

需求很明確：開發一個能夠自動配置 CDN 加速域名的組件，幫助我們節省手動配置時間。

2. 定義組件配置

要實現 CDN 域名的添加，需要借助 2 個騰訊云 API 接口：新增加速域名、HTTPS 配置。通過閱讀這兩份接口文檔，總結出一份配置說明文件 config.md ，內容如下：

MyCDN:
  component: '@serverless/tencent-cdn'
  inputs:
    host: abc.com
    hostType: cos
    origin: www.test.com
    backupOrigin: www.test.com
    serviceType: web
    fullUrl: on
    fwdHost: ww.test.com
    cache:
      - type: 0
        rule: all
        time: 1000
      - type: 0
        rule: all
        time: 1000
    cacheMode: simple
    refer:
      - type: 1
        list:
          - 'qq.baidu.com'
          - '*.baidu.com'
    accessIp:
      type: 1
      list:
        - '1.2.3.4'
        - '2.3.4.5'
    https:
      certId: 123
      cert: 123
      privateKey: 123
      http2: off
      httpsType: 2
      forceSwitch: -2

其中 inputs 就是組件的輸入參數，其實這些參數都是從接口文檔中拷貝出來而已，實際開發時，需根據自己組件功能，定制化配置就好。

無服務框架的配置都是 yaml 文件，所以在定義組件配置時，需要將 API 的參數做好 yaml 規范映射。比如 yaml 文件中，符號 - 是用來定義數組的。如果對 yaml 語法還不太熟，可以參考這份 YAML 語言教程。

組件輸入定義好了，還需要定義輸出內容，只需要大致的組織 API 請求返回結構就行，盡量簡潔明了：

{
	host: 'abc.com',
	hostId: '123'
	origin: 'www.test.com',
	cname: 'www.test.com.cdn.dnsv1.com',
	https: true
}

3. 組件開發

對于一個標準的 Serverless Component ，結構如下：

// serverless.js
const { Component } = require('@serverless/core')
class MyComponent extends Component {
  /*
   * Default (必須)
   * - default 是用來執行、準備和更新你的組建的函數
   * - 執行命令 `$ serverless` 會運行此函數
   * - You can run this function by running the "$ serverless" command
   */
  async default(inputs = {}) {
    return {}
  }

  /*
   * Remove (可選)
   * - 如果你的組件需要刪除基礎設施，推薦你添加他
   * - 執行命令 `$ serverless remove` 會運行此函數
   */
  async remove(inputs = {}) {
    return {}
  }

  /*
   * Anything (可選)
   * - 如果你想發布帶有額外功能的組件，你可以將邏輯寫在一個函數里，函數名可以自定義
   * - 執行命令 `$ serverless anything` 會運行此函數
   */
  async anything(inputs = {}) {
    return {}
  }
}
module.exports = MyComponent

了解了組件的結構，接下來，就開始開發吧~

3.1 初始化項目

創建項目目錄 tencent-cdn，執行 npm init 初始化項目，根據命令指引，填寫相關信息就行：

$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (cdn-module) tencent-cdn
version: (1.0.0)
description: Tencent Cloud CDN Component
entry point: (index.js) serverless.js
test command:
git repository:
keywords: cdn,serverless,serverless-component,serverlesscomponent,tencent
author: yugasun
license: (ISC) MIT
About to write to /Users/yugasun/Desktop/Develop/serverless/cdn-module/package.json:

{
  "name": "tencent-cdn",
  "version": "1.0.0",
  "description": "Tencent Cloud CDN Component",
  "main": "serverless.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "cdn",
    "serverless",
    "serverless-component",
    "serverlesscomponent",
    "tencent"
  ],
  "author": "yugasun",
  "license": "MIT"
}


Is this OK? (yes)

然后新建 serverless.js 文件，復制上面的模板代碼到 serverless.js 文件中。

3.2 編寫 default 函數

default 函數代碼，這里就不貼出來了，有點多 o(╯□╰)o。

主要思路就是，根據 inputs 輸入參數，規范成接口請求參數，然后請求接口，執行配置就好。

對于騰訊云 API，所有的接口請求都需要鑒權，所以這里需要先實例化一個 Capi，如下：

import { Capi } from '@tencent-sdk/capi'
const capi = new Capi({
	SecretId: this.context.credentials.tencent.SecretId,
  SecretKey: this.context.credentials.tencent.SecretKey,
  ServiceType: 'cdn',
})

注意：關于請求云 API 庫 @tencent-sdk/capi 說明文檔已經很全面了，當然你也可以在這里看到 源碼.

它需要傳入 SecretId、SecretKey、ServiceType 三個參數，SecretId 和 SecretKey 可以通過 this.context.credentials.tencent 來獲取，執行 serverless 命令在執行時，它會根據用戶項目根目錄配置的 .env 文件，自動注入到 this.context.credentials.tencent 上。ServiceType 是當前服務類型，這是騰訊云 API 定義的，針對不同業務配置相應參數就行。

注意：不同的云服務商掛到 this.context.credentials 上的屬性也是不一樣，比如這里騰訊云是 tencent，AWS 是 aws，目前支持的所有云服務商的屬性配置源碼，在這里可以找到，@serverless/cli

然后請求 新增加速域名 接口：

// cdnInputs 就是我們組裝好的請求參數
await AddCdnHost(capi, cdnInputs)

這里有個重點：請求 新增加速域名 接口成功返回后，CDN 并不會立即部署成功，這個是需要時間的，所以我們執行后，需要輪訓當前新增域名的狀態，當為部署成功時，我們才能進行之后的邏輯。

3.3 組件狀態保存

Serverless Component 在執行 default 函數時，它會產生一些狀態，比如新增 CDN 域名成功后，會產生一個 hostId，我們可以保存在 this.state 對象中，通過執行 this.save() 函數，它會將 this.state 保存到項目根目錄的 .serverless 文件夾中一個名為 Template.MyCDN.json （MyCDN 是我定義的當前 Serverless 應用的名稱）文件中，方便之后在做組件建刪除時使用。

3.4 編寫 remove 函數

Serverless Component 刪除的邏輯，就是再 serverless remove 命令時，它會讀取 default 函數執行保存到 .serverless 中的狀態文件，并注入到 this.state 上 , 然后我們可以根據 state 中的值進行移除，比如我這里會用到 host, 因為 刪除加速域名接口 需要傳遞 host 參數。

3.5 完善說明文檔

開源項目的 README 一定要寫的清晰明了，方便開發者順利的使用和開發。

4. 測試組件

到這里我們組件的基本開發完成了，在發布之前，還得進行本地測試，Serverless Framework 提供了一個很好地本地調試方法，就是應用的 serverless.yml 中 component 可以指定本地項目路徑，比如在 tencent-cdn 目錄下，創建 test 文件夾，然后新增 serverless.yml 配置如下：

MyCDN:
  component: ../
  inputs:
    host: abc.com
    ...

這里的 ../ 就是相對路徑，因為 tencent-cdn 組件的 serverless.js 文件在 tencent-cdn 根目錄下，之后我們就可以進入 test 目錄，執行部署和移除操作，來測試我們的組件了。

注意：雖然一個 Serverless Component 是一個 npm 模塊，我們可以通過 package.json 中的 main 屬性指定項目中任意的文件入口，但是如果沒有 serverless.js 文件，serverless 命令是沒法通過 component 指定的本地路徑調試的。

5. 發布 npm 包

發布 npm 包，首先需要你擁有一個 npm 賬號，請先前往 npm官網 注冊，然后本地執行 npm login 登錄你的賬號。

經過測試沒問題，就可以執行 npm publish 就可以發布到 npm 倉庫了。

源碼

最終實現源碼：@serverless/tencent-cdn。

組件引用

每個組件實例，都會有個 load 方法，我們可以通過此方法來加載其他組件，如下：

const cdnComp = await this.load('@serverless/tencent-cdn', 'cdnComp');

看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。