透過 Azure Functions 快速搭建一組 Serverless API

這篇文章想跟你分享：

團隊專案、內部服務抑或是 Side Project，不論何種型態的專案都有高機率會需要搭建 API 來串接前後端，不曉得你會不會有類似的困擾「我只需要建個輕量化的介面，但這樣仍然需要自己管理 Server 嗎？」這時候 Serverless API 會是你的首選，本文會介紹透過 Azure Functions 服務來快速建立。

「先跟我說，用 Azure Functions 的好處有什麼？」

【開發環境友善】

很簡單的想法，開發者較常用哪一個 IDE 開發？我想很多人腦袋第一個飄過的就是 VSCode，而同為微軟的供應服務 Azure 可想而知會將其與 VSCode 高度整合，也就是說對於開發環境的建置微軟有供應了快速的捷徑。

【計價模式友善】

Azure Functions 每月提供「1 百萬次」的免費執行額度，這個計價模式對於小型專案算是非常友善，當然你也可以採不同的方案獲得更多的功能以及效能。

開發環境友善加上靈活的計價模式，這也是我們選擇介紹 Azure Functions 的主因！

前置步驟及流程說明

• 註冊一組 Azure Subscription
• 安裝 VSCode 並登入步驟 1 的帳號
• 於 VSCode 安裝 Azure Functions Extension

你沒看錯，真的只要 3 個步驟就可以開始開發了，這揭露的上一段提及的友善開發環境，整合性高的開發工具可以大幅縮減你的準備時間。接下來簡單說明具體的開發流程：

1. 建立一個資料夾，預期擺放 Azure Functions Serverless API 的程式碼
2. 將這個資料夾拖曳至 VSCode 的 Workspace 中
3. 透過 Extension 於 Workspace 中該資料夾建立 Serverless API 專案
4. 開發程式碼成符合你要的邏輯
5. 透過 Extension 將程式碼部署至 Azure 上
6. Ta-Da 🎉

我們實際操作一遍並將步驟中需要留意的細節記錄下來，當然同步你也可以參考 Azure Functions Extension 上的官方文件一起服用！

建立 Azure Functions 專案

首先，建立一個名為「azure-functions-serverless-api」的資料夾並且拉至 VSCode 的 Workspace 中，後續也都會使用這個資料夾當演示用，而在步驟 3 將 VSCode 切換至 Azure Functions Extension 的 Tab，點擊「Create Function」的按鈕，你就能看到剛才建立的資料夾成功的顯示在頁面上，如下圖：

接著，照著 Extension 的引導即可建置好 Function：

• 選擇程式語言 （以下範例我們使用 JavaScript）
• 選擇「HTTP Trigger」Function Template
• 為 Function 取個名字 （以下範例我們取名為 hello）
• 選擇「Anonymous」這個存取權限，讓任何人都能存取這個 Endpoint

完成後，回到 Workspace 頁面後就能看到專案架構都已經建立完成了！

我們可以看到專案內有一個名為「hello」的資料夾，這正是我們剛才建立的 Function，而我們也可以留意到在 hello 資料夾外也有一些檔案，這些檔案是 Extension 於「首次建立時」會自動建立好的專案檔案，等到在相同專案「建立第 2 個 Function 時」，在 Workspace 下則僅會再多長出該 Function 名稱的資料夾，以此類推。

比方說，透過同樣的方式照著 Extension 引導建置第 2 個名為「world」的 Function，這時專案樹狀就會再多長出一個「world」資料夾。

了解專案架構、程式邏輯

到這個階段，基本上已經完成 8 成了，接下來只需要專注在 Function 資料夾內的 index.js（主程式邏輯）以及 function.json（API 設定）即可。

先來說明 function.json 吧！可以透過這個檔案去指定 API 的規範，像是需要有哪些 HTTP Methods（e.g. GET、POST、PUT、DELETE）、需不需要重新 Route 等等，皆可以參考官方文件來進行設定，細節處就不在此篇文章說明囉。

