Zenn
📖

.NET Core Blazor + MicroCMSでブログサイト作成⑩

2021/09/28に公開
.NET
C#
Blazor
tech

また遅くなりました。
情報収集で情報の波にさらわれていました。

今回はいよいよアプリのデプロイです。
ここまで作ってきたものを世に放つ作業です。
本来はAzureにデプロイするつもりでしたが、何がなんやらわからなったのでDockerに詰め込んでHerokuにデプロイしたいと思います。

参考にしたサイトはこちらです。
https://note.com/katapy_tennis/n/ncc43bb6e7235

Release版の動作確認

ビルド

VisualStudioまたはPowerShell(orコマンドプロンプト)から、アプリをRelease版でビルドします。
コマンドプロンプトはディレクトリのデリミタを補完してくれないので、PowerShellがおすすめです。

PowerShell

プロジェクトのルートディレクトリへ移動

PS C:\Users\moootoko> cd .\source\repos\BlazorBlog
PS C:\Users\moootoko\source\repos\BlazorBlog> ls
    ディレクトリ: C:\Users\moootoko\source\repos\BlazorBlog


Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
d-----        2021/09/05      1:28                .github
d-----        2021/08/19      1:05                BlazorBlog
-a----        2021/08/24     11:06           2581 .gitattributes
-a----        2021/08/24     11:06           6585 .gitignore
-a----        2021/09/16     20:59           2166 BlazorBlog.sln
-a----        2021/09/22     11:49            457 Dockerfile

Releaseビルド実行

PS C:\Users\moootoko\source\repos\BlazorBlog> dotnet publish -c Release
.NET 5.0 へようこそ!
---------------------
SDK バージョン: 5.0.401

...

 Compressing Blazor WebAssembly publish artifacts. This may take a while...
  BlazorBlog.Client -> C:\Users\moootoko\source\repos\BlazorBlog\BlazorBlog\Client\bin\Release\net5.0\publish\
  BlazorBlog.Server -> C:\Users\moootoko\source\repos\BlazorBlog\BlazorBlog\Server\bin\Release\net5.0\BlazorBlog.Server.dll
  BlazorBlog.Server -> C:\Users\moootoko\source\repos\BlazorBlog\BlazorBlog\Server\bin\Release\net5.0\BlazorBlog.Server.Views.dll
  BlazorBlog.Server -> C:\Users\moootoko\source\repos\BlazorBlog\BlazorBlog\Server\bin\Release\net5.0\publish\
PS C:\Users\moootoko\source\repos\BlazorBlog>

ゴニョゴニョとログが出てきて、アセンブリを圧縮する作業が完了したら操作が戻ってきます。

VisualStudio

メニューバーの「ビルド」＞「（ソリューション名）の発行」

構成がReleaseになっていることを確認します。
「＋新規」をクリック

「フォルダ」を選択

何も設定を変えずに完了クリック
設定を変えずに「完了」をクリック

「発行」をクリックしてビルド開始

出力ウィンドウにビルド失敗のログが出ていないことを確認して完了です。

Release版をローカルで実行

PowerShell（orコマンドプロンプト）でRelease版のServerDLLが置いてあるディレクトリに移動します。
そしてServerDLLを実行します。

PS C:\Users\moootoko> cd .\source\repos\BlazorBlog\BlazorBlog\Server\bin\Release\net5.0\publish\
PS C:\Users\moootoko\source\repos\BlazorBlog\BlazorBlog\Server\bin\Release\net5.0\publish> dotnet .\BlazorBlog.Server.dll
info: Microsoft.Hosting.Lifetime[0]
      Now listening on: http://localhost:5000
info: Microsoft.Hosting.Lifetime[0]
      Now listening on: https://localhost:5001
info: Microsoft.Hosting.Lifetime[0]
      Application started. Press Ctrl+C to shut down.
info: Microsoft.Hosting.Lifetime[0]
      Hosting environment: Production
info: Microsoft.Hosting.Lifetime[0]
      Content root path: C:\Users\moootoko\source\repos\BlazorBlog\BlazorBlog\Server\bin\Release\net5.0\publish

