Ubuntu(Lightsailおよびmultipass仮想) に Blazor WebAssemblyおよびASP.NET API アプリを構築してデプロイ
UbuntuにASP.NET Core環境を構築にて、仮想環境(multipass)上に作成したUbuntu(Lightsailのテスト環境想定)にASP.NET Coreをデプロイ動作確認を実施した。
、、、のがおおかた１年前、、、あゆみが遅い。
- Nginx 搭載の Linux で ASP.NET Core をホストする | Microsoft Learn
- Linux ディストリビューションに .NET をインストールする – .NET | Microsoft Learn
- Ubuntu に .NET をインストールする – .NET | Microsoft Learn
今一度、上記サイトを斜め読みしながら、今回はmultipass上に作成したUbuntu20.04およびLightsail本体に
- Ubuntuに.NET 環境＋Nginxの構築
- Blazorアプリ＋ASP.NET Core API 環境
- デプロイ
まで。
1.Ubuntuに.NET環境(ASP.NET Core)＋Nginxをインストール
以下を仮想環境(multipass)上に作成したUbuntu(Lightsailのテスト環境想定)それぞれに実施。
1.1 Ubuntuバージョン確認
/etc/os-release でUbuntuのバージョンを確認(バージョンによって上記リンクの参照箇所が変わってくる)
1.2 .NETインストール
.NET をインストールする前に、次のコマンドを実行して、信頼されたキーの一覧に Microsoft パッケージ署名キーを追加し、パッケージ リポジトリを追加。
$ wget https://packages.microsoft.com/config/ubuntu/22.04/packages-microsoft-prod.deb -O packages-microsoft-prod.deb $ sudo dpkg -i packages-microsoft-prod.deb $ rm packages-microsoft-prod.deb
ASP.NET Core ランタイムのインストール
$ sudo apt-get update $ sudo apt-get install -y aspnetcore-runtime–7.0
1.3 Nginxのインストール
$ sudo apt install -y nginx
動作確認OK
2.Blazor Web Assembly 開発環境の構築
dotnet new コマンドでスケルトン作成して、Visual Studio Codeで開発、、、しようと思って
webapiとblazorwasm をそれぞれ別プロジェクトで作成してソリューションにまとめて、、、
なんだけど、AngularでのSPAみたいに簡単に連携させてデバッグしたりする方法がよくわからない。。。
のでVisual Studio 2022 for mac に頼る。
Visual Studio 2022 for Mac – macOS 用 IDE (microsoft.com)
から適当にダウンロードしてインストール。
2.1 Blazor WebAssemblyアプリを新規ウィザードで作成
ローカル環境で実行しているときは、認証ありでそれっぽく動くのだが、有償サービスのようでデプロイしようとするとエラーになるので、認証は外して結局作り直した。。。
ASP.NET Core Hostedを選択すると、APIの呼び出しは、Controllerに渡るようになるっぽいのでチェックをON
アプリ認証を追加すると、デプロイ時に以下のエラー、、、(ライセンスがないと怒られる）
適宜プロジェクト名など
デバッグ実行で、Blazor＋ASP.NET Coreの同時デバッグができそう。
【追記】この時点では、Blazor+ASP.NET Coreの同時デバッグのために、Visual Studio for Macを使用したが、
普通に、-ho もしくは、—hosted オプションをつければ dotnet new で構築でき、VSCodeで良さそう
ASP.NET Core Blazor プロジェクトの構造 | Microsoft Learn
$ dotnet new blazorwasm -ho -o SetlistShare
2.2 ビルドと公開
とりあえず、なにも触らず、サンプルのままビルドして、公開(publishディレクトリに出力)する。
3.デプロイ
上記でpublishディレクトリに出力したモジュールをサーバーにコピーする。
3.1 SCPコマンドでコピー
$ scp -i ~/.ssh/LightsailDefaultKey-ap-northeast–1.pem -r ./publish ubuntu@xx.xx.xx.xx:setlistshare
Lightsailで証明書を指定する場合は、以下のような感じで
3.2 単独での動作確認
それぞれのサーバーにファイルがコピーできたら、コピーされたフォルダの中にある、XXXX.Server.dllを実行し、エラーがないことを確認
$ dotnet XXXX.Server.dll
3.2 サービスの登録
デプロイしたアプリをサービスとして登録する。
setlistshareは今回アプリ名。
ディレクトリの場所、Userなどは適宜変更する。
$ sudo vi /etc/systemd/system/setlistshare.service
[Unit] Description=SetlistSahre Blazor App [Service] WorkingDirectory=/home/piroto/setlistshare ExecStart=/usr/bin/dotnet /home/piroto/setlistshare/SetlistShare.Server.dll Restart=always # Restart service after 10 seconds if the dotnet service crashes: RestartSec=10 KillSignal=SIGINT SyslogIdentifier=setlistshare User=piroto Environment=ASPNETCORE_ENVIRONMENT=Production Environment=DOTNET_PRINT_TELEMETRY_MESSAGE=false [Install] WantedBy=multi-user.target
$ sudo systemctl start xxxxx
$ sudo systemctl status xxxxx
でサービス起動しエラーがないことを確認
3.3 Nginx仮想ホストの設定
/etc/nginx/sites-available/default に以下を追記。
仮想環境(multipass)では、mDNSによる名前解決しているので、
UbuntuでMultipass(KVM)のブリッジネットワーク環境を構築する手順 | Glob (typea.info)
server_name setlistshare.com *.setlistshare.com;
こういう書き方ができるが、Lightsail はこのドメイン名の登録などしていないので、すべてのリクエストをBlazor+ASP.NET Coreに流すために、
listen 80 default_server;
listen [::]:80 default_server;
server_name _;
とデフォルトの設定を持ってきて、defaultファイルにあるもともとの記述をコメントアウトしておく。
server {
listen 80 default_server;
listen [::]:80 default_server;
server_name _;
#server_name setlistshare.com *.setlistshare.com;
location / {
proxy_pass http://127.0.0.1:5000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection keep-alive;
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}
Nginxの再起動とステータスの確認
$ sudo systemctl restart nginx $ sudo systemctl status nginx
仮想環境(multipass)の確認OK
Lightsailの確認OK
ドメイン名を設定して接続OK
