Visual Studio 2019 による Linux コンテナー ベースの ASP.NET Core Web アプリ開発環境の構築

# はじめに

Windows 10 May 2020 Update (version 2004) では、WSL 2(Windows Subsystem for Linux 2) がサポートされ、Linux システム コールの完全互換が実現されました。
この WSL 2 によるシステム コールの完全互換の最大のメリットの一つとして、WSL 上で Docker が動作するようになったということがあります。 
ここでは、この WSL 2 を利用し、Visual Studio 2019 を使った Linux コンテナー ベースの ASP.NET Core Web アプリ開発環境の構築手順を説明します。

# WSL 2 のインストール

Windows の機能の "Linux 用 Windows サブシステム" 及び "仮想マシン プラットフォーム" を有効化します。
慣れ親しんだ [Windows の機能の有効化または無効化] の UI から有効化もできますが、今回は、dism.exe で有効化します。
実行するコンソールは、管理者権限で起動してください。

```dosbatch:cmd

>dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart
>dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart
```
ここで、Windows を再起動します。

次に、Linux カーネルを更新します。
以下から、Linux kernel update package をダウンロードしてインストールします。

- [Linux kernel update package for x64](https://wslstorestorage.blob.core.windows.net/wslblob/wsl_update_x64.msi "Linux kernel update package for x64")

Surface Pro X 等で ARM 版 Windows を利用の場合は、ARM64 向けの Linux kernel update package をダウンロードしてインストールください。

- [Linux kernel update package for ARM64](https://wslstorestorage.blob.core.windows.net/wslblob/wsl_update_arm64.msi "Linux kernel update package for ARM64")

次に、WSL のデフォルト バージョンを WSL 2 にしておきます。

```dosbatch:cmd

>wsl --set-default-version 2
```
ここまでくれば、後は、好みの Linux ディストリビューションを入れるだけです。

Microsoft Store を起動します。
[検索] ボックスに "linux" と入れて、検索すると、各ディストリビューションが表示されます。
ここでは、"Ubuntu" を選択します。
[入手] もしくは、[インストール] を選択し、Ubuntu をインストールします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172205/7b7b9ac9-6f8c-b894-2b91-8f8e9813af7a.png)

インストールが完了後、[スタートメニュー] に [Ubuntu] が登録されるので、選択し、起動します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172205/0eb40d46-7377-5cf0-0eb6-85e344e35e00.png)
ユーザー名、パスワードが求められるので、任意のユーザー名、パスワードを入力して、"Ubuntu" のセットアップを完了してください。


# Docker Desktop のインストール
以下から、Docker Desktop for Windows をダウンロードしてインストーラーを起動します。
[Docker Desktop](https://www.docker.com/products/docker-desktop "Docker Desktop")
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172205/a9e6cd80-eb83-068b-c40f-b862abe4fd2d.png)
[OK] で、インストールを開始します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172205/66ad80fa-6aec-df02-8ade-54f1247df119.png)
[Close and log out] を選択すると、Windows からサインアウトされます。
サインインすると、Docker Desktop for Windows が起動します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172205/64ca12f8-8678-5215-707f-79dc27d2e197.png)
はじめて Docker Desktop for Windows を使う場合は、[Start] で、チュートリアルを確認するといいと思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172205/76fd9ad4-155d-a1cd-20e4-a8fb22c8b5dd.png)

[Settings(上部歯車アイコン)] - [General] で、[Use the WSL 2 based engine] にチェックが入っていると、WSL 2 ベースのエンジンが利用されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172205/91d4b395-939e-11f2-ad92-0a6c7694755e.png)

また、[Settings(上部歯車アイコン)] - [Resources] - [WSL INTEGRATION] から、統合したい WSL Linux のディストリビューションを指定することもできます。 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172205/59bd27d4-a6ab-7ca4-b510-4a26cbec72e8.png)