http://localhost:5000にアクセスして確認します。

通信量も見てみます。

いくつかキャッシュされている（メモリキャッシュ、ディスクキャッシュ、コード304）ものもありますが、随分とスリムになりました。
これならスマホで開いても通信制限に影響があることはないでしょう。

MicroCMSのフェッチもかなり早くなりました。キモチィー！！

Herokuの準備

アカウント作成して新規プロジェクトを作成するだけです。
プロジェクト名はblazor-blogにします。
（名前の制約で頭文字を大文字にできなかったので、こんな名前になりました）

デプロイ

プロジェクトにDockerサポートを追加

VisualStudioで、BlazorBlog.Serverを右クリックし、画像の通り選択します。

Windows10 HomeではWSL2ベースでしかDockerが動かないので、Linuxを選択してOK。

するとBlazorBlog.ServerプロジェクトにDockerfileが生成されます。（エクスプローラー or VisualStudioで「すべてのファイルを表示」で見れます）
このDockerfileはあくまでAzureにデプロイするときに便利なテンプレートであるため、heroku用に少し書き換える必要があります。

Dockerfile

BlazorBlog/Server/Dockerfile
#See https://aka.ms/containerfastmode to understand how Visual Studio uses this Dockerfile to build your images for faster debugging.

FROM mcr.microsoft.com/dotnet/aspnet:5.0 AS base
WORKDIR /app
# -- 開放ポートはherokuが設定するので、ここでは設定しない
#EXPOSE 80
#EXPOSE 443

FROM mcr.microsoft.com/dotnet/sdk:5.0 AS build
WORKDIR /src
COPY ["BlazorBlog/Server/BlazorBlog.Server.csproj", "BlazorBlog/Server/"]
COPY ["BlazorBlog/Client/BlazorBlog.Client.csproj", "BlazorBlog/Client/"]
COPY ["BlazorBlog/Shared/BlazorBlog.Shared.csproj", "BlazorBlog/Shared/"]
RUN dotnet restore "BlazorBlog/Server/BlazorBlog.Server.csproj"
COPY . .
WORKDIR "/src/BlazorBlog/Server"
RUN dotnet build "BlazorBlog.Server.csproj" -c Release -o /app/build

FROM build AS publish
RUN dotnet publish "BlazorBlog.Server.csproj" -c Release -o /app/publish

FROM base AS final
WORKDIR /app
COPY --from=publish /app/publish .
# -- なんかよくわかんないけど、こうするらしい
#ENTRYPOINT ["dotnet", "BlazorBlog.Server.dll"]
CMD ASPNETCORE_URLS=http://*:$PORT dotnet BlazorBlog.Server.dll

このDockerfileをプロジェクトのルートディレクトリ（.slnファイルがある場所）に移動させます。

Herokuへプッシュ

あとはherokuの説明どおりにコンテナをプッシュ＆リリースです。

PS C:\Users\moootoko\source\repos\BlazorBlog> heroku login
heroku: Press any key to open up the browser to login or q to exit:
Opening browser to https://cli-auth.heroku.com/auth/cli/browser/.....
Logging in... done
Logged in as [メールアドレス]
PS C:\Users\moootoko\source\repos\BlazorBlog> docker ps
CONTAINER ID   IMAGE     COMMAND   CREATED   STATUS    PORTS     NAMES
PS C:\Users\moootoko\source\repos\BlazorBlog> heroku container:login
Login Succeeded
PS C:\Users\moootoko\source\repos\BlazorBlog> heroku container:push web -a blazor-blog
=== Building web (C:\Users\moootoko\source\repos\BlazorBlog\Dockerfile)
...
Your image has been successfully pushed. You can now release it with the 'container:release' command.
PS C:\Users\moootoko\source\repos\BlazorBlog> heroku container:release web -a blazor-blog
Releasing images web to blazor-blog... done
PS C:\Users\moootoko\source\repos\BlazorBlog>

できあがったサイトを見に行こう

herokuのOpen appボタンで作ったサイトが開かれます。


　　　👇

問題なく表示することができました。やったー！！

少し動作が重たい気がする

