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

まだプレビューのサービスですが、期待大の Azure Static Web Apps で Blazor と C# の関数がサポートされました。以下のブログでアナウンスされてます。

[Azure Static Web Apps with .NET and Blazor](https://devblogs.microsoft.com/aspnet/azure-static-web-apps-with-blazor/)

Microsoft MVP の三宅さんのツイートのトップにも、このサービス関連のスライドがピン止めされてますね！

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Front-end web applications with Azure Static Web Apps <a href="https://t.co/oAQN1Zj74R">https://t.co/oAQN1Zj74R</a> <a href="https://twitter.com/hashtag/VACD?src=hash&amp;ref_src=twsrc%5Etfw">#VACD</a></p>&mdash; k-miyake (@kazuyukimiyake) <a href="https://twitter.com/kazuyukimiyake/status/1288056899896631302?ref_src=twsrc%5Etfw">July 28, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

[Azure Static Web Apps の更新情報](https://azure.microsoft.com/ja-jp/updates/blazor-and-c-sharp-apis-now-supported-in-azure-static-web-apps/)を確認してみると Python もサポートされていたりして着々と開発が進んでるみたいです。

## Blazor + C# の Functions の試し方

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/70288/f4d6a200-d143-d3ed-32f0-63459b2662c7.png)

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

```json:local.settings.json
{
  "Values": {
  },
  "Host": {
    "CORS":  "*"
  }
}
```

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/70288/d5b94d9a-878e-61bb-f209-e8175a0a16dd.png)

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

```csharp:Program.cs
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/` であると書いてあります。

```json:appsettings.Development.json
{
  "BaseAddress": "http://localhost:7071/"
}
```

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

## デプロイして実行

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/70288/f30db2fa-651c-d8ff-5f4b-9ea04051ec3f.png)

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/70288/8b2d9f3a-6f57-ca8f-a30b-7204a4699fbe.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/70288/fd732100-6a7d-184d-f92b-ee1f495ca0cf.png)

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

## まとめ

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

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