# ASP.NET Core Web アプリケーションの作成
Visual Studio 2019 を起動し、[新しいプロジェクトの作成] - [ASP.NET Core Web アプリ] を選択し、[次へ] を選択します。
[プロジェクト名] に任意の名前を設定し、[作成] を選択します。
(\*) ここで、[Docker サポートを有効にする] チェック ボックスをオンすると、プロジェクト テンプレート生成時点で Docker がサポートが有効になりますが、ここでは、既存プロジェクトへの有効化方法を知るためにも、**チェックをしない**方法で手順を進めます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172205/8bbdb913-b793-3428-222d-6127947c9324.png)

プロジェクト テンプレート生成後、[ソリューション エクスプローラー] から、[<ソリューション名>] - [<プロジェクト名>] - [Pages] - [Index.cshtml] を選択し、以下のように RuntimeInformation.OSDescription プロパティを表示するように編集します。

```html:Index.cshtml

@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <h2>@System.Runtime.InteropServices.RuntimeInformation.OSDescription</h2>
    <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>
```

プロジェクトを実行し、表示を確認すると、"Microsoft Windows 10.0.19043" で動作していることが分かります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172205/b48da8d7-6843-eae5-7eee-eb12f120df5f.png)

# Docker サポートの有効化

次に、プロジェクトの実行を停止し、プロジェクトの右クリック メニューの [追加] - [Docker サポート] を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172205/8073349b-6680-f5ff-6f25-0a091144cd48.png)

[Docker ファイルのオプション] が表示されるので、今回は、WSL 2 ベースの Docker を使用したいので "Linux" を選択し、[OK] を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172205/0b783366-9ade-8421-efc5-9621c69a80d3.png)

プロジェクトに [Dockerfile] が追加され、ここに定義されているイメージのダウンロードが自動で実行されます。
また、Visual Studio のデバッグ プロファイルに "Docker" が追加され、ここから、コンテナーでアプリをデバッグ実行できます。
[出力] に [コンテナー ツール] が追加され、コンテナーに関する出力が確認できるようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172205/de915441-aeda-50b7-eb1d-de680c4db292.png)

WSL 側のターミナルで、イメージの一覧を確認すると、プロジェクトに追加された Dockerfile に定義されたイメージが登録されていることが確認できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172205/9e7617f2-25d5-6d78-ef93-1894107ba972.png)

Visual Studio で、プロジェクトを実行し、表示を確認すると、"Linux 5.4.72-microsoft-standard-WSL2" (=WSL 2 のカーネル) で動作していることが分かります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172205/45aadb4c-8d52-1916-4635-af1eae2f92dd.png)

また、Visual Studio 側を確認すると、[コンテナー] ツールが起動しています。
[コンテナー] ツールでは、環境変数や、開いているポート、ログやファイルシステムを UI で参照できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172205/b2dca39d-e4e2-4023-ac0a-16e16d12947c.png)

# まとめ
Visual Studio 2019 + WSL 2 で、容易に Linux コンテナー ベースのアプリ開発ができます。
また、Visual Studio 2019 では、アプリ実行時の状態を確認できる [コンテナー] ツールがサポートされました。[コンテナー] ツールにより、コンテナーの状態を視覚的に参照でき、意図した設定となっているかを容易に確認できると考えています。

# 参考サイト

- [WSL新版でLinuxをさらに使いやすく、Windows 10 May 2020 Update](https://xtech.nikkei.com/atcl/nxt/column/18/01290/052000005/)
- [Windows Subsystem for Linux Installation Guide for Windows 10](https://docs.microsoft.com/en-us/windows/wsl/install-win10)
- [How to view and diagnose containers and images in Visual Studio](https://docs.microsoft.com/en-us/visualstudio/containers/view-and-diagnose-containers?view=vs-2019)
- [Visual Studio 2017 による ASP.NET Core アプリの Docker コンテナーの利用](https://qiita.com/hiromasa-masuda/items/e1a58ad8dce0ea68bb91)