前幾次我們演示了如何通過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服務，提交代碼等待幾秒就可以運行了。本來可能需要前后端代碼分別部署一次，現在只需要提交一下代碼等待幾秒就可以運行了。有了雲計算程序員真的越來越傻瓜了，笑哭。
關注我的公眾號一起玩轉技術
