【Docker超入門】WSL2とDockerを使ってwebサーバ（nginx）を立ち上げよう

# ➊. はじめに
**Docker超初心者**🥚🐣🐤集まれ！

**Docker**って、なんとなく分かってはいるけど、触ったことないので、モヤモヤ………とりあえずwebサーバの立ち上げを**ハンズオン**して簡単に理解していきたいと思います。ちなみに、webサーバは**nginx**(エンジンエックス)を使用したいと思います。

この記事と一緒にwebサーバの立ち上げをハンズオンし終える頃、『**アナタは`Docker超初心者`から`Docker初心者`へ格上げされる**』ことでしょう👏😄⤴

# ➋. やること
**Docker**を簡単に理解しつつ、**win10**に環境を整えていきます。Dockerコマンドを実施する際にPowerSellよりもbash等の方が使いやすいので、[**WSL2**(Windows Subsystem for Linux ver.2)](https://docs.microsoft.com/ja-jp/windows/wsl/about)、**Ubuntu**もインストールしていきます。

具体的には以下5つを実施します。

1. Dockerの簡単な理解
1. Docker desktopのインストール
1. WSL2機能をON
1. Ubuntuのインストール
1. webサーバの立ち上げ (Dockerコマンドをいじる)

<img width=200 src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/7eba12e3-0625-8850-5adc-88c571d0d1ca.png'>

# ➌. お勉強
おさらいも含めてかる～くお勉強。いきなり詰めすぎてもお腹いっぱいになっちゃうので、とりあえず**最小限度のお勉強**です。

## （１）dcokerとは
**dcoker**は、コンテナというパッケージ化したアプリを使用することで、**どこでも誰でも同じ環境が作れたり**、ハイパーバイザを使用せずホストマシンのカーネルを利用することで**軽量で高速**といった特徴があります。
▶この辺りの情報は、おおよその人が耳にしている情報だと思います。再確認。

<img width=800 src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/d642c5e4-186a-dabf-7432-ae7e8d760e86.png'>

## （２）Dockerの基本コマンドとステータス
大まかな流れをこちらで確認しておきます。**結構、ここ重要です**。
「**イメージ**」はファイルで、「**コンテナ**」はプロセスなんだなと簡単に理解をしておきます。

<img width=800 src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/0dd3840c-6e32-a3f4-bfd5-01c9febfd523.png'>

# ➍. 準備
win10の場合、**WSL1→2**(Windows Subsystem for Linux ver.2)と**Ubuntu**を先にインストールしておきます。その後、**Docker desktop**をインストールします。

:::note info
Windows10のみ、(１)～(３)を実行してください。それ以外は、(４)のみを実行してください。
:::

## （１） WSL1とUbuntuのインストール
「**WSL1**」とディストリビューション「**Ubuntu**」を、合わせてインストールしていきます。管理者権限でpowershellを起動し、「`wsl --install -d Ubuntu`」コマンドを実行します。

> wsl --install -d \<Distribution Name>

```powershell:powershell（管理者権限で実行してください）
wsl --install -d Ubuntu
```
参考：[WSL のインストール](https://docs.microsoft.com/ja-jp/windows/wsl/install)

wslのインストールが終わると、「`wsl --list --verbose`」コマンドでディストリビューションのリストを参照できます。
Ubuntuインストール中は、STATEが**Installing**ですが、インストールが終わると**Running**に変わります。

> wsl --list --verbose
> wsl -l -v

```powershell:powershell
wsl --list --verbose
  NAME                   STATE           VERSION
* Ubuntu                 Running         1
```
では、続いてWSLのVersionを1から2へUpdateしていきましょう！

## （２）WSL2 Linuxカーネル更新プログラムをインストール
続いて、Linuxカーネルを更新します。以下から、「**Linux カーネル更新プログラム**」をダウンロードしてください。

> **【ダウンロード】**x64マシン用 WSL2 Linuxカーネル更新プログラム パッケージ
> https://wslstorestorage.blob.core.windows.net/wslblob/wsl_update_x64.msi

カーネル更新プログラムをダウンロード後、実行してください。特に分岐もなく更新が可能です。
<img width=400 src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/7b5ea28d-d65b-0600-17b1-768065067f01.png'>

## （３） WSL1 → WSL2
WSLのバージョンが1の場合は、「`wsl --set-version Ubuntu 2`」コマンドで、バージョン2へ変更します。

> wsl --set-version \<distribution Name> \<version Number>

```powershell:powershell
> wsl --set-version Ubuntu 2
変換中です。この処理には数分かかることがあります...
WSL 2 との主な違いについては、https://aka.ms/wsl2 を参照してください
変換が完了しました。
> 
> wsl --list --verbose
  NAME                   STATE           VERSION
* Ubuntu                 Running         2
```

参考：[配布バージョンをWSL1またはWSL2に設定します](https://docs.microsoft.com/en-us/windows/wsl/install-win10#set-your-distribution-version-to-wsl-1-or-wsl-2)
参考：[WSL 1 と WSL 2 の比較](https://docs.microsoft.com/ja-jp/windows/wsl/compare-versions)

## （４）Docker desktopをインストール
### ■ダウンロード＆インストール
以下から、**Docker desktop**をダウンロードしてください。

<img width=600 src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/309e139b-32a3-5b71-7310-6ff45b384775.png'>

> **【ダウンロード】**Docker desktop
> https://www.docker.com/products/docker-desktop

インストール時のチェックボックスなどは、デフォルトのままインストールしてしまってOKです。win10の場合は、**WSL2用のコンポーネント**もインストールを促されますが、**そのままインストール**します。
<img width=500 src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/d1f9a6fa-abee-c7ea-2cc7-ea47ea39b764.png'>

### ■インストール確認
**Ubuntu**を起動し、「`docker --version`」コマンドを打って、以下のようにコマンドの説明が出れば、インストール完了（成功）です。

```bash:Ubuntu
$ docker --version
Docker version 20.10.8, build 3967b7d
```

# ➎. dcokerでwebサーバ構築
ときは満ちました.........
あなたにはその**チカラ**があります.........

**Ubuntu**を起動して、下記の**dcokerコマンド**を実行していきます。

## （１）nginxイメージのダウンロード
`docker pull`コマンドを使って、**dockerHub**にある**nginx**(webサーバ)の最新版をダウンロードします。
<img width=400 src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/50ebb937-b33b-4728-70bc-e4e954796403.png'>

```bash:bash
$ docker pull nginx:latest
latest: Pulling from library/nginx
f7ec5a41d630: Pull complete
aa1efa14b3bf: Pull complete
b78b95af9b17: Pull complete
c7d6bca2b8dc: Pull complete
cf16cd8e71e0: Pull complete
0241c68333ef: Pull complete
Digest: sha256:75a55d33ecc73c2a242450a9f1cc858499d468f077ea942867e662c247b5e412
Status: Downloaded newer image for nginx:latest
docker.io/library/nginx:latest
```

**※今回pullしたイメージ(nginx)の詳細はこちらです**
https://hub.docker.com/_/nginx?tab=description

## （２）イメージの確認
`docker images`コマンドを使って、イメージの確認をします。

```bash:bash
$ docker images
REPOSITORY   TAG       IMAGE ID       CREATED      SIZE
nginx        latest    62d49f9bab67   2 days ago   133MB
```

## （３）htmlの準備
各自好きなhtmlを用意すれば良いのですが、面倒なので以前作成したhtmlを利用します。下記リンクを右クリックし「`名前をつけてリンク先を保存`」を選択し、「`c:¥Users¥username¥html`」に「`index.html`」を保存してください。

> ゴクリ・カウンター
> https://github.com/PoodleMaster/gokuri_counter/blob/main/index.html

## （４）コンテナの実行
`docker run`コマンドを使って、コンテナを実行します。

```bash:bash
$ docker run --name some-nginx -v /mnt/c/Users/username/html:/usr/share/nginx/html:ro -p 8080:80 -d nginx
88279b1d909945ade6874a663cd21a2e8d855b4202920b29943c6290c991c0ed
```
> **win10**の「`c:¥Users¥username¥html`」は、**Ubuntu**上では「`/mnt/c/Users/username/html`」となります。

> なお、Win10からのファイルのやり取りは、エクスプローラで「`¥¥wsl$`」を開けばWSL(Ubuntuなど)のディレクトリにアクセス可能です。

## （５）ブラウザでアクセス
chromeなどのブラウザから「 http://localhost:8080 」とURL入力し、サイトへアクセスします。
ゴクリ・カウンターが表示されれば成功です！

<img width=400 src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/088a45d7-588f-9428-3a23-d7486dead537.png'>

## （６）コンテナの状況を見てみましょう

`docker ps -a`コマンドを使って、コンテナの状況を確認します。

```bash:bash
$ docker ps -a
CONTAINER ID   IMAGE     COMMAND                  CREATED         STATUS         PORTS                  NAMES
88279b1d9099   nginx     "/docker-entrypoint.…"   8 minutes ago   Up 8 minutes   0.0.0.0:8080->80/tcp   some-nginx
```
`docker run`コマンドを使って起動したコンテナが「`UP(起動中)`」状態となっているのを確認することができました。

## （７）コンテナを停止する

`docker stop`コマンドを使って、コンテナを停止させます。

```bash:bash
$ docker stop some-nginx
some-nginx
```
`docker ps -a`コマンドを使って、コンテナの状況を確認します。

```bash:bash
$ docker ps -a
CONTAINER ID   IMAGE     COMMAND                  CREATED          STATUS                      PORTS     NAMES
88279b1d9099   nginx     "/docker-entrypoint.…"   13 minutes ago   Exited (0) 48 seconds ago             some-nginx
```
`docker stop`コマンドを使ったため、コンテナが「`Exit(停止中)`」状態となっているのを確認することができました。
試しに「 http://localhost:8080 」へアクセスすると、HPは表示されません。
<img width=400 src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/85769fc7-c7c5-7ad6-cd10-a198933d563f.png'>

## （８）コンテナを開始する

`docker start`コマンドを使って、コンテナを再開させます。

```bash:bash
$ docker start some-nginx
some-nginx
```
`docker ps -a`コマンドを使って、コンテナの状況を確認します。

```bash:bash
$ docker ps -a
CONTAINER ID   IMAGE     COMMAND                  CREATED          STATUS         PORTS                  NAMES
88279b1d9099   nginx     "/docker-entrypoint.…"   18 minutes ago   Up 4 seconds   0.0.0.0:8080->80/tcp   some-nginx
```
`docker start`コマンドを使って開始させたコンテナが「`UP(起動中)`」状態となっているのを確認することができました。
試しに「 http://localhost:8080 」へアクセスすると、HPが再度表示されます。
<img width=400 src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/088a45d7-588f-9428-3a23-d7486dead537.png'>

## （９）コンテナを削除する

コンテナは停止中でないと削除できません。まずは`docker stop`コマンドを使って、コンテナを停止させます。

```bash:bash
$ docker stop some-nginx
some-nginx
```
`docker ps -a`コマンドを使って、コンテナの状況を確認します。

```bash:bash
$ docker ps -a
CONTAINER ID   IMAGE     COMMAND                  CREATED          STATUS                      PORTS     NAMES
88279b1d9099   nginx     "/docker-entrypoint.…"   13 minutes ago   Exited (0) 48 seconds ago             some-nginx
```

続いては`docker rm`コマンドを使って、コンテナを削除します。

```bash:bash
$ docker rm some-nginx
some-nginx
```
`docker ps -a`コマンドを使って、コンテナの状況を確認します。

```bash:bash
$ docker ps -a
CONTAINER ID   IMAGE     COMMAND   CREATED   STATUS    PORTS     NAMES
```
`docker rm`コマンドで、コンテナが削除されたことを確認することができました。

## （10）イメージを削除する

`docker rmi`コマンドを使って、イメージを削除します。
※注意：イメージは、参照するコンテナがあると削除できません。コンテナを停止させ、参照するコンテナも削除する必要があります。

```
$ docker rmi nginx:latest
Untagged: nginx:latest
Untagged: nginx@sha256:75a55d33ecc73c2a242450a9f1cc858499d468f077ea942867e662c247b5e412
Deleted: sha256:62d49f9bab67f7c70ac3395855bf01389eb3175b374e621f6f191bf31b54cd5b
Deleted: sha256:3444fb58dc9e8338f6da71c1040e8ff532f25fab497312f95dcee0f756788a84
Deleted: sha256:f85cfdc7ca97d8856cd4fa916053084e2e31c7e53ed169577cef5cb1b8169ccb
Deleted: sha256:704bf100d7f16255a2bc92e925f7007eef0bd3947af4b860a38aaffc3f992eae
Deleted: sha256:d5955c2e658d1432abb023d7d6d1128b0aa12481b976de7cbde4c7a31310f29b
Deleted: sha256:11126fda59f7f4bf9bf08b9d24c9ea45a1194f3d61ae2a96af744c97eae71cbf
Deleted: sha256:7e718b9c0c8c2e6420fe9c4d1d551088e314fe923dce4b2caf75891d82fb227d
```
`docker images`コマンドを使って、イメージの状況を確認します。

```bash:bash
$ docker images
REPOSITORY   TAG       IMAGE ID   CREATED   SIZE
```
`docker rmi`コマンドで、イメージが削除されたことを確認することができました。


# ➏. 参考：Docker基本コマンド一覧
コマンドの仕様詳細は「 [Docker-docs-ja](https://docs.docker.jp/index.html)」を参照しください。

|コマンド|説明|仕様詳細|
|:-:|:-|:-|
|docker pull|dockerHubからイメージを取得|https://docs.docker.jp/engine/reference/commandline/pull.html|
|docker images|イメージの一覧表示|https://docs.docker.jp/engine/reference/commandline/images.html|
|docker run|コンテナ起動|https://docs.docker.jp/engine/reference/run.html|
|docker ps|コンテナの一覧表示|https://docs.docker.jp/engine/reference/commandline/ps.html)|
|docker create|コンテナ作成|https://docs.docker.jp/engine/reference/commandline/create.html|
|docker stop|コンテナ停止|https://docs.docker.jp/engine/reference/commandline/stop.html|
|docker rm|コンテナ削除|https://docs.docker.jp/engine/reference/commandline/rm.html|
|docker rmi|イメージ削除|https://docs.docker.jp/engine/reference/commandline/rmi.html|

# ➐. 以上
**dcoker**を利用して、簡単にwebサーバを立ち上げることができました。これら一連の作業を行うことで、dockerの基本的なコマンド、ステータス等を学ぶことができました。次は、コンテナを管理ができる**Kubernetes**(クバネティス)辺りを調べられたらと思っています。

> ■Kubernetes
> Kubernetesについては、[「【Kubernetes】クバァ～...？という人のためのハンズオン【超初心者入門】」](https://qiita.com/PoodleMaster/items/9fd00de31f037acb7b76)の記事をご参照ください。

> ■WSL2(Ubuntu)
> 「**WSL2**の**UBUNTU**」をいぢりまくって、もしも**グチャグチャ**になってしまったら、「[グチャグチャになった「UBUNTU on WSL2」のやり直し方](https://qiita.com/PoodleMaster/items/b54db3608c4d343d27c4)」の記事をご参照ください。

お疲れ様でした😊！