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

速攻でメモできる QuickNote リリースしました!

QuickNoteは動作が超軽量でサクサクかけるノートアプリです。一瞬の閃きを逃さずにノートを開き書き始めることができます。 アカウント登録も不要です。お試しあれ!

Excel操作をコマンドで! proBoarderExcel

Excelはマウスで操作するのが基本ですが、マウス操作に疲れてはいませんか? キーボードでExcel操作ができるようになるアプリです。オープンソースで無料です。

積み上げ! Daily Stack リリースしました!

Daily Stack は日々の積み上げを管理するToDoアプリです。過去の積み上げの振り返りだけでなく、ツイート機能もあります。 アカウント登録不要ですぐに使い始めることができます。

ExecNote.app リリースしました!

ExecNoteは、コードが実行できるMarkdownアプリケーションです。Markdownドキュメント内に記載したコードをクリックすると実行ができます。わざわざターミナルを 起動させる必要がありません!無料ですのでもしよければダウンロードをお願いします。

About Me

11年目のシステムエンジニアです。アプリで生活や仕事を改善したい🐱仕事効率化、自動化のアプリ開発が得意です、ご相談ください。 🚀エンタメ系アプリの開発も模索中🐬社内SEや個人アプリ開発者、システムエンジニアになりたい人と繋がりたい🐱