ちょっと通信の様子を見てみましょう。

なんかエラい時間かかってる...？

「Initial Connection」と「Waiting(TTFB)」が時間かかってます。

いろいろ考えることがありそうなので、オマケ回として次の記事にまとめます。

困ったこと

作業中にぶち当たった問題と解決策を記録しておきます。

dockerのコマンドが一切使えなかった

WSL2を有効化してdocker psを実行したところ、次のエラーが出ました。

error during connect: In the default daemon configuration on Windows,
the docker client must be run with elevated privileges to connect.:
Get "http://%2F%2F.%2Fpipe%2Fdocker_engine/v1.24/version":
open //./pipe/docker_engine: The system cannot find the file specified.

Dockerがデーモンとして起動していないため（ブラウザとかみたいに普通のジョブとして動いているため）だそうです。
https://www.fixes.pub/program/465573.html

以下でデーモン化すればOKでした。

PS C:\Program Files\Docker\Docker> .\DockerCli.exe -SwitchDaemon
PS C:\Program Files\Docker\Docker> docker ps
CONTAINER ID   IMAGE     COMMAND   CREATED   STATUS    PORTS     NAMES
PS C:\Program Files\Docker\Docker> docker run hello-world
Unable to find image 'hello-world:latest' locally
latest: Pulling from library/hello-world
2db29710123e: Pull complete
Digest: sha256:393b81f0ea5a98a7335d7ad44be96fe76ca8eb2eaa76950eb8c989ebf2b78ec0
Status: Downloaded newer image for hello-world:latest

Hello from Docker!
This message shows that your installation appears to be working correctly.

To generate this message, Docker took the following steps:
 1. The Docker client contacted the Docker daemon.
 2. The Docker daemon pulled the "hello-world" image from the Docker Hub.
    (amd64)
 3. The Docker daemon created a new container from that image which runs the
    executable that produces the output you are currently reading.
 4. The Docker daemon streamed that output to the Docker client, which sent it
    to your terminal.

To try something more ambitious, you can run an Ubuntu container with:
 $ docker run -it ubuntu bash

Share images, automate workflows, and more with a free Docker ID:
 https://hub.docker.com/

For more examples and ideas, visit:
 https://docs.docker.com/get-started/

PS C:\Program Files\Docker\Docker>

以降は再起動してもデーモンが立ち上がるので、問題なくコマンドを使えました。

herokuにdockerイメージをリリースすると、.NET SDKのエラーが発生する

このサイトを参考にDockerfileを作りました。
https://akasatanahama.com/posts/188/

BlazorBlog/Server/bin/Release/net5.0/publish/Dockerfile
FROM mcr.microsoft.com/dotnet/sdk:5.0 AS base
WORKDIR /app
COPY . .
CMD ASPNETCORE_URLS=http://*:$PORT dotnet BlazorBlog.Serever.dll

するとherokuのログに次のエラーが出ました。

Could not execute because the specified command or file was not found.
Possible reasons for this include:
  * You misspelled a built-in dotnet command.
  * You intended to execute a .NET program, but dotnet-BlazorBlog.Serever.dll does not exist.
  * You intended to run a global tool, but a dotnet-prefixed executable with this name could not be found on the PATH.

原因はよくわからなかったですが、前述のDockerfileに差し替えたところ解消しました。

最後に

ここまで読んでいただきありがとうございました。
無事、BlazorとMicroCMSを使ってブログサイトをつくることができました。
普通ならGatsbyとかGraphQLとか使ってモダンなことをするでしょうし、業務以外で.NETを好む人ってどのくらいいるのでしょうか...
.NET MAUIがリリースされたら、また触ってみようかなと思っています。

そういえば

新しいReactの本が出たらしいです！！！
https://www.amazon.co.jp/dp/481561072X?tag=keiji009-22&linkCode=ogi&th=1&psc=1

私がReactでつまずいたHooksにフォーカスした本も出たらしいです！！！
https://www.amazon.co.jp/dp/486354359X?tag=keiji009-22&linkCode=ogi&th=1&psc=1

これは買うしかねぇな！！！！！！！

Discussion