WindowsにVSCodeのRemote Containerで開発環境構築【準備編】

「VSCode 開発環境」とかで検索するとめちゃくちゃ出てくる内容だとは思うんですが、備忘録として残しておこうと思います。
画像を入れつつ書いたらそれなりなボリュームになってしまったので、準備編と実践編で分けています。

https://qiita.com/tks-hsmt/items/d87b44bde8a2821b8f4a

# Remote Containerとは？
VSCodeの拡張機能で、Dockerコンテナを開発環境として利用できます。
VSCodeの拡張機能や設定も行うことが出来るため、チーム開発を行う際にとても便利な機能です。
[Developing inside a Container](https://code.visualstudio.com/docs/remote/containers)

# 必要なもの

* Docker Desktop
* WSL(Ubuntu)
* Windowsターミナル(任意)
* VSCode
* Git

※PCに何もインストールされていない状態からの手順を記載しているので、既に完了している部分は適宜読み飛ばしてください。

## Docker Desktop
### インストーラのダウンロード

[Docker Desktop for Mac and Windows | Docker](https://www.docker.com/products/docker-desktop)
「Download for Windows」をクリックし、インストーラ(Docker Desktop Installer.exe)をダウンロード。
※2021/11/14時点では4.2.0

### インストール
Docker Desktop Installer.exeをダブルクリックするとインストールが開始します。
![docker-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2281509/7c2ee1c0-236e-0ebb-fa4f-b4f5c012b7f2.png)
どちらもチェックをつけたまま「OK」をクリック。
![docker-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2281509/c221ede9-27f5-8b7f-366e-62b5bde3f5aa.png)
インストールが完了したら「Close」をクリック。
デスクトップのショートカットをクリックしてDocker Desktopを起動。
![docker-3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2281509/8cc75261-e1eb-22ea-2fc4-0d3403ed06d7.png)
「I accept the terms」にチェックをつけて「Accept」をクリック。
![docker-4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2281509/2923ad47-7c84-ca5b-2ed0-bb6982eff3f2.png)
↑の画面が表示されれば起動成功。

### 「WSL 2 installation is incomplete.」ダイアログが出た場合
![error.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2281509/8ee60d98-5800-d8c5-7c5f-d7547d95042f.png)
[https://aka.ms/wsl2kernel](https://aka.ms/wsl2kernel)にアクセスして、「x64 マシン用 WSL2 Linux カーネル更新プログラム パッケージ」をクリックしてパッケージをダウンロードし、インストールしてください。
インストール完了後にDockerを再起動すれば、正常に起動できます。

## WSL(Ubuntu)
Docker Desktopをインストールする際にdocker-desktopとdocker-desktop-dataというディストリビューションもついてきます。
これがあればRemote Containerを動かすことはできるのですが、dockerを動かすためのものなので、
開発環境用にUbuntuのインストールを行います。

### インストール
PowerShellを起動して、以下のコマンドを入力します

```
PS C:\Users\(ユーザ名)> wsl --install -d Ubuntu
ダウンロード中: Ubuntu
インストール中: Ubuntu
Ubuntu はインストールされました。
Ubuntu を起動しています...
```
### Ubuntuの設定
インストールが完了すると自動でUbuntuが起動します。ユーザ名とパスワードの入力が求められるので入力します。

```
Installing, this may take a few minutes...
Please create a default UNIX user account. The username does not need to match your Windows username.
For more information visit: https://aka.ms/wslusers
Enter new UNIX username: (ユーザ名)
New password:
Retype new password:
passwd: password updated successfully
Installation successful!
To run a command as administrator (user "root"), use "sudo <command>".
See "man sudo_root" for details.
(省略)
```
Ubuntuで以下のコマンドを入力してパッケージの更新を行います。
途中ディスクに〇〇MB追加されるよ？と聞かれるので「Y」を入力。

```
sudo apt update && sudo apt upgrade
Get:1 http://security.ubuntu.com/ubuntu focal-security InRelease [114 kB]
Get:2 http://security.ubuntu.com/ubuntu focal-security/main amd64 Packages [987 kB]
(省略)
After this operation, 209 MB of additional disk space will be used.
Do you want to continue? [Y/n] Y
(省略)
done.
```
### WSLディストリビューションの変更
PowerShellでWSLディストリビューションの変更をします。

```
PS C:\Users\(ユーザ名)> wsl -s Ubuntu
PS C:\Users\(ユーザ名)> wsl -l -v
  NAME                   STATE           VERSION
* Ubuntu                 Running         2
  docker-desktop         Running         2
  docker-desktop-data    Running         2
```

### Dockerの設定
アイコンメニューからDockerアイコンを右クリックして「Settings」をクリック。
![docker-5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2281509/cef69130-5f99-0f86-1b4e-03530f0d8f88.png)

Resources->WSL INTEGRATIONを選択し、UbuntuのトグルをONにした後「Apply＆Restart」をクリック。
![docker-6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2281509/62d01acb-71d7-f189-6b72-f367903f7688.png)


## Windowsターミナル
Ubuntu起動して操作してもよいのですが、何かと使い勝手が良いのでWindowsターミナルを入れておきます。

### インストール
[ここから](https://www.microsoft.com/ja-jp/p/windows-terminal/9n0dx20hk701?rtc=1&activetab=pivot:overviewtab) インストールします。
※途中Microsoftアカウントのログインを求められますが、ログインしていなくてもインストールできます。

### 設定
Windowsターミナルを起動し、設定を開きます。
![windows-terminal.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2281509/a6da4f9c-12ab-6438-b3a0-a40bbbc845bf.png)
スタートアップの既定のプロファイルを「Ubuntu」に変更します。
![windows-terminal-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2281509/8331b04d-4cd7-60f7-ab5a-33dda8603042.png)
Ubuntuのコマンドラインに「wsl.exe -d Ubuntu bash」開始ディレクトリに「//wsl$/Ubuntu/home/(Ubuntuのユーザ名)」を入力し、「保存」をクリック。
![windows-terminal-3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2281509/88f989c7-5c78-3440-ecc0-3c8e2951cc8c.png)
これで次回Windowsターミナルを開いた際はUbuntuのユーザホームで開きます。

:::note warn
ソースファイルをWindowsのCドライブ配下に置くと、WSLから見ると「/mnt/c/」配下となります。
この「/mnt/c/」配下のファイルはWindowsのファイルシステムからWSLのファイルシステムに変換かける処理が発生する為、処理がとても重くなります。
Windowsターミナルを入れなくてもよいですが、ソース管理や実行はUbuntuの「/mnt/c/」以外の場所で行うようにしてください。
:::

## VSCode
### インストーラのダウンロード
[ここから](https://code.visualstudio.com/download) インストーラ(VSCodeUserSetup-x64-(バージョン).exe)をダウンロードします。
※11/14時点で1.62.2

### インストール
インストーラをクリックしてインストールします。
特に詰まる部分はないと思うので割愛します。

### 拡張機能
最低以下の拡張機能は入れておきましょう。
#### Japanese Language Pack
https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ja

#### Remote Development
今回入れたいRemote ContainerとUbuntuから「code (ソースフォルダ)」でVSCodeを起動できるWSL-Remoteが入ってます。

https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack


## Git
### インストーラのダウンロード
[ここから](https://gitforwindows.org/) インストーラ(Git-(バージョン)-64-bit.exe)をダウンロードします。
※11/14時点で2.33.1

### インストール
インストーラをクリックしてインストールします。
特に詰まる部分はないと思うので割愛します。

### 初期設定
Windowsターミナルを起動して、以下のコマンドを入力します。
(名前)は任意のユーザー名、(メールアドレス)は任意のメールアドレスに置き換えてください。

```
git config --global user.name "(名前)"
git config --global user.email "(メールアドレス)"
git config --global credential.helper "/mnt/c/Program\ Files/Git/mingw64/libexec/git-core/git-credential-manager-core.exe"
```


これで準備は完了です。