Docker で Blazor を試すまでの道のり

はじめに

2019/3時点での話なのと現在 Blazor は開発段階なので、すぐに別のやり方になる可能性があるのでご注意ください。後は動作優先で書いているので、セキュリティ系は後でしっかり考えて設定してねということで。

環境

Docker for Windows (なんだけど、Linux/MacOS 上の Docker でもいいはず。Visual Studio 使わないので)

※Visual Studio 2019 Preview と .NET Core SDK 3.0 プレビューを、Windows にインストールしたくなかったため。

作業手順

以下のサイトに行き、好きな構成のリンクを決める
Docker Hub

Docker版の.NETCore3を使いたいため、例えば以下のubuntu版のDockerfileをダウンロード、もしくはコピペ
dotnet-docker/Dockerfile at master · dotnet/dotnet-docker · GitHub

Dockerfile を配置したフォルダに移動して、PowerShell なりで実行（※最後のドットを忘れない。開きたいフォルダは、エクスプローラーのツリーを選択して、Shift キー＋右クリックで、"PowerShell ウィンドウをここに開く" が出る。便利だね）

PS C:\～> docker build -t netcore3preview3 .

うちの Docker はなぜか最初以下のように失敗します。この場合、タスクアイコンなどから Docker サービスを再起動させてからもう一度トライします。

Sending build context to Docker daemon  3.072kB
Step 1/6 : FROM buildpack-deps:bionic-scm
Get https://registry-1.docker.io/v2/: net/http: request canceled while waiting for connection (Client.Timeout exceeded while awaiting headers)

イメージが作成できたか確認（別にやらなくてもいい）

PS C:\～> docker image ls

コンテナの生成と実行（生成後、自動的にコンテナ内OSに入る。それぞれのポート番号は好きなやつで）

PS C:\～> docker run -it -p 5000:5000 --name aspnetcore3 netcore3preview3

最新に更新と各コマンドをインストール

root@xxx:/# apt-get update && apt-get upgrade -y
root@xxx:/# apt-get install -y tree vim

.NETCore3 のバージョン確認

root@xxx:/# dotnet --version
3.0.100-preview3-010431

Blazor が無いことの確認（サブコマンドの説明を表示。しなくてもいい）

root@xxx:/# dotnet new

2019/3時点での、以下を参考に進めます。
Blazor を概要します。 | Microsoft Docs

Blazor テンプレートをインストール

root@xxx:/# dotnet new -i Microsoft.AspNetCore.Blazor.Templates::0.9.0-preview3-19154-02

Blazor プロジェクトの作成と実行

root@xxx:～# cd home/
root@xxx:～# dotnet new blazor -o WebApplication1
root@xxx:～# cd WebApplication1
root@xxx:～# dotnet run

ここで、microsoft のサイト上だとうまくビルドと実行がされるらしいのだが、私の環境だとずらずらとエラーが表示されました。切り分けのためビルドだけしてみます。

root@xxx:～# dotnet build

Microsoft (R) Build Engine version 16.0.443+g5775d0d6bb for .NET Core
Copyright (C) Microsoft Corporation. All rights reserved.

  Persisting no-op dg to /home/WebApplication1/obj/WebApplication1.csproj.nuget.dgspec.json
  Restore completed in 12.15 ms for /home/WebApplication1/WebApplication1.csproj.
  Restore completed in 39.23 ms for /home/WebApplication1/WebApplication1.csproj.
/usr/share/dotnet/sdk/3.0.100-preview3-010431/Sdks/Microsoft.NET.Sdk/targets/Microsoft.NET.RuntimeIdentifierInference.targets(151,5): message NETSDK1057: You are using a preview version of .NET Core. See: https://aka.ms/dotnet-core-preview [/home/WebApplication1/WebApplication1.csproj]
  WebApplication1 -> /home/WebApplication1/bin/Debug/netstandard2.0/WebApplication1.dll
  It was not possible to find any compatible framework version
  The specified framework 'Microsoft.NETCore.App', version '2.0.0' was not found.
    - Check application dependencies and target a framework version installed at:
        /usr/share/dotnet/
    - The .NET Core Runtime and SDK can be installed from:
        https://aka.ms/dotnet-download
    - The following versions are installed:
        3.0.0-preview3-27503-5 at [/usr/share/dotnet/shared/Microsoft.NETCore.App]
    - Installing .NET Core prerequisites might help resolve this problem:
        https://go.microsoft.com/fwlink/?linkid=2063370

