Zenn
🚟

Blazor WASMをRaspberry PiでWebアプリとして動作することを確認

2024/12/15に公開
C#
Raspberry Pi
Blazor
webassenbly
tech

はじめに

前回の記事でBlazor Web Appを試しましたが、ついでにBlazor WASM(WebAssembly)プロジェクトを発行し、Raspberry PiのWWWフォルダに静的サイトとして動作できるかどうかを確認しました。

開発環境

この記事で使用した開発環境は以下の通りです。

  • Raspberry Pi

    • Raspberry Pi 4 Model B (4GB RAM)
    • OS: Ubuntu Server 24.10(64-bit)
    • nginx/1.26.0 (Ubuntu)

  • 開発PC

    • OS: Windows 11 Pro
    • 開発ツール: Visual Studio 2022 (Windows)
    • .NET SDK: .NET 8.0

プロジェクトの作成

Visual StudioでBlazor WebAssemblyスタンドアロンアプリプロジェクトを作成します。

発行設定

発行の仕方はBlazor Web Appと同じです。

Raspberry Piへ転送

発行されたファイルをRaspberry Piに転送します。以下のコマンドをWindowsターミナルやPowerShellで実行してください。
nginxのhtmlフォルダに権限があるので、一旦HOMEにコピーします。

scp -prC ./wwwroot lmjs@raspberrypi.local:~/

続いて、sshでRaspberry Piにログインし、nginxのhtmlフォルダーにコピーします。

sudo cp .wwwroot/* /var/www/html/

Nginxの設定

静的サイトを表示するため、Nginxは初期設定でOKです。

アプリケーションの起動

静的サイトなので必要ありません。

ブラウザで動作確認

ブラウザでhttp://<Raspberry PiのIPアドレスまたはホスト名>にアクセスし、アプリケーションが表示されることを確認します。

まとめ

Blazor WASM (WebAssembly) をRaspberry Piで表示できることが確認できました。Blazor WASMは静的サイトとして動作するため、nginxに任せるだけでアプリの起動が不要です。また、サーバーやAPIと通信しなければ、簡単にサイトを作成することができます。これにより、低コストで手軽にWebアプリケーションを運用することが可能です。

Discussion