【入門】VSCodeでDocker環境構築

# Docker環境構築の動機
業務でディープラーニング開発に携わるようになり、なんとなく使っていたがあまり理解しないまま時間がたってしまったため、正月休みを活用して、一から学び直してようと思う。

# 本記事の対象
1. Dockerをこれから使ってみようと思う人
2. 環境構築でつまづいた人

# 実行環境/前提条件
(実行環境)
- OS：Windows10
- VSCode：1.74.2
- Docker：v1.23.3
- WSL：Ubuntu-20.04

(前提条件)
あらかじめ、以下のインストールが完了していること
- VSCode
- WSL2(※)
※Docker Desktopを使わないようにするために必要(ライセンスが有料化されたため)

# 【概要】
## Dockerとは
仮想環境の1種で、仮想環境にはハイパーバイザ型とコンテナ型の2種類があり、Dockerはコンテナ型にあたる。
- ハイパーバイザー型：
        - KVMやHyper-Vなどの仮想化技術でホストOS上で環境ごとにゲストOSを立ち上げる必要があり、容量が大きく、遅い
- コンテナ型：
        -Dockerのような仮想化技術はホストOS上でゲストOSを立ち上げることなく、ホストマシンのカーネルを使って、あたかも別のマシンが動いているかのようにどうさせることができ、軽量で、高速
![VM_Container-680x387.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3089467/d4dfeb85-24b2-4e98-3c76-1cc77c38efca.jpeg)

詳細は以下の記事を参照。
https://knowledge.sakura.ad.jp/13265/

## Dockerを使うことのうれしさ
- OSレベルでパッケージ化するので、環境に依存せず動かせる
- 環境構築をDockerfileというコード化されたファイルにすること(Infrastrucre as a Code)でメンテナンスが楽

# 【環境構築】
## 1. Dockerのインストール
VSCodeを立ち上げ、拡張機能から"docker"を検索し、Installを行う
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3089467/ce109415-5bf5-dd1a-edf8-8e8597611110.png)

## 2. DockerHubアカウントの登録
https://hub.docker.com/

* アカウント情報の入力
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3089467/de1eb017-cfa9-296a-afc1-1fd3d0c14525.png)
* メール認証
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3089467/d426ebc7-eb9c-04f8-acf2-73d7e36a28d8.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3089467/ffab401b-0155-5e74-e48f-bc3c41a2f121.png)

## 3. VSCode上でDockerHubのログイン
メニューバーからクジラマークを押して、Connect Repogitoryを押す
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3089467/3cbf98c4-5713-00da-73d6-493da19fc44a.png)
DockerIDの入力画面がVSCodeの上部に現れるので入力する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3089467/38adbd0a-e99c-db1d-fb4a-ad51bf6e1f24.png)
同様にpwを入力し、Enterを押す
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3089467/7085c23d-dc3a-7ddc-46b9-da3be2cffccc.png)
無事ログインが完了すると、先ほどのDocker Hubは以下に自身のアカウントが表示される
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3089467/e216053d-b0f3-39f7-8037-e8d493ba63b6.png)

もしくはVSCodeのターミナルでWSLを起動し、```docker login```コマンドでログインすることも可能

## 4. Dockerコンテナの起動
```docker run [imageName:tag]```でdockerイメージの取得とコンテナの作成を行う。
ここでは、例として、ubuntu:18.04のイメージを指定。
```docker run```ではローカルにイメージがない場合[DockerHub](https://hub.docker.com/)から自動でイメージの取得を行ってくれる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3089467/99c19663-1a19-e426-6356-b8fd9aa9460b.png)

なお、tagでバージョンを指定しない場合は、最新のバージョンが取得される。
DockerHub内でイメージの検索を行いうことで、ポートされているタグを確認することができる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3089467/807aa3a8-76cf-cac8-732e-50436d3cf526.png)

```docker ps -a```でコンテナの状態を確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3089467/feafe420-02bd-5eb5-e4a0-45d66ece73ec.png)
```docker run -it [imageName:tag]```でコンテナを起動
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3089467/d1cce5c5-f8a0-b7e7-3477-97d8b584d8df.png)

コンテナ内部に入ると、こんな感じ。ここではubuntuのコマンドが使えるようになる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3089467/b2235633-4db3-5d2d-a149-57d55f769f6b.png)

コンテナから抜ける場合は```Ctl+D```または```exit```を実行。

# 【devcontainerを使ったコンテナ起動】
## 1. Dev Containersのインストール
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3089467/33f2e5b4-bddf-5103-d0a6-a1910e11d810.png)

## 2. 環境構築ファイルの作成
フォルダ構成は以下の通り。
devcontainer.jsonとDockerfileで環境構築の設定を記述する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3089467/77d20f16-f6ab-6046-01e0-5ba3aa66e0b3.png)

■devcontainer.json
- "name":コンテナ名
- "dockerFile":Dockerfileの相対パス
- "extentions":リモートコンテナで使用する拡張機能
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3089467/31279b5e-9d4e-10bc-c83c-e76b05edafaa.png)
■Dockerfile
- FROM: ベースイメージの設定(例によってDockerHubから選択)
- WORKDIR:作業ディレクトリの指定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3089467/7447aa6f-81b6-f13b-f455-6b4ab82189ae.png)

## 3. Dev Containerの起動
VSCodeの左下にある><ボタンを押下
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3089467/dc4a5e8f-a652-020b-9eb2-b424041af27f.png)
画面上部に以下の内容が表示されるため、```Reopen in Container```を選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3089467/ca96984e-0bdb-020f-7cd9-6125a390d344.png)
ウィンドウが切り替わり、コンテナの起動が完了すると、以下のようにウィンドウ左下が切り替わる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3089467/8b1bd0f5-2c37-4380-e653-c95c347c4124.png)
あとは.ipynbを作成すればOK。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3089467/0d2a5ec1-8afb-ee49-bfed-3446c7cad0ed.png)

# はまったポイント
## Reopen in Containerで"Docker version 17.12.0 or later required"が発生
VSCodeにDevConatinerをインストールし、devcontainer.jsonとDockerfileを作成したのに、
Reopen in Containerを実行すると以下のエラーが発生。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3089467/4fe94b2b-452a-4434-60ff-f3875d112903.png)
調べてみると、Docker Desktopを使わない場合、WSLでDockerを起動させることが条件となるが、
VSCodeのDefaultの設定ではDevContainersをWSLで実行することが有効になっていないらしい。
Settingsを立ち上げ```wsl```と検索し、```□Dev>Containers:Execite in WSL```にチェックを入れることで解消できる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3089467/c93b31c0-55f3-1702-9506-920c45447dd8.png)

# 参考リンク
- vscode + devcontainerについて:https://qiita.com/sho-hata/items/02ad47f67bce6816a69a
- Dockerについて：https://www.udemy.com/share/1050ZC/