全てサーバーレス + 全て C# で SPA

DB に Cosmos DB を使って Azure Functions を使って少ないコードで読み書きする API を作って API Management で CORS の設定と Open API の定義を作って Blazor で AutoRest で生成したクライアントを使って API を呼ぶ SPA を作ってストレージアカウントの静的 Web サイトに置いて動かしてみました。

以下のような感じの構成ですね。

f:id:okazuki:20190713151131p:plain

動いてるところはこんな感じ。この動画ではわかりませんが、ちゃんとクライアントサイド Blazor です。

youtu.be

コードは下に置いてますが、ARM Template などは用意してないので参考程度に。

github.com

一番威力を実感したのは、AutoRest で生成した API のクライアントのコードが Blazor のプロジェクトで普通にさくっと使えたところでしょうか。

下のような感じで。IJazugapiBackup が生成したクライアントです。

@page "/"
@inject IJazugapiBackup client

<table class="table table-bordered">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var emp in emps ?? Enumerable.Empty<Employee>())
        {
            <tr>
                <td>@emp.Id</td>
                <td>@emp.Name</td>
            </tr>
        }
    </tbody>
</table>

@code {
    private IList<Employee> emps;
    protected override async Task OnInitAsync()
    {
        emps = await client.GetGetemployeesAsync();
    }
}

Startup.cs で以下のように DI 出来るように登録してます。

public void ConfigureServices(IServiceCollection services)
{
    services.AddTransient<IJazugapiBackup>(provider =>
    {
        return new JazugapiBackup(provider.GetService<HttpClient>(), false);
    });
}

これが普通にさくっと動いたときは、便利だな…と素直に思いました。