LoginSignup
5
4
@studio_meowtoonin株式会社船井総合研究所

Docker 環境で C# ASP.NET Core Blazor Webアプリを起動する (WebAssembly)

Last updated at Posted at 2023-03-27

Docker 環境で C# ASP.NET Core Blazor Webアプリを起動する (WebAssembly)

こんにちは、@studio_meowtoon です。今回は、WSL Ubuntu 22.04 の Docker 環境で C# ASP.NET Core Blazor Web アプリケーションをコンテナとして起動する方法を紹介します。
blazor_on_docker.png

目的

Windows 11 の Linux でクラウド開発します。

こちらから記事の一覧がご覧いただけます。

実現すること

ローカル環境の Ubuntu の Docker 環境で、Dockerfile からビルドした C# ASP.NET Core Blazor Web アプリのカスタムコンテナを起動します。

技術トピック

Dockerfile とは？

こちらを展開してご覧いただけます。

Dockerfile リファレンス

Dockerfile は、Docker イメージをビルドするためのファイルであり、Docker コンテナの構成情報を記述するためのテキストファイルです。Dockerfile には、ベースイメージ、パッケージのインストール、環境変数の設定、ファイルのコピーなどの命令が含まれます。

また、Docker コンテナに使用するベースイメージとして、Ubuntu を選択することが一般的です。そのため、Ubuntu の知識があると Dockerfile を理解しやすくなります。

開発環境

  • Windows 11 Home 22H2 を使用しています。

WSL の Ubuntu を操作していきますので macOS の方も参考にして頂けます。

WSL (Microsoft Store アプリ版) ※ こちらの関連記事からインストール方法をご確認いただけます

> wsl --version
WSL バージョン: 1.0.3.0
カーネル バージョン: 5.15.79.1
WSLg バージョン: 1.0.47

Ubuntu ※ こちらの関連記事からインストール方法をご確認いただけます

$ lsb_release -a
No LSB modules are available.
Distributor ID: Ubuntu
Description:    Ubuntu 22.04.1 LTS
Release:        22.04

.NET SDK ※ こちらの関連記事からインストール方法をご確認いただけます

$ dotnet --list-sdks
7.0.202 [/usr/share/dotnet/sdk]
$ dotnet --version
7.0.202

Docker ※ こちらの関連記事からインストール方法をご確認いただけます

$ docker --version
Docker version 23.0.1, build a5ee5b1

この記事では基本的に Ubuntu のターミナルで操作を行います。Vim を使用してコピペする方法を初めて学ぶ人のために、以下の記事で手順を紹介しています。ぜひ挑戦してみてください。

作成する Web アプリケーションの仕様

No エンドポイント HTTPメソッド MIME タイプ
1 / GET text/html

Hello World を表示する手順

C# ASP.NET Core Blazor Web アプリの作成

こちらの関連記事で手順がご確認いただけます。

ここまでの手順で、ローカル環境の Ubuntu でアプリの DLL ファイルを起動することができました。

プロジェクトフォルダに移動

プロジェクトフォルダに移動します。
※ ~/tmp/BlazorApp をプロジェクトフォルダとします。

$ cd ~/tmp/BlazorApp

ライブラリの削除

静的ビルドのために、 Microsoft.AspNetCore.Components.WebAssembly.DevServer を削除します。

$ dotnet remove package Microsoft.AspNetCore.Components.WebAssembly.DevServer

アプリのビルド

プロジェクトの成果物を一旦削除します。

$ rm -rf bin obj out

アプリケーションをビルドして出力します。
※ out/wwwroot/_framework/BlazorApp.dll が作成されます。

$ dotnet publish -c Release -o out

ここまでの手順で、ローカル環境の Ubuntu に DLL ファイル形式のアプリをビルドすることができました。

コンテナイメージの作成

WebAssembly として静的ビルドした Web アプリをホストするため、Web サーバーとして Nginx を使用します。

nginx.conf を作成します。

$ vim nginx.conf

ファイルの内容

nginx.conf
events { }
http {
    include mime.types;
    server {
        listen 80;
        location / {
            root /usr/share/nginx/html;
            try_files $uri $uri/ /index.html = 404;
        }
    }
}

Dockerfile を作成します。

$ vim Dockerfile

ファイルの内容

Dockerfile
# from the base image of a nginx on alpine linux.
FROM nginx:alpine

# create a work dir.
WORKDIR /usr/share/nginx/html

# copy a wasm app.
COPY /out/wwwroot .

# copy an nginx conf.
COPY nginx.conf /etc/nginx/nginx.conf

Docker デーモンを起動します。

$ sudo service docker start
 * Starting Docker: docker    [ OK ]

Docker 環境をお持ちでない場合は、以下の関連記事から Docker Engine のインストール手順をご確認いただけます。

