前幾次我們演示了如何通過Azure靜態web應用功能發布vue跟blazor的項目(使用 Azure靜態web應用+Github全自動部署VUE站點、使用Azure靜態Web應用部署Blazor Webassembly應用)。但是一個真正的web應用，總是免不了需要后臺api服務為前端提供數據或者處理數據的能力。同樣前面我們也介紹了Azure函數服務，Azure函數的http trigger可以對http作出響應，可以完美的承當web api的角色。現在Azure靜態web應用可以直接集成Azure函數，使得一次發布可以同時發布前端項目（vue、blazor）及后臺api服務（azure函數）。

新建Azure函數

上次已經演示過如何發布Blazor項目，這里不在啰嗦，直接找到我們上次的BlazorWebassembly項目的解決方案，添加一個Azure函數。

Azure函數使用Http trigger。Http trigger可以對http請求作出響應，可以看成是一個webapi。

新建完成之后修改Function1.cs類的代碼為：

public static class Function1{[FunctionName("sum")]public static async Task<IActionResult> Run([HttpTrigger(AuthorizationLevel.Function, "get", "post", Route = null)] HttpRequest req,ILogger log){log.LogInformation("C# HTTP trigger function processed a request.");string requestBody = await new StreamReader(req.Body).ReadToEndAsync();dynamic data = JsonConvert.DeserializeObject(requestBody);int a = data.a;int b = data.b;int c = a + b;return new OkObjectResult(c);}}

代碼比較簡單，通過讀取request的body獲取提交的a、b兩個值，然后相加之后返回結果。
關于Azure Function的文件參閱使用Azure Functions玩轉Serverless

修改Blazor項目

我們開始修改上次的Blazor Webassembly項目。在首頁上放置3個文本框及一個按鈕。點擊按鈕的時候把其中兩個文本框的值通過http傳遞到Azure函數中去得到返回值顯示在第三個文本框內。

@page "/" @inject HttpClient Http <h1>Azure static web app with functions</h1> A: <input @bind="a" />+ B: <input @bind="b" />= <input @bind="c" /> <button @onclick="sum">求和</button> @code{private int a;private int b;private string c;private async Task sum(){var result = await Http.PostAsJsonAsync("/api/sum", new{A = a,B = b});var sum = await result.Content.ReadAsStringAsync();c = sum;} }

完成之后提交代碼到github。想要了解Blazor的相關內容請閱讀我的其他關于Blazor入門的文章。tag=Blazor

配置靜態web應用

打開azure portal，新建一個靜態web應用資源，因為前面已經介紹過多次基本的新建過程，這里不在詳細介紹。

基本配置跟上次發布Blazor Webassembly應用一樣，關鍵的不同在于API位置需要修改為我們上面新建的Azure函數的項目名稱。以便Azure能夠找到這個目錄。配置好之后點擊開始創建。

運行項目

靜態web應用資源創建完成后會在github項目上自動添加一個workflow。等待這個workflow顯示綠色完成之后就可以正式訪問我們的web應用了。

點擊靜態web應用資源的概述目錄，找到url地址復制后在瀏覽器里打開：

隨便輸入幾個值，點擊求和可以看到得到正確的結果。：）

總結

前兩次我們演示了通過Azure靜態web應用功能發布vue跟Blazor wasm項目。但是他們都是純靜態頁面。一般實現一個真正的web應用還需要api服務。Azure靜態web應用通過直接對Azure函數的支持簡化了項目開發發布流程。我們開發一些簡單的項目的時候可以直接使用Azure函數做為api服務，提交代碼等待幾秒就可以運行了。本來可能需要前后端代碼分別部署一次，現在只需要提交一下代碼等待幾秒就可以運行了。有了云計算程序員真的越來越傻瓜了，笑哭。

關注我的公眾號一起玩轉技術

總結

以上是生活随笔為你收集整理的Azure 静态 web 应用集成 Azure 函数 API的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。