[Ubuntu + Nginx]Blazor Serverアプリのデプロイ方法

Blzor Serverでウェブアプリを作ったらやっぱり公開して反応をみたい!

けどWindowsサーバは高いので、Ubuntu + Nginxで安く運用したい!!

と思ったので、Ubuntu + NginxでBlazor Serverアプリをデプロイする方法を紹介します。

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バージョンのサポート対応表は以下に記載されています。

https://docs.microsoft.com/en-us/dotnet/core/install/linux-ubuntu#supported-distributions

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での導入手順が表示されます。

https://certbot.eff.org/instructions

詳しくは上記サイトを参照して頂けたらと思いますが、簡単に手順を書くと以下のようになります。

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との連携

コメントを残す

メールアドレスが公開されることはありません。