コンテナイメージをビルドします。

$ docker build --no-cache -t app-hello-blazor-wasm .

コンテナイメージを確認します。

$ docker images | grep app-hello-blazor-wasm
REPOSITORY              TAG       IMAGE ID       CREATED          SIZE
app-hello-blazor-wasm   latest    fa24acc86d22   9 seconds ago    55.9MB

ここまでの手順で、ローカル環境の Docker にアプリのカスタムコンテナイメージをビルドすることができました。

コンテナを起動

ローカルでコンテナを起動します。

$ docker run --rm \
    --name app-local \
    -p 8080:80 app-hello-blazor-wasm

ここまでの手順で、ローカル環境の Docker でアプリのカスタムコンテナを起動することができました。

コンテナの動作確認

Web ブラウザで以下の URL にアクセスします。

http://localhost:8080/

image.png

Web ブラウザに Hello World!" と表示されました。

コンテナの状態を確認してみます。

$ docker ps
CONTAINER ID   IMAGE                   COMMAND                   CREATED         STATUS         PORTS                                   NAMES
6af2bd419965   app-hello-blazor-wasm   "/docker-entrypoint.…"   5 minutes ago   Up 5 minutes   0.0.0.0:8080->80/tcp, :::8080->80/tcp   app-local

コンテナに接続

別ターミナルからコンテナに接続します。
※ コンテナを停止するときは ctrl + C を押します。

$ docker exec -it app-local sh

コンテナに接続後にディレクトリを確認します。
※ コンテナから出るときは ctrl + D を押します。

# pwd
/usr/share/nginx/html
# ls -lah
total 32K
drwxr-xr-x    1 root     root        4.0K Mar 27 05:08 .
drwxr-xr-x    1 root     root        4.0K Feb 11 10:03 ..
-rw-r--r--    1 root     root         497 Dec 13 18:23 50x.html
drwxr-xr-x    2 root     root       12.0K Mar 27 05:08 _framework
-rw-r--r--    1 root     root         248 Mar 27 04:21 index.html
_framework ディレクトリの中身を確認します。 
# cd _framework
# apk add tree
# tree
.
├── BlazorApp.dll
├── BlazorApp.dll.br
├── BlazorApp.dll.gz
├── BlazorApp.pdb.gz
├── Microsoft.AspNetCore.Components.Web.dll
├── Microsoft.AspNetCore.Components.Web.dll.br
├── Microsoft.AspNetCore.Components.Web.dll.gz
├── Microsoft.AspNetCore.Components.WebAssembly.dll
├── Microsoft.AspNetCore.Components.WebAssembly.dll.br
├── Microsoft.AspNetCore.Components.WebAssembly.dll.gz
├── Microsoft.AspNetCore.Components.dll
├── Microsoft.AspNetCore.Components.dll.br
├── Microsoft.AspNetCore.Components.dll.gz
├── Microsoft.Extensions.Configuration.Abstractions.dll
├── Microsoft.Extensions.Configuration.Abstractions.dll.br
├── Microsoft.Extensions.Configuration.Abstractions.dll.gz
├── Microsoft.Extensions.Configuration.Json.dll
├── Microsoft.Extensions.Configuration.Json.dll.br
├── Microsoft.Extensions.Configuration.Json.dll.gz
├── Microsoft.Extensions.Configuration.dll
├── Microsoft.Extensions.Configuration.dll.br
├── Microsoft.Extensions.Configuration.dll.gz
├── Microsoft.Extensions.DependencyInjection.Abstractions.dll
├── Microsoft.Extensions.DependencyInjection.Abstractions.dll.br
├── Microsoft.Extensions.DependencyInjection.Abstractions.dll.gz
├── Microsoft.Extensions.DependencyInjection.dll
├── Microsoft.Extensions.DependencyInjection.dll.br
├── Microsoft.Extensions.DependencyInjection.dll.gz
├── Microsoft.Extensions.Logging.Abstractions.dll
├── Microsoft.Extensions.Logging.Abstractions.dll.br
├── Microsoft.Extensions.Logging.Abstractions.dll.gz
├── Microsoft.Extensions.Logging.dll
├── Microsoft.Extensions.Logging.dll.br
├── Microsoft.Extensions.Logging.dll.gz
├── Microsoft.Extensions.Options.dll
├── Microsoft.Extensions.Options.dll.br
├── Microsoft.Extensions.Options.dll.gz
├── Microsoft.Extensions.Primitives.dll
├── Microsoft.Extensions.Primitives.dll.br
├── Microsoft.Extensions.Primitives.dll.gz
├── Microsoft.JSInterop.WebAssembly.dll
├── Microsoft.JSInterop.WebAssembly.dll.br
├── Microsoft.JSInterop.WebAssembly.dll.gz
├── Microsoft.JSInterop.dll
├── Microsoft.JSInterop.dll.br
├── Microsoft.JSInterop.dll.gz
├── System.Collections.Concurrent.dll
├── System.Collections.Concurrent.dll.br
├── System.Collections.Concurrent.dll.gz
├── System.Collections.dll
├── System.Collections.dll.br
├── System.Collections.dll.gz
├── System.ComponentModel.dll
├── System.ComponentModel.dll.br
├── System.ComponentModel.dll.gz
├── System.Linq.dll
├── System.Linq.dll.br
├── System.Linq.dll.gz
├── System.Memory.dll
├── System.Memory.dll.br
├── System.Memory.dll.gz
├── System.Net.Http.dll
├── System.Net.Http.dll.br
├── System.Net.Http.dll.gz
├── System.Net.Primitives.dll
├── System.Net.Primitives.dll.br
├── System.Net.Primitives.dll.gz
├── System.Private.CoreLib.dll
├── System.Private.CoreLib.dll.br
├── System.Private.CoreLib.dll.gz
├── System.Private.Uri.dll
├── System.Private.Uri.dll.br
├── System.Private.Uri.dll.gz
├── System.Runtime.InteropServices.JavaScript.dll
├── System.Runtime.InteropServices.JavaScript.dll.br
├── System.Runtime.InteropServices.JavaScript.dll.gz
├── System.Runtime.dll
├── System.Runtime.dll.br
├── System.Runtime.dll.gz
├── System.Text.Encodings.Web.dll
├── System.Text.Encodings.Web.dll.br
├── System.Text.Encodings.Web.dll.gz
├── System.Text.Json.dll
├── System.Text.Json.dll.br
├── System.Text.Json.dll.gz
├── blazor.boot.json
├── blazor.boot.json.br
├── blazor.boot.json.gz
├── blazor.webassembly.js
├── blazor.webassembly.js.br
├── blazor.webassembly.js.gz
├── dotnet.7.0.4.11onvycki2.js
├── dotnet.7.0.4.11onvycki2.js.br
├── dotnet.7.0.4.11onvycki2.js.gz
├── dotnet.timezones.blat
├── dotnet.timezones.blat.br
├── dotnet.timezones.blat.gz
├── dotnet.wasm
├── dotnet.wasm.br
├── dotnet.wasm.gz
├── icudt.dat
├── icudt.dat.br
├── icudt.dat.gz
├── icudt_CJK.dat
├── icudt_CJK.dat.br
├── icudt_CJK.dat.gz
├── icudt_EFIGS.dat
├── icudt_EFIGS.dat.br
├── icudt_EFIGS.dat.gz
├── icudt_no_CJK.dat
├── icudt_no_CJK.dat.br
└── icudt_no_CJK.dat.gz

