Windows10でDocker Desktopを使用し、Webサーバの仕組みを学ぶ

# はじめに
社会人になってLinuxとKubernetesを勉強しているうちに、Webサーバの構成がどのようになっているかということが少しずつ分かってきたので、アウトプットがてら初めて記事を書いてみます。
内容としては初心者向けで、DockerDesktopでnginxイメージを使用してコンテナを作り、中身をいろいろ調べてみるというものになっています。

# 環境
- Windows 10 バージョン 20H2
- PowerShell 5.1
- Docker Desktop 4.3.2
- WSL2

# 目次
<!-- タイトルとアンカー名を編集 -->
1. [Docker Desktopのインストール](#docker-desktopのインストール)
1. [Webサーバの作成](#webサーバの作成)
1. [Webサーバにログイン](#webサーバにログイン)
1. [おまけ](#おまけ)

<!-- 各チャプター -->
<a id="#Chapter1"></a>
# Docker Desktopのインストール

Docker Desktopをインストール済みの方は飛ばしてください。

[Docker Desktopの公式サイト](https://www.docker.com/products/docker-desktop)から`Download For Windows`をクリック。
ダウンロードが完了したら`Docker Desktop Installer.exe`を実行し、出てきた画面はチェックをそのままにしてOKを選択。

<img alt="Qiita1.png" width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2442317/ff66deab-fbcb-b9c7-a4d4-4c2883a21f94.png">

Installation succeededと出てきたらCloseをクリックし、Docker Desktopを実行。

その次に出てくる画面は一見お金がかかるのかな？という感じに見えるが、個人利用する分には無料で使えるのでチェックを付けてAcceptをクリック。

<img alt="Qiita2.png" width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2442317/553bc21e-20d1-e142-a459-4c6eeaf4f2e1.png">

WSLを使ったことがない場合は以下のような画面が出ますが、URLをクリックしてその先のページで更新プログラムをダウンロードし、実行してNextを押して完了します。

<img alt="Qiita4.jpg" width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2442317/49a1fa45-8971-e530-4269-db6ea714a37d.jpeg">

以上の手順で完了です。起動にやたら時間がかかったりエラーが起きた場合は、インジケーターから鯨のアイコンを右クリック→`Restart Docker`で上手く行ったりします。

<img alt="Qiita3.png" width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2442317/09ca01cd-a17a-e08b-ad39-79510d1667aa.png">

この画面(左下の鯨が緑)になっていればOK。

<img alt="Qiita5.png" width="700" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2442317/be44209e-81a4-8214-7197-e2b62b3d7f60.png">


<a id="#Webサーバの作成"></a>
# Webサーバの作成
PowerShellを開き、`wsl -l -v`を実行して確かめてみる。

<img alt="Qiita6.png" width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2442317/a1265492-c903-6bbe-6504-dbfed4b8f2c5.png">

Ubuntuは自分が入れているだけなので関係ないです。見てみるとWSL上にDocker Desktopっぽいものが2つ動いているのが確認できます。

あと`docker version`も実行してみる。

<img alt="Qiita7.png" width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2442317/7cd24bc9-cb20-7c66-8e34-003385e5f1f3.png">

何書いてあるかはよくわからないが、色々バージョンが表示されていればコマンドが使えるということなのでOK。

ここから実際にDockerを使用してWebサーバを立てていきます。使用するイメージはnginxです。

`docker run -name nginx -d -p 8080:80 nginx`で実行。
オプションについては[Docker コマンドチートシート](https://qiita.com/wMETAw/items/34ba5c980e2a38e548db)に詳しくまとめられていました。
`-d`でバックグラウンド実行、`-p a:b`で自分のPC(localhost)のa番ポートへのアクセスをコンテナのb番ポートに飛ばすという意味です。

Firewallの警告が出た場合は、Docker Desktopからであることを確認できたらアクセスを許可します。

<img alt="Qiita8.png" width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2442317/7cab8e58-19c0-fb11-4d04-7bab7f6c8cc4.png">


`docker ps`を実行し、稼働中のコンテナ一覧にnginxがあることを確認。

<img alt="Qiita9.png" width="800" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2442317/8a01ef31-223c-0489-75f3-269b53a89653.png">

確認出来たら、Webブラウザを開き`http://localhost:8080`にアクセス。(8080はさっき指定した数字)

<img alt="Qiita10.png" width="700" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2442317/3652b90f-6967-dc78-26e5-b3185a7b4a07.png">

よくわからんWebページが表示された。8081番とか8082番とか別の数字にすると接続できないことも試すことができる。

自分が初めて触ったときはこの画面が表示されて「だから何？」と思ってしまったが、せっかくなのでもう少し触ってみます。

<a id="#Chapter3"></a>
# Webサーバにログイン
ここまでだと、よくわからないコマンドを打ってよくわからないページが表示されただけになってしまうので、最後にWebサーバにログインして中身をいろいろ見てみます。

`docker ps`でコンテナが実行中であることとcontainerID(一番左の文字列)を確認し、`docker exec -it containerID /bin/bash`を実行。containerIDは最初の4文字くらい打てば認識してくれます。

<img alt="Qiita11.png" width="800" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2442317/1e791da1-2cda-b88e-fc6a-fb4aed190e43.png">

オプションの`-it`と`/bin/bash`はコンテナにログインするときによくセットで出てくるコマンド。`/bin/sh`でも大丈夫ですが、`/bin/bash`のほうが自分はやりやすいのでこっちでやります。

`root@~:/#`みたいになっていたら成功、ここがさっきのWebページを表示しているサーバになっています。

`pwd`と`whoami`と`ls`を実行。`pwd`は自分のいるディレクトリ、`whoami`は自分のユーザ名、`ls`でカレントディレクトリ以下のファイルとディレクトリを確認してみます。

<img alt="Qiita12.png" width="1000" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2442317/92cb48ec-d0e6-a68d-48c2-053d8968bb99.png">

上の画像から、自分のいるディレクトリが`/`(一番上)、ユーザ名は`root`、`/`の下に色々なファイルやディレクトリがあることが分かる。

それより、気になるのはさっきのWebページの中身がどこにあるのかということ。nginxのトップページは、デフォルトで`index.html`という名前になっています。

`find / -name 'index.html'`で実行。

<img alt="Qiita13.png" width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2442317/623109e3-7bcd-281b-09db-73df4304b7fc.png">

`/usr/share/nginx/html`以下に`index.html`というファイルがあった。その下の`Permission denied`についてはディレクトリのパーミッション等を調べましたがなぜ出ているのかよくわからなかったです。解決したら別の記事に書こうかなと思います。

`cd /usr/share/nginx/html/`と`ls`を実行。

<img alt="Qiita14.png" width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2442317/66a1939b-8b3e-f739-34fe-9202be0f3bff.png">

`index.html`以外に`50x.html`もあることが分かる。`http://localhost:8080/50x.html`でブラウザでも見れますので気になる人はぜひ。

`cat index.html`で`index.html`の中身を見てみる。

```HTML
root@17f51226fe70:/usr/share/nginx/html# cat index.html
<!DOCTYPE html>
<html>
<head>
<title>Welcome to nginx!</title>
<style>
html { color-scheme: light dark; }
body { width: 35em; margin: 0 auto;
font-family: Tahoma, Verdana, Arial, sans-serif; }
</style>
</head>
<body>
<h1>Welcome to nginx!</h1>
<p>If you see this page, the nginx web server is successfully installed and
working. Further configuration is required.</p>

<p>For online documentation and support please refer to
<a href="http://nginx.org/">nginx.org</a>.<br/>
Commercial support is available at
<a href="http://nginx.com/">nginx.com</a>.</p>

<p><em>Thank you for using nginx.</em></p>
</body>
</html>
```

こんな出力になる。確認してみると`http://localhost:8080`でアクセスしたページのHTMLであることがわかる。ここのディレクトリ以下にいろいろ追加していくことで普段使っているWebサーバみたいになることがわかった。

Webサーバの仕組みが少しわかったところで、最後にHTMLを少しいじってみて終わりにします。

```HTML:index.html
<!DOCTYPE html>
<html>
<head>
<title>Welcome to nginx!</title>
<style>
html { color-scheme: light dark; }
body { width: 35em; margin: 0 auto;
font-family: Tahoma, Verdana, Arial, sans-serif; }
</style>
</head>
<body>
<h1>Welcome to nginx!</h1>
<p>If you see this page, the nginx web server is successfully installed and
working. Further configuration is required.</p>

<p>For online documentation and support please refer to
<a href="http://nginx.org/">nginx.org</a>.<br/>
Commercial support is available at
<a href="http://nginx.com/">nginx.com</a>.</p>
<p><a href="./helloworld.html">Hello World!</a></p>    <!-- add this line -->
<p><em>Thank you for using nginx.</em></p>
</body>
</html>
```

```HTML:helloworld.html
<p><font size="35px"><strong>Hello World!</strong></font></p>
<a href="./index.html"><font size="3px">Page back</font></a>
```

適当にHTMLかも怪しいものを作成してリンクを相対パスで付けた。Linuxのテキスト編集は少し面倒なので見るだけで大丈夫です。興味ある人はvimで検索してみてください。
↓公開ディレクトリの中身

<img alt="Qiita15.png" width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2442317/345cb712-e461-0c4d-ede8-ba477e331edb.png">

Webブラウザで確認してみる。

<img alt="Qiita16.png" width="800" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2442317/efd7e0f3-ee9f-5173-99c6-19d6a0bf4741.png">
<img alt="Qiita17.png" width="800" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2442317/f049c0ec-42c7-57c3-3e2f-16de3773b758.png">

リンクもちゃんと機能していた。

<a id="#Chapter4"></a>
# おまけ
今回調べていった内容は全部、`/etc/nginx/nginx.conf`や`/etc/nginx/conf.d/default.conf`などの設定ファイルに書いてあるのでそこを見てもわかります。(公開ディレクトリを`/usr/share/nginx/html`とすることや、80番ポートでnginxを動かすこと等)
ただ全くわからない状態で、いきなり設定ファイルを見ても確実にわからない(経験談)と思うので、まずはハンズオン的な感じで興味を持ってもらえたらいいなと思っています。