まだプレビューのサービスですが、期待大の 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 を使うようになっています。
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 が待ち遠しいサービスなので期待大ですね！