{
  "bindings": [
    {
      "authLevel": "anonymous",
      "type": "httpTrigger",
      "direction": "in",
      "name": "req",
      "methods": [
        "get",
        "post"
      ]
    },
    {
      "type": "http",
      "direction": "out",
      "name": "res"
    }
  ]
}

接下來，我們來看一下 index.js 的主程式邏輯，VSCode 的 Extension 也會一併給予 Sample Code，所以其實對開發者來說是很容易上手的，只要簡單的 Trace Code 即可輕易的改寫成自己要的邏輯，同樣在本篇文章就不多改寫了，未來再分享完整 Azure Functions Serverless API 的應用給大家！

module.exports = async function (context, req) {
    context.log('JavaScript HTTP trigger function processed a request.');

    const name = (req.query.name || (req.body && req.body.name));
    const responseMessage = name
        ? "Hello, " + name + ". This HTTP triggered function executed successfully."
        : "This HTTP triggered function executed successfully. Pass a name in the query string or in the request body for a personalized response.";

    context.res = {
        // status: 200, /* Defaults to 200 */
        body: responseMessage
    };
}

有了 API 程式碼、有了基礎的 API 設定，我們來試著執行看看吧！在 VSCode 的視窗按下 F5 即可進入 Debug 模式，這時候你能從 Terminal 中看到 Function 運作的狀況，這時你也能透過 curl 這個 Command Line 來試著與 Function 互動，參考下述：

$ curl http://localhost:7071/api/hello

This HTTP triggered function executed successfully. Pass a name in the query string or in the request body for a personalized response.


$ curl http://localhost:7071/api/hello?name=appdev-ooops

Hello, appdev-ooops. This HTTP triggered function executed successfully.


$ curl -X POST http://localhost:7071/api/hello

This HTTP triggered function executed successfully. Pass a name in the query string or in the request body for a personalized response.


$ curl -X POST -d '{ "name": "appdev-ooops" }' http://localhost:7071/api/hello

Hello, appdev-ooops. This HTTP triggered function executed successfully.

持續的修改主程式邏輯、持續的透過 IDE 偵錯，一條龍的在 VSCode 完成開發實屬開發者的一大福音！

將 Function 部署上 Azure

在準備部署之前，我們要先去 Azure Portal 上建立「一組資源群組」以及「一組函數應用程式」來擺放我們建立好的 Function：

建立完成後，只要 VSCode 也登入了相同的 Azure 帳號，VSCode 會自動將資源群組及 Azure Functions 的狀態同步回來，接著一樣透過 Extension 操作即可完成部署，部署完成後即可在 Azure 上看到你的 Functions 囉，就是那麼簡單！

而我們一樣用 curl Command Line 來試著與 Azure Functions 互動：

$ curl https://azure-functions-serverless-api.azurewebsites.net/api/hello

This HTTP triggered function executed successfully. Pass a name in the query string or in the request body for a personalized response.


$ curl https://azure-functions-serverless-api.azurewebsites.net/api/hello?name=appdev-ooops

Hello, appdev-ooops. This HTTP triggered function executed successfully.


$ curl -X POST https://azure-functions-serverless-api.azurewebsites.net/api/hello

This HTTP triggered function executed successfully. Pass a name in the query string or in the request body for a personalized response.


$ curl -X POST -d '{ "name": "appdev-ooops" }' https://azure-functions-serverless-api.azurewebsites.net/api/hello

Hello, appdev-ooops. This HTTP triggered function executed successfully.

總結

走過一遍 Azure Functions Serverless API 的 建立 + 開發 + 部署流程，不難發現微軟提供的整合性很高，讓開發者可以在同一個 IDE 內完成整趟專案週期，且 Function 與 Function 之間的獨立性也正式微型專案適合的開發模式，再搭配彈性及靈活的計價模式輔助，對於不想或不易負擔管理 Server 的開發團隊來說真的是一項有利的工具，如果你也有類似的需求，不妨嘗試看看透過 Azure Functions 來搭建 Serverless API 吧！

Written By

Yihsuan Chen - Medium