DockerとVisual Studio CodeでASP.NET Core 5を体験しよう

# はじめに
　.NET 5 が公開されましたが、LTSがついていないしインストールするのはどうしようかなぁと思っている方、DockerとVisual Studio Codeがあれば試せますよ。
　今回はVisualStudio Codeの[Remote Development](https://marketplace.visualstudio.com/items?itemName=ms-VisualStudio Code-remote.VisualStudio Code-remote-extensionpack)拡張を利用して、Dockerで起動した.NET5のコンテナに接続してプログラムを実行・デバックできるか確認してみます。

# テストアプリのビルドと実行
　まずは、テストアプリのコンテナを立ち上げ、ASP.NET Core MVCプロジェクトを作成して動作確認をしていきます。

### .NET5 SDKイメージの起動
　Docker 内部に作成したファイルをホストOS側に保存しておくために、ボリュームマウント用のディレクトリを作り.NET 5のSDKイメージを起動します。また、ASP.NET Core MVCプロジェクトは標準でhttpが5000番ポートで、httpsが5001番ポートで提供されるのでそれぞれのポートマッピングをしておきます。

```
mkdir src
docker run -it -p 5000:5000 -p 5001:5001 -v c:¥src:/src mcr.microsoft.com/dotnet/sdk:5.0
```

### ASP.NET Core MVCプロジェクトの作成と実行
コンテナに接続できたら、先ほどマウントした/srcディレクトリに移動して、新しいMVCプロジェクトを作成します。

```
cd /src
mkdir WebSite1
cd WebSite1/
dotnet new mvc
```

```
The template "ASP.NET Core Web App (Model-View-Controller)" was created successfully.
This template contains technologies from parties other than Microsoft, see https://aka.ms/aspnetcore/5.0-third-party-notices for details.

Processing post-creation actions...
Running 'dotnet restore' on /src/WebSite1/WebSite1.csproj...
  Determining projects to restore...
  Restored /src/WebSite1/WebSite1.csproj (in 67 ms).
Restore succeeded.
```
　`dotnet run`でプログラムを実行すると、次のようなエラ〜メッセージが表示され`localhost:5000`がIPV6でバインドできないよ、と言われてしまいます。

```
root@cc0ff91bfc60:/src/WebSite1# dotnet run                          
Building...
warn: Microsoft.AspNetCore.DataProtection.Repositories.FileSystemXmlRepository[60]
      Storing keys in a directory '/root/.aspnet/DataProtection-Keys' that may not be persisted outside of the container. Protected data will be unavailable when container is destroyed.
warn: Microsoft.AspNetCore.Server.Kestrel[0]
      Unable to bind to https://localhost:5001 on the IPv6 loopback interface: 'Cannot assign requested address'.
warn: Microsoft.AspNetCore.Server.Kestrel[0]
      Unable to bind to http://localhost:5000 on the IPv6 loopback interface: 'Cannot assign requested address'.
```
　--urls パラメーターで `http://0.0.0.0:5000`もしくはワイルドカードを使って`http://*:5000`を指定して実行すると無事起動できます。

```
root@cc0ff91bfc60:/src/WebSite1# dotnet run --urls http://*:5000
Building...
warn: Microsoft.AspNetCore.DataProtection.Repositories.FileSystemXmlRepository[60]
      Storing keys in a directory '/root/.aspnet/DataProtection-Keys' that may not be persisted outside of the container. Protected data will be unavailable when container is destroyed.
info: Microsoft.Hosting.Lifetime[0]
      Now listening on: http://0.0.0.0:5000
info: Microsoft.Hosting.Lifetime[0]
      Application started. Press Ctrl+C to shut down.
info: Microsoft.Hosting.Lifetime[0]
      Hosting environment: Development
info: Microsoft.Hosting.Lifetime[0]
      Content root path: /src/WebSite1
```

　Webブラウザーでアクセスすると、表示できることが確認できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36535/fe3e3a8e-e1ae-bff2-8e6e-4b57dae1a7b8.png)
# ホストPCのVisualStudio Codeで確認

　前項で作成したDocker内のインスタンスにVisualStudio Codeで接続し、作成したプロジェクトの内容を確認してデバック機能が利用できるかを確認していきます。

### VisualStudio Codeの拡張機能のインストール
　VisualStudio Code の [Remote Development](https://marketplace.visualstudio.com/items?itemName=ms-VisualStudio Code-remote.VisualStudio Code-remote-extensionpack)拡張をインストールします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36535/4a5a575e-9d91-5dd9-9e4c-c59f5b8aff5c.png)
### コンテナへのアタッチ
　コマンドパレットから`Remote-Containers: Attach to Running Container...`を実行して稼働中のコンテナに接続することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36535/366bc292-6c0a-b6f0-aa9a-1d36f93a10e9.png)
　VisualStudio Codeで`/src/WebSite1`ディレクトリを開くと、コンテナ内のプロジェクトが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36535/9858aec4-388b-1695-f338-d8bca32a86a5.png)

### デバックの実行
　コマンドパレットから`.NET: Generate Assets for Build and Debug`を実行してデバックに必要なファイル（lanunch.jsonとtasks.json）をプロジェクトに追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36535/86338956-380e-a4e2-0939-4633424d98bf.png)
　デバック用のファイルを追加後に`F5`もしくは`Ctrl+Shift+D`でデバックを開始すると、ビルド後にWebサイトが起動しデバック用のWebブラウザーが起動します。その後はローカルで開発している時と同じようにVisualStudio Codeのデバック機能を利用して開発することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36535/99dab47c-8ebb-6a31-1410-a7eab62bf050.png)
　Index.cshtmlで環境変数を表示してあげると、コンテナ側の.NETが動作していることがわかります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36535/855aa912-0755-57e7-bae3-1a6b22581d25.png)

# まとめ

なんとなく開発環境にはまだ入れたくないなぁと思っている方、結構簡単に試せるのでやってみてください。

# 参考
- [C# を触ってみたいけど自分の環境に .NET の SDK 入れるの何か嫌だという人向けハローワールド](https://qiita.com/okazuki/items/51a27573fcb90b1188a2)
- [Docker 上でお手軽にC#9（.NET 5）を試す](https://qiita.com/Nossa/items/e7a2a380c24c0c92192c)