Help us understand the problem. What is going on with this article?

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

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

Azure Static Web Apps with .NET and Blazor

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

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

Blazor + C# の Functions の試し方

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

image.png

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

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

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

image.png

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

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 に書いてあって、ここに BaseAddresshttp://localhost:7071/ であると書いてあります。

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

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

デプロイして実行

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

image.png

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

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

image.png

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

image.png

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

まとめ

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

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

okazuki
日本マイクロソフトでサポート系のエンジニアとして働いています。 好きな言語は C# と TypeScript。メインの興味領域は Windows クライアントアプリ開発と Xamarin によるモバイルアプリ開発。その延長として API を作るための Azure の PaaS 系サービスが好きです。 SPA はたしなむ程度に。 お約束ですが、ここでの発言は個人の見解になります。
https://blog.okazuki.jp
microsoft
マイクロソフトのメンバーが最新の技術情報をお届けします。Twitterアカウント(@msdevjp)やYouTubeチャンネル「クラウドデベロッパーちゃんねる」も運用中です。
https://aka.ms/MSFT-Docs-JPN
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away