Azure の静的サイトをホストする Azure Static Web Apps が Blazor と C# の Functions サポートしたらしいので試してみた

Azure Static Web Apps の更新情報を確認してみると Python もサポートされていたりして着々と開発が進んでるみたいです。

Blazor + C# の Functions の試し方

最初に紹介したブログに書いてあるのですが、若干気を付ける点があったので書いておこうと思います。
ブログにある GitHub のリポジトリを自分のアカウントにコピーして始めるのですが、これをクローンして Api プロジェクトと Client プロジェクトをローカルで実行して Client の Fetch data のページを開くと CORS のエラーが出ます。

これは、デフォルトでローカル開発用の設定ファイルの local.settings.json が .gitignore に入ってるのでリポジトリに含まれていないためです。なので以下の内容の local.settings.json を Api プロジェクトに追加することでエラー無しでローカルで実行できます。

{
  "Values": {
  },
  "Host": {
    "CORS":  "*"
  }
}

これを追加して実行すると以下のようにローカルで動くようになります。

Client プロジェクトの Program.cs を見てみると builder.Configuration["BaseAddress"] ?? builder.HostEnvironment.BaseAddress という感じで設定に BaseAddress という設定があったら HttpClient の BaseAddress に設定しています。設定にない場合はホストの BaseAddress を使うようになっています。

using System;
using System.Net.Http;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.DependencyInjection;

namespace BlazorApp.Client
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");

            var baseAddress = builder.Configuration["BaseAddress"] ?? builder.HostEnvironment.BaseAddress;
            builder.Services.AddScoped(_ => new HttpClient { BaseAddress = new Uri(baseAddress) });

            await builder.Build().RunAsync();
        }
    }
}

Blazor WebAssembly の開発中のみ有効な設定は wwwroot/appsettings.Development.json に書いてあって、ここに BaseAddress が http://localhost:7071/ であると書いてあります。

{
  "BaseAddress": "http://localhost:7071/"
}

これでローカルの時だけローカルで実行している Azure Functions の方を見に行くようになっています。Azure Static Web Apps にデプロイしたときは、関数は同じホストにいるので同じホストの /api/関数名 を見に行くようになっています。なるほどね。

デプロイして実行

デプロイから実行するのは本当にトラブルがないです。routes.json もリポジトリに入ってるし。フレームワークの中の選択肢に Blazor も入ってるし。

既存のプロジェクトがあって、それに合わせるとなるとちょっとカスタム頑張らないとですが、そうじゃなければ Static Web Apps が想定しているものに合わせるのがいいですね。

デプロイが完了すると紐づけた GitHub のリポジトリに自動で GitHub Actions が構成されて動きます。

動き終わるとちゃんと表示されました。

PullRequest の時に確認用の環境をたててくれたりとかは試してませんが、生成された GitHub Actions を見る限り対応してくれてそうでした。

まとめ

ということで、ローカル実行を試してみようと思ったら local.settings.json を作っておかないと CORS のエラーになってしまいますが、そこさえ気を付けていれば割と簡単にローカル実行から Static Web Apps へのデプロイまでを体験するのは、そんなに難しくないと感じました。

今のところ一番 GA が待ち遠しいサービスなので期待大ですね！