練習 - 建立 Azure Functions 應用程式並重構程式碼

  • 5 分鐘

在此練習中，您會建立可執行 API 而非 Express 應用程式的無伺服器 Azure Functions 應用程式。 然後，您會將應用程式邏輯從 Node.js Express 應用程式移轉至 Functions 應用程式。 您不需要重寫程式碼。 您只需要一些小型的程式碼變更以進行轉換。

建立新的 Azure Functions 應用程式

請確定您已安裝 Azure Functions 的 Visual Studio Code 延伸模組。

  1. 在 Visual Studio Code 中，按 F1 開啟命令選擇區

  2. 鍵入並選取 [Azure Functions: 建立新專案]。

    Screenshot of Visual Studio Code creating a new function app.

  3. 選取存放庫的根目錄作為新專案的位置。

  4. 出現提示時，請輸入下列值。

    名稱 值
    語言 TypeScript
    選取 TypeScript 程式設計模型 模型 V4
    範本 HTTP 觸發程序
    名稱 getVacations

現在會建立 Functions 應用程式來提供應用程式的 API 端點。 您會在下一個單元中建立函式來列出、新增、更新和刪除休假。

注意

您已在 [函式] 資料夾中建立 Functions 應用程式，這會 Angular 應用程式隔開。 您可決定如何設定應用程式的結構，但若能在同一個地方查看這兩個應用程式，學習會較爲方便。

複製和重構路由處理常式程式碼

所有傳回資料的 Node.js Express 邏輯都在 [伺服器/服務] 資料夾中。 您可以將此程式碼從 Node.js Express 應用程式複製到 Functions 應用程式，然後進行一些次要重構，讓程式碼與 Functions 搭配運作，而不是 Node.js Express。

下表列出 Node.js Express 應用程式與 Functions 應用程式之間的主要差異:

元件 Node.js Express 函式
為應用程式提供服務的匯入 npm 套件 express @azure/functions
要求和回應物件 req 和 res request 和 context

首先，重構程式碼以匯入適當的 npm 套件。 然後，您可以重構以處理 Express 和 Functions 在傳遞要求和回應物件之間的差異。

從 Express 專案複製現有的程式碼

在 Visual Studio Code 中，從 Express 應用程式中的 server 資料夾複製下列子資料夾，並將其貼到 functions/ 資料夾中：

  • 資料
  • 模型
  • 服務

您不需要複製 routes 資料夾，因為您要為 Azure Functions 應用程式中的每個路由建立新的函式。

繼續進行下一個單元，以建立函式並重構端點和路由。