はじめに
業務でBlazor WebAssemblyアプリを開発する機会があり、今回はその時に得た知識をベースに記事を書かせていただきます。
まず、この記事を書き始めた時点ではDocker+dotnetでアプリケーションサーバを構築している情報を調べてみると....
.NET Core 3.1 を使用した情報は日本語文献でも比較的入手しやすいが.NET 6の情報は海外の記事が多く日本語文献は少ない感じがしました。
そのようなこともあり今回はDocker+.NET 6環境でBlazor WebAssemblyアプリを動かす流れをご紹介いたします。
前提条件
.NET 6を選定している理由としては現時点で最新のLTS版ということで選定しております。
Dockerのインストールと起動が完了済み、ローカルマシン上でdotnet コマンドが使える想定です。
ベースとなるプロジェクトの生成
今回、利用するBlazor WebAssemblyアプリ用のプロジェクトを作成しておきます。
コマンドプロンプトを開きプロジェクトを作成するフォルダにカレントディレクトリを移動させます。
そこで下記のコマンドを実行するとプロジェクトに必要なファイル群が生成されます。
今回のプロジェクト名はHelloWorldにしています。
dotnet new blazorwasm --hosted -o HelloWorld
コマンドを実行すると下記のようなフォルダやファイルが出来上がっているはずです。
Dockerfileを用意する
今回作成したDockerfileはこのような記述となっています。
# プロジェクトのビルド環境用イメージとしてバージョン6.0のsdkを指定する
FROM mcr.microsoft.com/dotnet/sdk:6.0 AS build
# ビルド環境側の作業ディレクトリをセット
WORKDIR /app
# ローカル環境からすべてのファイルをビルド環境へコピーする
COPY . ./
# コピーしたプロジェクトをリストアする
RUN dotnet restore
# publishディレクトリを指定して発行することで必要なファイルをまとめる
RUN dotnet publish -c Release -o publish
# アプリの稼働環境用イメージとしてバージョン6.0のaspnetを指定する
FROM mcr.microsoft.com/dotnet/aspnet:6.0
# 稼働環境側の作業ディレクトリをセット
WORKDIR /app
# コンパイル環境のコンテナから発行したアプリのファイル群一式をコピーしてくる
COPY --from=build /app/publish .
# サーバの待ち受けポートを80ポートにセットする
EXPOSE 80
# 起動するアプリをセットする
ENTRYPOINT ["dotnet", "HelloWorld.Server.dll"]
このDockerfileをプロジェクトフォルダに配置します。
Dockerイメージの作成
コマンドプロンプトのカレントディレクトリをプロジェクトフォルダ直下に移動させます。
そこで下記のコマンドを実行しDockerイメージを作成します。
今回はイメージ名をHelloWorldにしております。
docker build -t helloworld .
Dockerイメージの起動
コマンドプロンプトのカレントディレクトリはプロジェクトフォルダ直下のまま下記のコマンドを実行します。
docker run -d -p 80:80 helloworld:latest --rm
コマンドが完了したら、http://localhost/をブラウザで開いてみてください。
次の画像のようなデフォルトのページが表示されるはずです。
次回の記事ではBlazor WebAssemblyアプリでサーバ側のログの取得方法に関してあまり情報を得られなかったので、今回私が実装してみた方法をご紹介いたします。