WindowsコンテナDojoトレース②

現在IBM 大西彰さんがシリーズで「WindowsコンテナDojo」を開催してくれております。
この記事ではその内容を自身の Windows 環境にてトレースしていきます。

今回は、2022/4/28 に開催された[WindowsコンテナDojo：第1回 Visual StudioでWindowsコンテナアプリ作成](https://ibm-developer.connpass.com/event/245493/)のトレースです。
主旨:「Windowsアプリ開発の定番開発環境であるVisual StudioとDocker Desktop for Windowsを使って、テンプレートからアプリをビルドし、Windowsコンテナ対応のアプリ開発とデバッグの基礎を学びます。」
上記リンクにWebinar資料、Webinar動画、コンテナ化推進に関するIBMの取組みご紹介等のドキュメントも添付されています。

環境については以下を参照。
「仮想マシンの実⾏環境は、Hyper-V以外の環境(Oracle VM VirtualBox, VMware Workstationなど)を
すでにお持ちの場合は、そちらをお使いください。
準備編(前編に続き本編も同様)では、Windows PC上に全ての環境を整えることを想定しています。
Mac OS上にWindows 10/11、Windows Server 2019を揃えて環境を整えられますが、
ホストするデバイスの空きリソース (CPUコア、メモリ、SSDの空き状況)にご注意ください。」
また、WindowsコンテナのホストOSとして以下が対象となるようです。
・Windows Server 2016
・Windows Server 2019
・Windows Server 2022
・Windows 10
・Windows 11

ちなみに私は Windows10 (Intel Core i9-10900K を積んだ2年前の自作PC) を使って参加します。

### ０．今回の大まかな流れ
1. Docker Desktop for Windows による Windows コンテナモードへの切り替え
1. テンプレートによる ASP.NET アプリ開発
1. Dockerfile について
1. Docker 上で動作するアプリのデバッグ

### １．Docker Desktop for Windows による Windows コンテナモードへの切り替え
画面右下のクジラアイコンを右クリックし、コンテナモードを Windows Container モードへスイッチ
![000.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682574/758038a1-f1a1-ad20-7674-79c62f1393f4.png)

![030.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682574/6a33d207-cf74-c2a6-d68e-9f752f78e106.png)

※逆に Windows Container モードから Linux Container モードへ戻る時もクジラアイコンを右クリックしコンテナモードを Linux Container モードへスイッチ
![040.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682574/95a49046-e336-691d-4f86-6adb0adc8f3c.png)

### ２. テンプレートによる ASP.NET アプリ開発
[基礎編](https://qiita.com/trtrbohz/items/4e9f81bf01c4d8855f1a)にてインストールした Visual Studio 2022 を起動し、「新しいプロジェクトの作成」をクリック。
![009.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682574/d672fb51-5320-2406-3a0e-96260cee4980.png)

次に表示されるダイアログの上部入力欄に「asp.net」を記載するとasp.net プロジェクトのテンプレートが表示されるので「ASP.NET Web アプリケーション(.NET Framework)」を選択し、「次へ」をクリック。
![051.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682574/054446e0-61a1-0608-4efc-35f4daa3666c.png)

次に表示されるダイアログで、プロジェクト名や保存場所等を入力し「作成(C)」をクリック。
![052.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682574/934fabff-fc0f-d880-0e4a-903c86b80a31.png)

次に表示されるダイアログで、先に選択したテンプレートを使ってどんなアプリケーションを作成するのか指定します。
あと、画面左で「Web Forms」を選択し画面右にある詳細設定で「Docker のサポート」にチェックを入れ「作成」をクリック。
※「HTTPS用の構成」チェックを外す。
![061.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682574/8bf37d81-9c7f-4cb0-f494-07cc91fad375.png)

そうするとプロジェクトが作成され、以下のような画面が表示されます。
この時、「出力」ウィンドウでは「出力元：コンテナーツール」となっており、「コンテナーが正常に開始されました。」と表示されます。
![070.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682574/8652a758-970a-aa69-08f8-1af10107dd39.png)

ここで、画面の上部に表示されているアイコンからデバッグを開始してください。
[F5]キー押も可。
![081.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682574/9681f63c-4848-72d3-4cbd-cb7a48c85d43.png)
※アプリビルドが開始されない場合は、「ビルド」-「ソリューションのリビルド」を選択し、再度デバッグを開始してください。
[F5]キー押も可
![091.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682574/364c34d4-4d15-80ce-edcb-adb3af2835b9.png)

ビルドが正常終了し、デバッグを開始すると以下のように Web アプリが起動します。
![016.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682574/21f95612-5ed8-8720-6d64-0ce934996096.png)

### ３．Dockerfile について
Visual Studio のソリューションエクスプローラ内にある 「Dockerfile」 をクリックしてファイルの内容を確認します。
![101.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682574/1ab02b11-83ac-1d40-9de9-3d5f8304367b.png)

Dockerファイルの中身は以下のようになっています。
![110.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682574/28c9e8c7-0167-f3e5-ce91-42570011853e.png)

意味は以下です。(大西さんの資料抜粋)
![120.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682574/ca4a7527-ffe6-9597-56b7-02d5b6db8787.png)


### ４． Docker 上で動作するアプリのデバッグ
Visual Studio のソリューションエクスプローラ内から [Contact.aspx]-[Contact.aspx.cs] をクリックしてファイル内容を表示します。
![131.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682574/219cd675-c96a-7dfd-441f-2c2c0f895027.png)

13行目にカーソルを合わせ、[F9]をクリックするとソースコードの左に赤丸が付きます。
ここで、先程と同じようにデバッグを開始すると先ほどと同じようなWeb画面が起動しますので、表示された画面上部にある「問い合わせ」をクリック。
![141.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682574/99d4cd76-286b-0a14-b010-3226e6f2097f.png)

すると、以下のようにブレークポイントで実行が停止します。
![021.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682574/712ca580-0910-2caf-afa5-40c13edb6e3c.png)

あとは、そこからステップ実行(F10:ステップオーバー、F11:ステップイン)することが可能です。
以上で Visual Studio 上でWindowsコンテナアプリを作成できるようになります。

参照：Speaker Deck資料 [WinWindowsコンテナDojo : 第1回 Visual StudioでWindowsコンテナアプリ作成](https://speakerdeck.com/oniak3ibm/wcpp-dojo01-webapp-builddebug)