クライアントサイド Blazor のプロジェクトを生成して公開する方法

Blazor とは、Microsoftが開発した Web UI コンポーネントです。.NETライブラリを使用することができ、C#で開発できます。

Blazorは2種類あります。1つはサーバーサイドBlazorで、ASP.NET core をサーバーに構築してデプロイします。もう一つはクライアントサイド Blazor で、Blazor wasmともいわれています。こちらはサーバーサイドが必要ありませんので、cdnなどを使用して公開することが可能です。

この記事では、クライアントサイト Blazor (Blazor wasm) のテンプレートを生成して公開するところまで説明します。

0 はじめに

以下のURLのように、ASP.NET サーバーを使用することなく、ブラウザのみでBlazorを実行できます。

https://usefuledge.com/blazorwasmsample/index.html

1 .NET Core SDK をインストールする

以下のページから、.NET Core SDK をインストールします。

https://dotnet.microsoft.com/download

2 dotnet CLI が使用できるか確認する

以下のコマンドを実行して、dotnet コマンドが使用できるか確認します。

  • dotnet –list-sdks

以下のように、インストールされたSDKバージョンが表示されるはずです。執筆時点では、3.1.201 を使用しています。

C:\Users\Haru>dotnet –list-sdks 3.1.201 [C:\Program Files\dotnet\sdk]

3 blazorwasm テンプレートをインストールする

以下のコマンドを実行して、blazorwasm テンプレートをインストールします。

  • dotnet new -i Microsoft.AspNetCore.Components.WebAssembly.Templates::3.2.0-rc1.20223.4

4 dotnet new コマンドから、blazorwasm が表示されるか確認する

以下のコマンドを実行して、dotnet テンプレートを表示します。

  • dotnet new

以下のように一覧で表示されますので、この中に「blazorwasm(Blazor WebAssembly App)」があるか確認します。

5 blazorwasm プロジェクトを生成する

以下のコマンドを実行して、blazorwasmプロジェクトを生成します。

  • dotnet new blazorwasm -o blazorwasmsample

以下のように表示されれば、成功です。

C:\jwork\@Tutorial>dotnet new blazorwasm -o blazorwasmsample The template Blazor WebAssembly App was created successfully.

Processing post-creation actions… Running \’dotnet restore\’ on C:\jwork\@Tutorial\blazorwasmsample\blazorwasmsample.csproj… Restore completed in 11.5 sec for C:\jwork\@Tutorial\blazorwasmsample\blazorwasmsample.csproj.

Restore succeeded.

6 実行する

以下のコマンドを使用して実行します。

  • cd blazorwasmsample
  • dotnet run

以下のように表示されると思います。

info: Microsoft.Hosting.Lifetime[0] Now listening on: https://localhost:5001 info: Microsoft.Hosting.Lifetime[0] Now listening on: http://localhost:5000 info: Microsoft.Hosting.Lifetime[0] Application started. Press Ctrl+C to shut down. info: Microsoft.Hosting.Lifetime[0] Hosting environment: Development info: Microsoft.Hosting.Lifetime[0] Content root path: C:\jwork\@Tutorial\blazorwasmsample

http://localhost:5000 にアクセスして表示されるか確認しましょう。

7 Release バージョンで Publish する

以下のコマンドを実行して、Release バージョンで Publish します。

  • dotnet publish -c Release

以下のフォルダに、Publish データ一式が出力されます。

  • blazorwasmsample\bin\Release\netstandard2.1\publish\wwwroot

8 最後に

今回生成したビルドファイルは以下のURLにデプロイしています。

https://usefuledge.com/blazorwasmsample/index.html

9 参考文献

https://docs.microsoft.com/en-us/aspnet/core/blazor/get-started?view=aspnetcore-3.1&tabs=visual-studio-code

https://docs.microsoft.com/en-us/aspnet/core/host-and-deploy/blazor/?view=aspnetcore-3.1&tabs=netcore-cli

Blazor のおすすめ本

私もBlazorを用いていくつかウェブアプリを開発しました。フレームワークがとても分かりやすく、簡単にSPAを作れることが楽しいと感じています。

Blazor wasm であればAWS S3のようなウェブホスティングサービスでアプリを公開することもできますし、Blazor Serverアプリであれば簡単に2要素認証を構築できます。

Blazor は現在も開発が進められているフレームワークですので本の情報は少しずつ古くなってしまいますが、全体的・体系的に学ぶには、本はとても有力なツールです。

電子書籍になっていますので、まずは試し読みから始めてはいかがでしょうか。

内容
第1章 Blazorの仕組み
第2章 開発環境
第3章 最初のBlazorアプリ
第4章 コンポーネント
第5章 データバインディング
第6章 イベント処理
第7章 Razor記法
第8章 フォームと検証
第9章 データベースアクセス
第10章 Web APIの活用
第11章 SVGの活用
第12章 JavaScriptとの連携

カテゴリー: C#

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です