VSCodeでDocker入門

# 対象
Dockerインストール済み
初めてDockerを使用する。

# 前提
コマンドラインは使える
VSCode インストール済み

# 本記事について
一般的なDockerの学習フローではdockerコマンドを学びつつ、イメージやコンテナの概念について理解し、その後docker-composeへと進んでいくと考える。

本記事ではイメージやコンテナ等の概念の説明は大きく省き、コマンドもvscodeの拡張機能で代用する。それによってdocker-composeのコマンドを最小限学んでさくっと動かすことで実践的にDockerについて理解していく。

# 本記事のゴール
docker-composeコマンドがいくつかつかえるようになる。
nodejsの実行環境が作れる様になる。

# VSCode環境構築

![スクリーンショット 2020-09-14 13.18.11.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113504/0e1c92b2-04e9-d8a2-a4c7-3c575cd8e757.jpeg)

![スクリーンショット 2020-09-13 19.36.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113504/a1241576-8dad-6f06-7eab-2108d1c1e467.png)

これをあらかじめインストールしておく。

# nodejs環境を作る

まずは適当な場所に`nodejssample`というフォルダを作る。この名前は適当。


そしてそのフォルダ直下に以下のように`docker-compose.yml`というファイルを作る。

```docker-compose.yml
version: "3"
services:
    node: 
        image: node:14.10
        volumes: 
            - .:/project
        tty: true
        working_dir: /project
        command: bash
```
この内容については後ほど解説する。

そして、同階層に`app.js`を作成

```app.js
const main = () => {
    console.log("hello node!");
}

main();
```

![スクリーンショット 2020-09-13 19.42.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113504/22c7cd7e-51e2-7159-34ae-9f9cee9f6d54.png)

こうなっていればOK

そうしたら一度Dockerの現在の状態を確認しておく。

VSCode左からDockerマークを選択すると以下のような画面になってると思う。

![スクリーンショット 2020-09-13 19.43.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113504/5ea4398f-1e8f-3ad0-2ace-1c2229527ba3.png)

Dockerが起動していなかったり、すでに何かしらDockerを動かしていたらこの画面にならないかもしれない。

確認できたら、コマンドラインでdocker-compose.ymlのある場所で以下のようにコマンドをうつ。

仮想環境を起動するコマンド

```
docker-compose up -d
```

するとダウンロードが始まって以下のような画面になる

```
nodejssample $ docker-compose up -d
Creating network "nodejssample_default" with the default driver
4f250268ed6a: Pull complete1b49aa113642: Pull complete
c159512f4cc2: Pull complete8439168fd8dc: Pull complete55abbc6cc158: Pull completee5c5821cd889: Pull complete5a7679f70bad: Pull completed827e86d1182: Pull complete2484b06a6da1: Pull complete
Digest: sha256:21658666c0eabc9006b279e826e540d20e2c835507347d9c2f3f7dd5820ec9e3
Status: Downloaded newer image for node:14.10
Creating nodejssample_node_1 ... done
```

そして、Dockerのタブの画面が以下のようになる。
![スクリーンショット 2020-09-13 19.52.05.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113504/ad0cb536-31d6-9187-6662-b54f2df971b1.jpeg)
Dockerで作った仮想環境のことをコンテナと呼ぶ。
イメージはコンテナ作るためのもの。

![スクリーンショット 2020-09-14 14.03.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113504/c16781e4-9912-0661-6338-e8206b616d45.png)


仮想環境が起動できたので、次はその仮想環境でnodejsを動かす。

![スクリーンショット 2020-09-13 19.57.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113504/c7da6d93-efea-98e8-af65-ecdd99870d0e.png)

対象のコンテナを右クリック > Attack Shellを押す。
すると以下の様な画面がでる。

![スクリーンショット 2020-09-13 20.03.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113504/cc933e4b-32c2-df7f-ec73-7085f6ebea69.png)
これがコンテナの中に入った状態。

```
root@df80b994d93d:/project# ls
app.js  docker-compose.yml
root@df80b994d93d:/project#   
```
lsコマンドをうつと中にVSCodeのプロジェクトと同じファイルが表示される。
そして、ここはnodejs環境のコンテナなのでnodejsが使えるかどうか確かめる。

```
root@df80b994d93d:/project# node -v
v14.10.1
```
これが出たらOK

あらかじめ用意しておいた`app.js`を実行する。

```
root@df80b994d93d:/project# node app.js
hello node!
```
実行できた。

## 仮想環境を消す。
仮想環境は放置しておくと重いので、作業が終わったら消す。

![スクリーンショット 2020-09-13 20.49.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113504/e299692c-e0c9-e9a6-9148-abeb6626cf1f.png)

## イメージを消す。
イメージの方は、これがあることによって`docker-compose up -d`が早くなるため、頻繁に使うなら残しておいてもOK.

しばらく使わないなら消す。

![スクリーンショット 2020-09-13 20.50.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113504/2d61fa4b-f778-c204-388a-8754daa1cbaa.png)


これで仮想環境の構築、仮想環境でのプログラムの実行、仮想環境の削除が一通りできた。

# 解説

## docker-compose.ymlについて
docker-composeの基本的な構文は以下

```.yml:docker-composeの構文
version: バージョン番号。
services:
    サービス名:
        サービスの設定...
```

versionは最新版が3
サービス名は自分でつける。なんでもOK。

```docker-compose.yml
version: "3" # 最新版は3
services: # ここは固定
    node: # なんでも良いが、nodeのイメージを使ってるのでそのままnodeというサービス名に。
        image: node:14.10
        volumes: 
            - .:/project
        tty: true
        working_dir: /project
        command: bash
```

サービスの設定は多くあるが、詳しく知るためには公式ドキュメントを読むのが一番良い。

[リファレンス](https://docs.docker.com/compose/compose-file/)

今回使った設定項目について1つずつ解説していく。

[image](https://docs.docker.com/compose/compose-file/#image)
コンテナを作るためのイメージを記載。

```.yml
image: イメージ名:タグ名
```
タグ名はバージョンととらえてOK

Dockerで使うイメージはDocker Hubというサイトにいろいろある。
[nodeイメージ](https://hub.docker.com/_/node)

![スクリーンショット 2020-09-14 0.06.37.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113504/2c6483dc-51dc-ad92-a6ff-d29a75c55912.jpeg)

本記事で使ったタグはこれ

[volumes](https://docs.docker.com/compose/compose-file/#volumes)
ローカルのフォルダとコンテナのフォルダをリンクさせる。

```.yml
        volumes: 
            - ローカルのフォルダのパス:コンテナのフォルダのパス
```

これを設定しておかないと、コンテナから`app.js`等のローカルに配置されたファイルをみることができない。


tty

```
tty: true
```

commandで指定した処理を行なった後すぐコンテナが停止しないようにする。
`Attach Shell`でコンテナに入る時は必須。

working_dir
そのまんまだが、コマンドを実行するときの場所。`Attach Shell`を行ったときもここで指定したフォルダに入る。

command
コンテナ起動時に実行する処理。
今回はbashを指定してるので、ターミナル開いて待っててっていう感じ。


他にもいろんな設定があるので別のDockerの記事をみて知らない項目があったらリファレンスを読むと良いと思う。


## docker-compose up -dについて
[リファレンス](https://docs.docker.jp/compose/reference/up.html)

`docker-compose.yml`を読んで、必要であればイメージをダウンロードしてコンテナを作成するコマンド。

-dはバックグラウンドで起動するためのオプション。