まだプレビューのサービスですが、期待大の Azure Static Web Apps で Blazor と C# の関数がサポートされました。以下のブログでアナウンスされてます。
Azure Static Web Apps with .NET and Blazor
Microsoft MVP の三宅さんのツイートのトップにも、このサービス関連のスライドがピン止めされてますね！
Front-end web applications with Azure Static Web Apps https://t.co/oAQN1Zj74R#VACD
— k-miyake (@kazuyukimiyake) July 28, 2020
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を使うようになっています。
usingSystem;usingSystem.Net.Http;usingSystem.Threading.Tasks;usingMicrosoft.AspNetCore.Components.WebAssembly.Hosting;usingMicrosoft.Extensions.DependencyInjection;namespaceBlazorApp.Client{publicclassProgram{publicstaticasyncTaskMain(string[]args){varbuilder=WebAssemblyHostBuilder.CreateDefault(args);builder.RootComponents.Add<App>("app");varbaseAddress=builder.Configuration["BaseAddress"]??builder.HostEnvironment.BaseAddress;builder.Services.AddScoped(_=>newHttpClient{BaseAddress=newUri(baseAddress)});awaitbuilder.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 が待ち遠しいサービスなので期待大ですね！