Blazorを触ってみた

.NET Core 3.0でBlazorが正式リリースされたので触ってみたメモ。
ちなみに今回正式リリースされたのはサーバー側のみで、クライアント側（WebAssembly）は来年の予定とのこと。
（Blazorについては https://docs.microsoft.com/ja-jp/aspnet/core/blazor/?view=aspnetcore-3.0 を参照。）

今回は開発環境をWindowsで作ってビルドし、CentOSで実行するところまでやってみる。

# 開発環境（Windows）の構築

## .NET Coreのインストール
https://dotnet.microsoft.com/download/dotnet-core より.NET Core SDK 3.0.100のInstallerをダウンロードして実行。

```console
C:\dotnet --version
3.0.100
```
## Blazorのプロジェクトテンプレートをインストール

```console
C:\dotnet new -i dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.0.0
```

以下のコマンドでBlazor Server Appがインストールされたことを確認。

```console
C:\dotnet new
～
Blazor Server App                                 blazorserver             [C#]              Web/Blazor
～
```

## プロジェクトの作成

テンプレートにblazorserver、-oオプションでフォルダ名、、-nオプションでプロジェクト名を指定してプロジェクトを作成。

```console
c:\cd c:\workspace
c:\workspace>dotnet new blazorserver -o testapp -n testapp
The template "Blazor Server App" was created successfully.
This template contains technologies from parties other than Microsoft, see https
://aka.ms/aspnetcore/3.0-third-party-notices for details.

Processing post-creation actions...
Running 'dotnet restore' on testapp\testapp.csproj...
  c:\workspace\testapp\testapp.csproj の復元が 57.26 ms で完了しました。

Restore succeeded.
```
## プロジェクトのビルド&実行

「dotnet build」でビルド。

```console
c:\workspace\testapp>dotnet build
.NET Core 向け Microsoft (R) Build Engine バージョン 16.3.0+0f4c62fea
Copyright (C) Microsoft Corporation.All rights reserved.

  c:\workspace\testapp\testapp.csproj の復元が 31.52 ms で完了しました。
  testapp-> c:\workspace\testapp\bin\Debug\netcoreapp3.0\testapp.dll
  testapp-> c:\workspace\testapp\bin\Debug\netcoreapp3.0\testapp.Views.dl
l

ビルドに成功しました。
    0 個の警告
    0 エラー

経過時間 00:00:04.45
```

「dotnet run」で起動。

```console
c:\workspace\testapp>dotnet run
info: Microsoft.AspNetCore.DataProtection.KeyManagement.XmlKeyManager[0]
      User profile is available. Using 'C:\Users\xxxxxx\AppData\Local\ASP.NET
\DataProtection-Keys' as key repository and Windows DPAPI to encrypt keys at res
t.
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:\workspace\testapp
```

と思ったら http://localhost:5000/ にアクセスすると、httpsにリダイレクトされセキュリティエラーになってしまった。
Startup.csのhttpsへのリダイレクトを行っている個所を一時的にコメントアウトして再度実行。

```c#:Startup.cs
// app.UseHttpsRedirection();
```

テンプレートのページが表示されることを確認。
![index.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46277/89049e78-7d84-1aa3-f588-23f3391af8b2.png)

## Visual Studio Codeのインストール

https://code.visualstudio.com/download よりInstallerをダウンロードして実行。
インストールが完了したら、起動して拡張機能からC# for Visual Studio Codeをインストール。
![vscode_plugin.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46277/0651a627-977d-50d9-3cb7-9b26a5b256cb.png)

## 少しいじってデバッグ実行

「ファイル」→「フォルダーを開く」で上記で作成したプロジェクトフォルダを開いてみる。
Index.razorがトップページのようなので、現在日時を表示するよう少しいじり、
ブレークポイントを設定してから「デバッグ」→「デバッグの開始」。

```c#:Index.razor
@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.
@hogehoge

@code {
    String hogehoge = DateTime.Now.ToString();
}
```

ブレークポイントで停止すること、いじった部分が反映されていることが確認できる。

![hogehoge.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46277/9f34861e-17f8-4fbe-2ab4-1fd083e94888.png)
![hogehoge2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46277/0316b08d-d5a9-50f2-4cee-73eaefd98ed4.png)

## 成果物の作成

リリースビルドで成果物を作成。

```console
c:\workspace\testapp>dotnet publish -c Release
.NET Core 向け Microsoft (R) Build Engine バージョン 16.3.0+0f4c62fea
Copyright (C) Microsoft Corporation.All rights reserved.

  c:\workspace\testapp\testapp.csproj の復元が 54.26 ms で完了しました。
  testapp-> c:\workspace\testapp\bin\Release\netcoreapp3.0\testapp.dll
  testapp-> c:\workspace\testapp\bin\Release\netcoreapp3.0\testapp.Views.
dll
  testapp -> c:\workspace\testapp\bin\Release\netcoreapp3.0\publish\
```

## 実行環境（CentOS）の構築

実行環境（今回はCentOS 7）で上記アプリケーションを実行してみる。

## .NET Core3.0 をインストール

https://dotnet.microsoft.com/download/linux-package-manager/centos7/runtime-3.0.0
を参考に.NET Core Runtimeをインストールする。

```console
sudo rpm -Uvh https://packages.microsoft.com/config/centos/7/packages-microsoft-prod.rpm
sudo yum install aspnetcore-runtime-3.0
```
## アプリケーションの配備、サービス化、起動

https://docs.microsoft.com/ja-jp/aspnet/core/host-and-deploy/linux-nginx?view=aspnetcore-3.0#monitoring-our-application
を参考にサービスファイルを作成して起動。

```console
sudo vi /usr/lib/systemd/system/testapp.service

----
[Unit]
Description=testapp

[Service]
WorkingDirectory=/opt/testapp
ExecStart=/usr/bin/dotnet /opt/testapp/testapp.dll
Restart=always
RestartSec=10
SyslogIdentifier=dotnet-example
Environment=ASPNETCORE_ENVIRONMENT=Production
# 後で専用ユーザー作るとして、とりあえずrootで・・
User=root

[Install]
WantedBy=multi-user.target
----

sudo systemctl start testapp.service
```

問題なく動いた。

# おわり

意外とトラブらずに動いてくれた。
Razor構文も正直よくわからんレベルなので、色々いじくってみて何かしら知見ができたらまた。