Serverless 實戰 —— 函數計算 + Typescript 實踐

時間 2021-01-04

標籤 html node git github typescript npm json 服務器 less ide 欄目 HTML 简体版

原文原文鏈接

前言

首先介紹下在本文出現的幾個比較重要的概念：html

函數計算（Function Compute）：函數計算是一個事件驅動的服務，經過函數計算，用戶無需管理服務器等運行狀況，只需編寫代碼並上傳。函數計算準備計算資源，並以彈性伸縮的方式運行用戶代碼，而用戶只需根據實際代碼運行所消耗的資源進行付費。函數計算更多信息參考。
Aliyun Serverless VSCode Extension：是阿里雲 Serverless 產品函數計算 Function Compute 的 VSCode 插件，該插件結合了函數計算 Funcraft：Funcraft 工具以及函數計算 SDK ，是一款 VSCode 圖形化開發調試函數計算以及操做函數計算資源的工具。
Funcraft：Funcraft 是一個用於支持 Serverless 應用部署的工具，能幫助您便捷地管理函數計算、API 網關、日誌服務等資源。它經過一個資源配置文件（template.yml），協助您進行開發、構建、部署操做。Fun 的更多文檔參考。

目標

本文打算以一個簡單的 Serverless 函數計算項目爲例，嘗試使用 typescript + nodejs 進行開發，搭建一個簡單的工程項目，實現以下小目標：node

使用 typescript 編寫業務代碼
能夠經過 Serverless VSCode 插件本地調試 typescript 代碼
經過插件將項目代碼部署到雲端

項目示例圖

實踐

1. 前期準備 (可選)

在 VSCode 插件市場中搜索 Aliyun Serverless 插件並安裝。

根據 aliyun/fun 中的教程安裝並配置 Docker。

前期準備的目的是爲了方便開發和調試，目前阿里雲 Function Compute 提供了命令行工具 Funcraft 以及圖形化 VSCode 插件。安裝 Docker 是爲了在本地模擬線上環境進行調試，若是想快速瀏覽下 nodejs + typescript 工程項目的搭建，能夠跳過。git

2. 環境搭建

配置 tsconfig.jsongithub

執行 tsc --init，將會在項目根目錄生成 tsconfig.json
配置 tsconfig.json 內容爲：

{
    "compilerOptions": {
      "target": "es5",
      "module": "commonjs",
      "noImplicitAny": true,
      "outDir": "./dist/",
      "sourceMap": true
    },
    "include": [
      "./src"
    ]
  }

![](data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==)![](data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw== "點擊並拖拽以移動")

配置 package.jsontypescript

執行 npm init，將會在項目根目錄生成 package.json
配置 package.json 內容爲：

{
    "name": "fc-ts",
    "version": "1.0.0",
    "description": "Function Compute + Typescript",
    "main": "index.js",
    "scripts": {
      "compile": "tsc -p ./"
    }
  }

![](data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==)![](data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw== "點擊並拖拽以移動")

編寫業務代碼npm

新建 src/index.ts 文件，編寫內容以下：

export const handler = (
    event: any,
    context: any,
    callback: (err: any, data: any) => void,
  ) => {
    console.log(new String(event));
    callback(null, 'hello world');
  }

![](data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==)![](data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw== "點擊並拖拽以移動")

將 ts 代碼編譯爲 js 代碼json
- 在 Terminal 中輸入 npm run compile
- 完成後在項目根目錄會有 dist 文件夾以及 dist/index.js、dist/index.js.map 文件

至此，咱們搭建了一個常規的 typescript 項目，有 tsconfig.json、package.json、src 源碼目錄、dist 結果目錄。其中，src/index.ts 文件中定義了一個 handler 方法，該方法符合函數計算中函數入口方法的定義。服務器

3. 結合函數計算

在項目根目錄新建 index.js 文件，文件內容以下：less
```
const { handler } = require('./dist/index');

module.exports.handler = (event, context, callback) => {
  handler(event, context, callback);
}
```
這裏又定義了一個 handler 方法，該方法中調用了編譯後 js 文件中的 handler 方法。ide

在項目根目錄新建 template.yml 文件，文件內容以下：

ROSTemplateFormatVersion: '2015-09-01'
Transform: 'Aliyun::Serverless-2018-04-03'
Resources:
  demo: # service name
    Type: 'Aliyun::Serverless::Service'
    Properties:
      Description: This is FC service
    func01: # function name
      Type: 'Aliyun::Serverless::Function'
      Properties:
        Handler: index.handler
        Runtime: nodejs8
        CodeUri: ./
        MemorySize: 1024
        Timeout: 15

該文件中對咱們的資源（即函數計算中的服務以及函數）進行了定義，具體內容能夠參考：Fun 規範文檔。
若是安裝了 Serverless VSCode 插件，那麼能夠嘗試下插件的智能提示，效果如圖：

至此，咱們就成功的將 typescript 項目結合到了函數計算中。咱們的作法是：將 typescript 源碼文件放置在 src 目錄，將編譯後的 js 文件放置在 dist 目錄，最後在項目根目錄中編寫了 index.js 文件，文件中的 handler 處理函數調用了編譯後 index 文件的入口函數。