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

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

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

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

0 はじめに

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

404 NOT FOUND | Useful Edge

サイバー空間探訪記

usefuledge.com

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

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

Download .NET (Linux, macOS, and Windows)

Free downloads for building and running .NET apps on Linux, macOS, and Windows. Runtimes, SDKs, and developer packs for .NET Framework, .NET, and ASP.NET.

dotnet.microsoft.com

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にデプロイしています。

404 NOT FOUND | Useful Edge

サイバー空間探訪記

usefuledge.com

9 参考文献

ASP.NET Core Blazor tutorials

Learn how to build Blazor apps with the tutorials listed in this article.

learn.microsoft.com

Host and deploy ASP.NET Core Blazor

Discover how to host and deploy Blazor apps.

learn.microsoft.com

Blazor のおすすめ本

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

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

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

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