めんどかったので関連するところをまるまるくっつけました。どうやら、.NETCore2.0.0 が見つからないんだけど！と言っているみたい。3.0.0-preview3-27503-5 は見つかったんだけどね～、とも言っている。.NETCore3 のコンテナなのでそりゃ入ってないわけなのだが、なぜ.NETCore2系を要求してくるのか？

"blazor The specified framework 'Microsoft.NETCore.App', version '2.0.0' was not found." でググったところ、[Blazor 0.9.0] The specified framework 'Microsoft.NETCore.App', version '2.0.0' was not found. · Issue #8440 · aspnet/AspNetCore · GitHub が引っ掛かりました。読んでいく中で、

※引用＆和訳

ILリンカは現在.NET Core 2.xを実行する必要があるため、Blazorアプリをビルドするときにこのエラーが表示されることがあります。この問題を回避するには、.NET Core 2.2をインストールするか、プロジェクトファイルでfalseプロパティを設定してILリンクを無効にします。

とのことらしいです。

解決方法は３つあるみたいです。

プロジェクトファイルに、そっちは見ないでね設定を書く
要求通りに .NETCore2 をインストールする
.NETCore3 をもとにシンボリックリンクを作成して、.NETCore2 があるように見せかける

この記事を書く際、実は最初に遭遇したコンテナを削除して、本記事用に再度コンテナを作成しているのですが、最初は.NETCore2.2をインストールしました。証明書やらなんやらをインストールしてから.NETCore2.2 をインストールすることでビルドが通ることを確認しました。本記事用のコンテナではプロジェクトファイルを編集しているのですが、こちらでもうまくビルドが通ることを確認しました。

プロジェクトファイルの編集（以下の１行を追記）

root@xxx:～# vi WebApplication1.csproj

<PropertyGroup>
  <BlazorLinkOnBuild>false</BlazorLinkOnBuild>
</PropertyGroup>

Blazor を実行する

root@xxx:～# dotnet run
Hosting environment: Production
Content root path: /home/WebApplication1
Now listening on: http://[::]:80
Application started. Press Ctrl+C to shut down.

Windows の Google Chrome から、http の localhost:5000 にアクセスしてみたら"このページは動作していません"と出て見えませんでした。そういえば、外部マシンからでもアクセスできるように url の設定が必要だったことを思い出しました。最初は UseUrls() を使おうとしたのですが、メンバーではないと言われてしまったので、json ファイル版で設定することにしました。

Properties フォルダを作成して、その中にlaunchSettings.jsonを作成して編集する ※現在WebApplication1フォルダにいるものとする

root@xxx:～# mkdir Properties
root@xxx:～# cd Properties
root@xxx:～# touch launchSettings.json
root@xxx:～# vi launchSettings.json

{
  "profiles": {
    "WebApplication1": {
      "commandName": "Project",
      "launchBrowser": false,
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      },
      "applicationUrl": "http://*:5000/"
    }
  }
}

再度実行

root@xxx:～# cd ../
root@xxx:～# dotnet run

Windows の Google Chrome から、localhost:5000 にアクセスして表示されたらOK！

.NET のアセンブリがロードされているのか確認

このページが表示されている状態で、デベロッパーツールを表示、Network タブが表示されていることを確認して、F5 キーを押します。すると各dll がロードされていることが確認できると思います。

f:id:sutefu7:20190325145616p:plain

やった！

sutefu7.com

Docker で Blazor を試すまでの道のり

はじめに

目次

環境

作業手順

.NET のアセンブリがロードされているのか確認