top コマンドで状況を確認します。

# top
Mem: 6738496K used, 1210924K free, 134652K shrd, 149600K buff, 5228784K cached
CPU:   0% usr   0% sys   0% nic  99% idle   0% io   0% irq   0% sirq
Load average: 0.00 0.02 0.03 1/410 37
  PID  PPID USER     STAT   VSZ %VSZ CPU %CPU COMMAND
   30     1 nginx    S     7816   0%   2   0% nginx: worker process
    1     0 root     S     7576   0%   7   0% nginx: master process nginx -g daemon off;
   31     0 root     S     1692   0%   4   0% sh
   37    31 root     R     1620   0%  10   0% top

コンテナの情報を表示してみます。

# cat /etc/*-release
3.17.2
NAME="Alpine Linux"
ID=alpine
VERSION_ID=3.17.2
PRETTY_NAME="Alpine Linux v3.17"
HOME_URL="https://alpinelinux.org/"
BUG_REPORT_URL="https://gitlab.alpinelinux.org/alpine/aports/-/issues"

このコンテナは Alpine Linux をベースに作成されています。つまり、Alpine Linux と同じように扱うことができます。

まとめ

WSL Ubuntu の Docker 環境で、Dockerfile からビルドした C# ASP.NET Core Blazor Web アプリのカスタムコンテナを起動することができました。

クラウド開発においては、Dockerfile の理解は重要です。自動ビルドツールもありますが、手動で書く必要があるケースもあります。Ubuntu を使うと Linux の知識も身に付きます。最初は難しく感じるかもしれませんが、徐々に進めていけば自信を持って書けるようになります。

どうでしたか？ WSL Ubuntu で、C# ASP.NET Core Blazor Web アプリケーションを Docker 環境でコンテナとして手軽に起動することができます。ぜひお試しください。今後も .NET の開発環境などを紹介していきますので、ぜひお楽しみにしてください。

推奨コンテンツ

5
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
5
4