CSS や JavaScript の勉強で昔作った Toumei という Web アプリを、.NET 5.0 の Blazor WebAssembly に作り変えて Azure Static Web Apps で実行するという趣味コードを書いてます。
Blazor WebAssembly
docs.microsoft.com
Azure Static Web Apps
docs.microsoft.com
とりあえずまずはこれまでのコードを Blazor WebAssembly のプロジェクトに移し、 Azure Static Web Apps にデプロイするところまでをやっています。
- ソリューションファイルと Blazor WebAssembly のプロジェクトを作る
- ページ共通のレイアウトを移す
- htmlタグ、headタグ、bodyタグの静的な部分 ->
wwwroot/index.html
- コンテンツ部の共通部分 ->
Shared/MainLayout.razor
- htmlタグ、headタグ、bodyタグの静的な部分 ->
- formタグを Blazor のフォームコンポーネントに変える
- GitHub Actions で Azure Static Web Apps にデプロイする
- ポータルからデプロイするチュートリアル
- デプロイするソースの設定で「Blazor」を選ぶこと
Azure Static Web Apps にデプロイした見た目はこんな感じ。 URL が Azure のドメイン (azurestaticapps.net) となっている。
Blazor WebAssembly を勉強しつつ Blazor WebAssembly に合わせたコードに変えていこう。