Blazor WebAssembly と Azure Static Web Apps を学ぶためにコードを書く

CSS や JavaScript の勉強で昔作った Toumei という Web アプリを、.NET 5.0 の Blazor WebAssembly に作り変えて Azure Static Web Apps で実行するという趣味コードを書いてます。

tsubalog.hatenablog.com

Blazor WebAssembly
docs.microsoft.com

Azure Static Web Apps
docs.microsoft.com

---

とりあえずまずはこれまでのコードを Blazor WebAssembly のプロジェクトに移し、 Azure Static Web Apps にデプロイするところまでをやっています。

1. ソリューションファイルと Blazor WebAssembly のプロジェクトを作る
2. ページ共通のレイアウトを移す
   • htmlタグ、headタグ、bodyタグの静的な部分 -> wwwroot/index.html
   • コンテンツ部の共通部分 -> Shared/MainLayout.razor
3. formタグを Blazor のフォームコンポーネントに変える
4. GitHub Actions で Azure Static Web Apps にデプロイする
   • ポータルからデプロイするチュートリアル
   • デプロイするソースの設定で「Blazor」を選ぶこと

Azure Static Web Apps にデプロイした見た目はこんな感じ。 URL が Azure のドメイン (azurestaticapps.net) となっている。

Blazor WebAssembly を勉強しつつ Blazor WebAssembly に合わせたコードに変えていこう。

github.com