かずきのBlog@hatena

すきな言語は C# + XAML の組み合わせ。Azure Functions も好き。最近は Go 言語勉強中。日本マイクロソフトで働いていますが、ここに書いていることは個人的なメモなので会社の公式見解ではありません。

全てサーバーレス + 全て 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);
    });
}

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

まとめ

11 月にリリース予定の .NET Core 3.1 (LTS 版) が楽しみ。