DevContainer(Visual Studio Code Dev Containers)を使ってみた。

Dockerの勉強を始めて最初にやってみたかったのが、Dockerで開発環境を作るというもの。

# 環境
VirtualBox6.1
ホストOS: Windows10 Home 20H2
ゲストOS: Ubuntu20.04 ＋ Docker20.10.22 ＋ Visual Studio Code1.74.2

~~※職場でもとりあえず無料で試してみたいため、Docker for Desktopを利用しない縛りのためこの環境です。
※Docker for Desktopを利用できる環境なら、VirtualBox不要です。
Windows10 ＋ WSL2 ＋ Docker for Desktopでお試しください。~~

【入門】VSCodeでDocker環境構築
https://qiita.com/tsuyotobi26/items/9d48fa676f4d55170b5e
によりますと
>Docker Desktopを使わない場合、WSLでDockerを起動させることが条件となるが、
VSCodeのDefaultの設定ではDevContainersをWSLで実行することが有効になっていないらしい。
Settingsを立ち上げwslと検索し、□Dev>Containers:Execite in WSLにチェックを入れることで解消できる。

とのこと！！！

# Visual Studioの準備
拡張機能をインストール
・Visual Studio Code Dev Containers
・Docker for Visual Studio Code
・Japanese Language Pack for VS Code（任意）

![VSCode_DevContainers01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2611568/d56a9859-0cf0-cbf6-cf49-44da5e194c8b.png)

# Dev Containersであらかじめ用意してあるひな形を利用してコンテナを作ってみる
1. 左下の緑色のところからリモートウインドーを開く
![VSCode_DevContainers02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2611568/09b8f89e-0c68-c324-0382-08f948331d25.png)

2. Create Dev Container
![VSCode_DevContainers03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2611568/ae7810a0-d0c9-546a-c120-a188854644dd.png)

3. Show All Definitions
![VSCode_DevContainers04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2611568/1bcb4ac7-dff8-accc-cc50-532640a75fef.png)

4. 適当なのを選ぶ
![VSCode_DevContainers05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2611568/c332dcb5-3d99-2f73-6ec9-474c44160771.png)

5. Additional Options
![VSCode_DevContainers06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2611568/af2cfb3a-70dc-9327-67a6-91e7728949b2.png)

6. 適当なのを選ぶ
![VSCode_DevContainers07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2611568/14d6b7a9-fde7-e9e7-51b5-882ab9eec7b7.png)

7. 適当なのを選んでOK
![VSCode_DevContainers08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2611568/a5955d26-dc22-49a7-4384-0da1629c4c9b.png)

8. 信用するのかの確認
![VSCode_DevContainers09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2611568/7a646187-b3b2-28a6-4243-47654a7c1866.png)

9. 作成が始まって右下に表示が出る。show logをクリックすると
![VSCode_DevContainers10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2611568/f27baf7f-752e-00f0-e8a7-6f144278d219.png)

10. 作成している様子のログを確認することができる。初回はいろいろ元となるDockerイメージをダウンロードするので時間がかかる。
![VSCode_DevContainers11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2611568/6b9d5e5b-1278-35d2-b577-717bc23193e2.png)

11. 作成が終わったら自動起動されます。
VS Codeの中で（？）、コンテナの中のVS Codeが起動している状態です。
（左下に緑色でDevContainer:Python3と表示が出ているので確認できます。）
拡張機能を選んでみると、選んだものに応じた拡張機能があらかじめインストールされています。
![VSCode_DevContainers12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2611568/ae39e402-1372-1826-3dbf-0ea2bac7d15c.png)

# コンテナの終了
コンテナを終了するには、ファイルメニューから「リモート接続を閉じる」を選びます。

# 作成されたコンテナとイメージの確認
VS Code で クジラマーク（拡張機能のDocker）をクリック。
![VSCode_DevContainers13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2611568/d2312f0a-a7a2-7214-e778-aa95cfddfd03.png)

# 作成したコンテナをカスタマイズ
将来的には、コンテナをカスタマイズできるようになりたいのですが、ひとまず、今日はここまで！