練習 - 建立 Azure Functions 專案

6 分鐘

您的購物清單 Web 應用程式需要一個 API。在此練習中，您會使用 Azure Functions 專案來建置並執行您的 API。從那裡開始，您會使用適用於 Visual Studio 的 Azure Functions 延伸模組，搭配新的函式擴充 API。

在本練習中，您會完成下列步驟：

當準備變更 Web 應用程式時，請建立一個分支。
執行 Azure Functions 專案。
建立 HTTP GET 函式。
使用取得產品的邏輯來取代函式起始程式碼。
設定 Web 應用程式通過 Proxy 處理 API 的 HTTP 要求。
執行 API 和 Web 應用程式。

注意

請確定您已設定 Visual Studio，使用 .NET 進行 Azure 開發。

取得函數應用程式

現在，您會新增 API 並連線到您的前端應用程式。 API 專案包含不完整的 Azure Functions 專案，因此現在讓我們來完成。

建立 API 分支

變更應用程式進行之前，建議先為變更建立新的分支。您即將完成適用於您應用程式的 API，因此請在 Git 中建立名為 api 的新分支。

完成 Azure Functions API

Api 專案會包含您的 Azure Functions 專案及三個函式。

類別	方法	路由
ProductsPost	POST	`products`
ProductsPut	PUT	`products/:id`
ProductsDelete	DELETE	`products/:id`

您的 API 具有可用來操作購物清單產品的路由，但缺少取得產品的路由。讓我們接下來新增該項目。

建立 HTTP GET 函式

在 Visual Studio 中，以滑鼠右鍵按一下 Api 專案，然後選擇 [新增]>[新增項目]。
在 [新增項目] 對話方塊中，選取 [Azure 函式]。
輸入 ProductsGet 作為函式檔案的名稱。
函式類型請選取 [HTTP 觸發程序]。
在 [授權等級] 欄位的下拉式清單中，選取 [匿名]。
選取 [新增]。

您剛剛利用可取得產品的函式來擴充 Azure Functions 應用程式！

設定 HTTP 方法和路由端點

請注意，新建立 C# 類別的 Run 方法在第一個引數上具有 HttpTrigger 屬性 HttpRequest。此屬性會定義函式的存取層級，以及要接聽的 HTTP 方法和路由端點。

路由端點預設會是 null，這表示端點會使用 FunctionName 屬性的值，該值為 ProductsGet。將 Route 屬性設定為 "products" 會覆寫預設行為。

目前，函式會在對 products 的 HTTP GET 要求上被觸發。您的 Run 方法看起來就像下列程式碼：

[FunctionName("ProductsGet")]
public static async Task<IActionResult> Run(
    [HttpTrigger(AuthorizationLevel.Anonymous, "get", "post", Route = null)] HttpRequest req,
    ILogger log)

更新路由邏輯

Run 方法的主體是會在函式執行時執行的內容。

您必須在 Run 方法中更新邏輯，才能取得您的產品。 ProductData.cs 檔案中具有以名為 ProductData 的類別為形式的資料存取邏輯，其會透過相依性插入以 IProductData 介面的形式提供。該介面上具有名為 GetProducts 的方法，其會傳回能以非同步方式傳回產品清單的 Task<IEnumerable<Product>。

現在，變更函式端點以傳回產品：

開啟 ProductsGet.cs。

以下列程式碼取代其內容：

using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Azure.WebJobs;
using Microsoft.Azure.WebJobs.Extensions.Http;
using System.Threading.Tasks;

namespace Api;

public class ProductsGet
{
    private readonly IProductData productData;

    public ProductsGet(IProductData productData)
    {
        this.productData = productData;
    }

    [FunctionName("ProductsGet")]
    public async Task<IActionResult> Run(
        [HttpTrigger(AuthorizationLevel.Anonymous, "get", Route = "products")] HttpRequest req)
    {
        var products = await productData.GetProducts();
        return new OkObjectResult(products);
    }
}

在上述變更中，您已將類別從靜態轉換成執行個體類別。您已將介面新增至建構函式，讓相依性插入架構可以插入 ProductData 類別。最後，您已將 Run 函式設定為在呼叫時傳回產品清單。

當發佈到 Azure Static Web Apps 時，您不需要擔心跨原始來源資源共用 (CORS)。 Azure 靜態 Web 應用程式會自動設定您的應用程式，使其可在 Azure 上利用反向 Proxy 來與您的 API 進行通訊。但在本機執行時，您需要設定 CORS，以允許您的 Web 應用程式和 API 進行通訊。

現在，提示 Azure Functions 允許您的 Web 應用程式在電腦上對 API 提出 HTTP 要求。

在 Api 專案的 Properties 資料夾中開啟名為 launchSettings.json 的檔案。
- 如果檔案不存在，請加以建立。

更新檔案的內容：

{
    "profiles": {
        "Api": {
            "commandName": "Project",
            "commandLineArgs": "start --cors *"
        }
    }
}

注意

此檔案是用來控制 Visual Studio 啟動 Azure Functions 工具的方式。如果想要使用 Azure Functions 命令列工具，您也需要 Azure Functions Core Tools 文件中所描述的 local.settings.json 檔案。local.settings.json 檔案列在 .gitignore 檔案中，以防止此檔案被推送至 GitHub。這是因為您可以將祕密儲存於此檔案中，但您不想在 GitHub 中這麼做。這也就是為什麼當從範本建立存放庫時，必須建立該檔案的原因。

執行 API 和 Web 應用程式

現在可以監看 Web 應用程式和 Azure Functions 專案共同運作。

在 Visual Studio 中，以滑鼠右鍵按一下 ShoppingList 解決方案。
選取 [設定啟始專案]。
選取 [多個啟始專案] 選項。
將 Api 和 Client 設定為隨 [動作] 而 [啟動]，然後選取 [確定]。
啟動偵錯工具。

瀏覽到您的應用程式

現在可以看到您的應用程式會在本機上針對 Azure Functions API 執行。

瀏覽至 Web 應用程式 (例如：https://localhost:44348/)。

您建置的應用程式現正在本機執行，並對 API 提出 HTTP GET 要求。

現在請中斷 Visual Studio 中偵錯工具的連線，以停止正在執行的應用程式和 API。

下一步

您的應用程式已在本機運作，而下一個步驟是同時發佈應用程式與 API。