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

前言

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

函式計算（Function Compute）：函式計算是一個事件驅動的服務，透過函式計算，使用者無需管理伺服器等執行情況，只需編寫程式碼並上傳。函式計算準備計算資源，並以彈性伸縮的方式執行使用者程式碼，而使用者只需根據實際程式碼執行所消耗的資源進行付費。函式計算更多資訊參考。
Aliyun Serverless VSCode Extension： 是阿里雲 Serverless 產品  函式計算 Function Compute 的 VSCode 外掛，該外掛結合了 函式計算 Funcraft：Funcraft 工具以及 函式計算 SDK ，是一款 VSCode 圖形化開發除錯函式計算以及操作函式計算資源的工具。
Funcraft：Funcraft 是一個用於支援 Serverless 應用部署的工具，能幫助您便捷地管理函式計算、API 閘道器、日誌服務等資源。它透過一個資源配置檔案（template.yml），協助您進行開發、構建、部署操作。Fun 的更多文件參考。

目標

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

1. 使用 typescript 編寫業務程式碼
2. 可以透過 Serverless VSCode 外掛本地除錯 typescript 程式碼
3. 透過外掛將專案程式碼部署到雲端

專案示例圖

實踐

1. 前期準備 (可選)

• 在 VSCode 外掛市場中搜尋  Aliyun Serverless 外掛並安裝。

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

前期準備的目的是為了方便開發和除錯，目前阿里雲 Function Compute 提供了命令列工具 Funcraft 以及圖形化 VSCode 外掛。安裝 Docker 是為了在本地模擬線上環境進行除錯，如果想快速瀏覽下 nodejs + typescript 工程專案的搭建，可以跳過。

2. 環境搭建

• 配置 tsconfig.json
  
• 執行  tsc --init，將會在專案根目錄生成  tsconfig.json
• 配置  tsconfig.json 內容為：

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

• 配置 package.json
  
• 執行  npm init，將會在專案根目錄生成  package.json
• 配置  package.json 內容為：

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

• 編寫業務程式碼
  
• 新建 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'); }

• 將 ts 程式碼編譯為 js 程式碼
  
• 在 Terminal 中輸入  npm run compile
• 完成後在專案根目錄會有  dist 資料夾以及  dist/index.js、 dist/index.js.map 檔案

至此，我們搭建了一個常規的 typescript 專案，有  tsconfig.json、 package.json、 src 原始碼目錄、 dist 結果目錄。其中， src/index.ts 檔案中定義了一個 handler 方法，該方法符合函式計算中函式入口方法的定義。

3. 結合函式計算

1. 在專案根目錄新建  index.js 檔案，檔案內容如下：
   const { handler } = require('./dist/index'); module.exports.handler = (event, context, callback) => { handler(event, context, callback); }
   這裡又定義了一個 handler 方法，該方法中呼叫了編譯後 js 檔案中的 handler 方法。
2. 在專案根目錄新建  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 檔案的入口函式。

4. 本地除錯與部署

• 本地除錯
  
• 在  index.js 以及  src/index.ts 檔案中插入一些斷點。
• 點選 VSCode 左側欄目中的函式計算圖示，展開本地資源樹
• 點選函式名右側的除錯按鈕，即可除錯 ts 原始碼。

• 部署函式
  
• 點選 VSCode 左側欄目中的函式計算圖示
• 右鍵本地資源樹中的函式名，點選部署按鈕

• 遠端呼叫函式
  
• 點選遠端資源樹中函式名右側的呼叫按鈕

總結

目前阿里雲 Function Compute 沒有原生支援 Typescript，但是透過本文的方式可以做到在本地開發除錯時使用 Typescript。接下來總結下這種實踐方法的優點和不足：

優點

1. 使用 Typescript 進行開發
2. 支援本地除錯 Typescript 程式碼
3. 專案部署到雲端後，可以在雲端檢視 Typescript 原始碼

不足

1. 本地除錯時需要在專案根目錄的 index.js 檔案中插入一個斷點。
2. 更新程式碼後，在除錯以及部署前需要手工進行一次 Typescript 程式碼到 js 程式碼的編譯。

本文中介紹的實踐方式只是一種思路，歡迎大家提供其他的思路。

原文連結

本文為阿里雲原創內容，未經允許不得轉載。