クライアントサイド 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


\ シ ェ ア お ね が い し ま す ! ! /

目次