Blzor Serverでウェブアプリを作ったらやっぱり公開して反応をみたい!
けどWindowsサーバは高いので、Ubuntu + Nginxで安く運用したい!!
と思ったので、Ubuntu + NginxでBlazor Serverアプリをデプロイする方法を紹介します。
- 1. Ubuntu Server構築
- 2. ドメイン取得
- 3. DNS設定
- 4. Ubuntu アップデート&アップグレード
- 5. Ubuntuホスト名変更
- 6. Nginxインストール
- 7. Nginx設定
- 7-1. Blazor ServerアプリのLISTENポート確認方法
- 8. dotnet SDK のインストール
- 9. SSL通信構築(Let's Encrypt)
- 10. Nginx再起動
- 11. Blazorアプリのビルド(publish)
- 12. 実行フォルダへコピー
- 13. dotnet blazor app サービス化
- 14. サービスの有効化
- 15. サービス起動確認
- 16. https接続確認
- 17. 500エラーが発生した場合
- 18. Blazor Server アプリケーションログの確認方法
- Blazor のおすすめ本
1. Ubuntu Server構築
まず、なんといってもUbuntu Serverが無いことには始まりません。よって、VPSでもなんでもいいので、Ubuntu Serverの構築が必要です。
ちなみに私はAWSユーザーですので(Azureじゃないんかい!)、LightSailでサクッと構築しました。
構成は以下のとおりです。
- Ubuntuインスタンス作成(1 GB RAM、1 vCPU、40 GB のSSD)
- Static IP設定
- ファイアウォール設定(HTTPSポート解放)
マウスでポチポチするだけで設定できます。
2. ドメイン取得
ただ実行するだけならドメインは不要なんですが、サービスとして公開するには必須です。
また、口述するLet\'s encryptでhttpsを構築する際にドメイン設定済みである必要があります。
ドメイン取得サービスはどこでもいいと思いますが、AWSの場合だとRoute53(DNSサービス)を使う必要がありますので、DNSの向き先をAWSに変更する必要があります。
3. DNS設定
Aレコードを追加して、ドメイン名とIPアドレスを紐づけましょう。
このときのIPアドレスは、上述した静的IPアドレスです。
4. Ubuntu アップデート&アップグレード
Ubuntuのインストール済みパッケージをアップグレードしましょう。
sudo apt update
sudo apt upgrade
5. Ubuntuホスト名変更
/etc/hostname
を編集して、取得したドメイン名に書き換えます。
その後、以下のコマンドで再起動しましょう。
sudo shutdown -r now
6. Nginxインストール
aptコマンドでさくっとインストールしましょう。
sudo apt install nginx
7. Nginx設定
/etc/nginx/sites-available/default
のファイルを編集していきます。
sudo vi /etc/nginx/sites-available/default
# Default server configuration
#
server {
listen 80;
listen [::]:80;
# SSL configuration
#
# listen 443 ssl default_server;
# listen [::]:443 ssl default_server;
#
# Note: You should disable gzip for SSL traffic.
# See: https://bugs.debian.org/773332
#
# Read up on ssl_ciphers to ensure a secure configurat
ion.
# See: https://bugs.debian.org/765782
#
# Self signed certs generated by the ssl-cert package
# Don't use them in a production server!
#
# include snippets/snakeoil.conf;
#root /var/www/html;
# Add index.php to the list if you are using PHP
#index index.html index.htm index.nginx-debian.html;
server_name example.com *.example.com;
location / {
# First attempt to serve request as file, then
# as directory, then fall back to displaying a
404.
#try_files $uri $uri/ =404;
proxy_pass https://127.0.0.1:7057;
proxy_redirect off;
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;
proxy_set_header X-Forwarded-Proto $scheme;
}
server_name
について
server_name example.com *.example.com;
example.com
だけじゃなく、サブドメイン(*.example.com)も制御可能なように記述しています。
proxy_pass
について
proxy_pass https://127.0.0.1:7057;
httpsプロトコルで、ローカルの 7057 番ポートをプロキシするようにしています。
このアドレスで Blazor Server アプリがLISTEN状態である必要があります。
7-1. Blazor ServerアプリのLISTENポート確認方法
LISTENポートは、(プロジェクトフォルダ)/Properties/launchSettings.json
に記述されています。
以下の例では、httpsが7057番ポート、httpが5256番ポートでLISTENします。
{
iisSettings: {
windowsAuthentication: false,
anonymousAuthentication: true,
iisExpress: {
applicationUrl: http://localhost:59291,
sslPort: 44300
}
},
profiles: {
exampleapp: {
commandName: Project,
dotnetRunMessages: true,
launchBrowser: true,
applicationUrl: https://localhost:7057;http://localhost:5256,
environmentVariables: {
ASPNETCORE_ENVIRONMENT: Development
}
},
IIS Express: {
commandName: IISExpress,
launchBrowser: true,
environmentVariables: {
ASPNETCORE_ENVIRONMENT: Development
}
}
}
}
8. dotnet SDK のインストール
ただ実行するだけであればSDKは不要でランタイムで問題ありません。
しかし、私はビルドがしたかったのでSDKをインストールしました。
Ubuntu各バージョンとdotnetバージョンのサポート対応表は以下に記載されています。
Ubuntu 20.04 & dotnet 6 sdk のインストールは以下のコマンドで行えます。
wget https://packages.microsoft.com/config/ubuntu/20.04/packages-microsoft-prod.deb -O packages-microsoft-prod.deb
sudo dpkg -i packages-microsoft-prod.deb
rm packages-microsoft-prod.deb
sudo apt-get update; \
sudo apt-get install -y apt-transport-https && \
sudo apt-get update && \
sudo apt-get install -y dotnet-sdk-6.0
9. SSL通信構築(Let's Encrypt)
HTTPS通信を行うために、Let\'s Encryptを導入します。
CertBotでサクサク導入しましょう。
以下のページにアクセスし、Software
からNginx
を選択し、System
からUbuntu 20
を選択します。
Ubuntu 20 & Nginxでの導入手順が表示されます。
詳しくは上記サイトを参照して頂けたらと思いますが、簡単に手順を書くと以下のようになります。
9-1. Certbotコマンドの存在確認
which certbot
9-2. Certbotがインストールされている場合は、アンインストール
sudo apt-get remove certbot
9-3. Certbotインストール
sudo snap install --classic certbot
9-4. Certbotコマンドパスの変更
sudo ln -s /snap/bin/certbot /usr/bin/certbot
9-5. Nginxに対して証明書をインストール
sudo certbot --nginx
証明書インストールが正しく行われると、/etc/nginx/sites-available/default
ファイルに以下のようなものが自動的に追加されます。
listen [::]:443 ssl ipv6only=on; # managed by Certbot
listen 443 ssl; # managed by Certbot
ssl_certificate /etc/letsencrypt/live/ホスト名/fullchain.pem; # managed by Certbot
ssl_certificate_key /etc/letsencrypt/live/ホスト名/privkey.pem; # managed by Certbot
include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
10. Nginx再起動
いろいろ設定してきたので、一旦ここでNginxを再起動しましょう。
sudo systemctl restart nginx
11. Blazorアプリのビルド(publish)
Blazorアプリをビルドして、実行フォルダに配置しましょう。
ビルドは以下のコマンドで行います。
dotnet publish -c Release
以下のフォルダに出力されます。
(プロジェクトフォルダ)/bin/Release/(dotnetバージョン)/publish/
12. 実行フォルダへコピー
この記事では、/var直下にフォルダを作成して(/var/exampleapp など)、そこにアプリをコピーします。
mkdir /var/exampleapp
sudo cp -r (プロジェクトフォルダ)/bin/Release/(dotnetバージョン)/publish/* /var/exampleapp
exampleapp
の部分はデプロイするアプリ名などに変更してください。
13. dotnet blazor app サービス化
systemctlコマンドから起動や再起動、停止などが行えるようにします。
/lib/systemd/system
フォルダにserviceファイルを新規作成しましょう。
この記事では、exampleapp.service
というファイルを作成します。
sudo vi /lib/systemd/system/exampleapp.service
[Unit]
Description=Example .NET Web API App running on Ubuntu
[Service]
WorkingDirectory=/var/exampleapp
ExecStart=/usr/bin/dotnet /var/exampleapp/exampleapp.dll
Restart=always
# Restart service after 10 seconds if the dotnet service crashes:
RestartSec=10
KillSignal=SIGINT
SyslogIdentifier=exampleapp
#User=www-data
Environment=ASPNETCORE_ENVIRONMENT=Production
Environment=DOTNET_PRINT_TELEMETRY_MESSAGE=false
[Install]
WantedBy=multi-user.target
14. サービスの有効化
以下のコマンドでサービスを有効化します。
sudo systemctl enable exampleapp
15. サービス起動確認
以下のコマンドでサービスを起動してみましょう。
sudo systemctl start exampleapp
その後、以下のコマンドでエラーが発生していないか確認しましょう。
sudo systemctl status exampleapp
16. https接続確認
ブラウザからhttps://ホスト名/
にアクセスして、正しく表示されることを確認しましょう。
ただしく表示されれば、成功です。
17. 500エラーが発生した場合
500(Internal Server Error)が発生した場合は、以下のような画面が表示されます。
これは、Blazor ServerアプリがProduction
環境として実行されているため、詳細なエラー内容やスタックトレースが表示されないようになっています。
エラー内容は以下の方法で確認できます。
18. Blazor Server アプリケーションログの確認方法
ログは/var/log/syslog に出力されます。grepコマンドなどで絞り込みましょう。
cat /var/log/syslog | grep exampleapp
直近のログであれば、以下のコマンドで表示されます。
sudo systemctl status exampleapp
Blazor のおすすめ本
私もBlazorを用いていくつかウェブアプリを開発しました。フレームワークがとても分かりやすく、簡単にSPAを作れることが楽しいと感じています。
Blazor wasm であればAWS S3のようなウェブホスティングサービスでアプリを公開することもできますし、Blazor Serverアプリであれば簡単に2要素認証を構築できます。
Blazor は現在も開発が進められているフレームワークですので本の情報は少しずつ古くなってしまいますが、全体的・体系的に学ぶには、本はとても有力なツールです。
電子書籍になっていますので、まずは試し読みから始めてはいかがでしょうか。
章 | 内容 |
---|---|
第1章 | Blazorの仕組み |
第2章 | 開発環境 |
第3章 | 最初のBlazorアプリ |
第4章 | コンポーネント |
第5章 | データバインディング |
第6章 | イベント処理 |
第7章 | Razor記法 |
第8章 | フォームと検証 |
第9章 | データベースアクセス |
第10章 | Web APIの活用 |
第11章 | SVGの活用 |
第12章 | JavaScriptとの連携 |
コメント