【Docker】Dockerでnginxを動かしてみる...!

2022年7月22日 2022年7月22日

どーも！

たかぽんです！

今回はDokerでnginxを動かして、デフォルトの表示をちょっといじってみる...といったことを試してみようと思います...w

1 なにこれ？
2 Dockerでnginxのイメージをpullする
3 nginxを動かしてみる！
4 docker runについて
5 nginxのデフォルト表示内容を修正する
6 Hostのindex.htmlをVolumeマウントする
7 まとめ

なにこれ？

筆者、業務にてDockerをたくさん使っているのですが、大抵手順通りにやるだけ...

そのため、今回、基本的なところを学び直しておこうと思います...!

せっかくなので、今回はnginxのimageを用いて、Dockerでnginxを起動、そのウェブサイトをlocalhostで確認ができるところまでやってみようと思います...!

また、Volumeのマウントについてもなんとなくの理解なので、軽くさわれればと...!

Dockerでnginxのイメージをpullする

さて、まずはnginxのimageをpullしてきます。

Dockerのimageは、実際にlocalで動かす際はコンテナに必要なものを用意してそのコンテナ内でサーバーが動く形になるんですが、そのコンテナでどんなものを用意すればいいのか？といった設定内容を保存したものになっています。

つまり、nginxのimageがあればnginxのコンテナを立ち上げることが可能です。

もちろん、nginxだけでなく、他のlaravel等のサービスに必要な環境設定を書いておけば、それも可能になります。

今回はお試しで公式のnginxのイメージを使用します。

Docker Hub Nginx 公式image

このimageは上記のDocker Hubで管理されており、dockerコマンドが使える状態で、ターミナルで以下を実行すればimageのpullができます。

docker pull nginx

実行した後は、数十秒ほどで完了すると思います。

確認のため、以下のコマンドでREPOSITORYがnginxというimageができていればOKです！

(base) taka@Taka dockerPractice % docker images
REPOSITORY   TAG       IMAGE ID       CREATED        SIZE
nginx        latest    fd2d3e51789e   43 hours ago   135MB

nginxを動かしてみる！

さて、では早速Dockerでnginxを動かしてみましょう...!

docker run -p 8080:80 --name nginx nginx
... 
2022/07/21 14:22:15 [notice] 1#1: start worker process 34
2022/07/21 14:22:15 [notice] 1#1: start worker process 35

上記で動かした後は、入力を受け付けなくなります。（バックグラウンドでの起動は後ほど説明します。）

この状態で、webブラウザで"localhost:8080"へアクセスをすると...?

nginxの起動ができました...!

では、先程起動したdockerをCmd+Cで一旦停止させます。

停止させた後、コンテナのremoveもしておきましょう。

(base) taka@Taka dockerPractice % docker rm nginx
nginx
(base) taka@Taka dockerPractice % docker ps -a
CONTAINER ID   IMAGE     COMMAND   CREATED   STATUS    PORTS     NAMES
(base) taka@Taka dockerPractice %

docker ps -aで停止中のコンテナも含めて何もなければOKです！

次は、先ほどのDocker起動時のコマンドについて解説をしていきます。

docker runについて

先程実行したコマンドについて解説をしていきます...!

docker run -p 8080:80 --name nginx nginx

こちらですね。

"docker run <イメージ名>"でimageからdockerコンテナを作成することができます。

nginxが二つあってわかりづらいんですが...後にあるnginxがコンテナ名になっています。

そして、間にある"-p 8080:80"と"--name nginx"はオプションになります。

-pはportの指定をできるオプションになっています。

コロン（:）より手前がホスト（筆者の場合は使用しているMacbook）のポート番号、そして、Dockerで立てたコンテナのポートがコロン（:）より後ろのポート番号になっています。

つまり、"-p 8080:80"というのは、ホストの8080へのアクセスが来た場合、コンテナの80へアクセスするように設定しているわけです。

そのため、ウェブブラウザから"localhost:8080"で、ホストの8080番ポートへアクセスをしたら、コンテナの80番ポートへアクセスが行われ、Dockerで動いているnginxがデフォルトの画面を返してくれたわけですね！

では、次に再度nginxを動かします。

(base) taka@Taka dockerPractice % docker run -d -p 8080:80 --name nginx nginx
1fcc5fd5e4c9b45982c94964b40e345ff12b656f9b5ef65561000d043f215a78
(base) taka@Taka dockerPractice %

上記は起動していますが、前回の起動とは異なり、-dをつけています。

このように-dオプションを付けると、バックグラウンドでの実行ができるので、それで起動します。

再びlocalshost:8080でアクセスできることが確認できればバックエンドでの実行ができているはずです。

次は、nginxのデフォルト画面を少しいじってみようと思います！

nginxのデフォルト表示内容を修正する

では、動いているコンテナの中身を書き換えて、表示内容を修正してみます...!

(base) taka@Taka dockerPractice % docker exec -it nginx bash
root@1fcc5fd5e4c9:/#

上記のコマンドでnginxコンテナの中へ入れます。（打った後に末尾#になっていれば大丈夫かと思います）

コンテナ内部に入ったら、以下でnginxの設定ファイルを確認できます。

cat /etc/nginx/conf.d/default.conf

上記を実行して出てきた中に、以下のような箇所があると思います。

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }

ここが、nginxがデフォルトで表示するhtmlファイルを指定している箇所になります。

indexにindex.html, index.htmがあり、左側から順番にファイルを探し、あったらそれを返す...といった形になっています。

そして、そのindex.htmlファイルのあるドキュメントルートは前述のrootに記載のある通りなので、以下を叩いてみましょう。

root@1fcc5fd5e4c9:/# ls /usr/share/nginx/html
50x.html  index.html
root@1fcc5fd5e4c9:/# cat /usr/share/nginx/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><em>Thank you for using nginx.</em></p>
</body>
</html>
root@1fcc5fd5e4c9:/#

rootにあるパスにデフォルトで表示されているHTMLファイルが見つかりました！

つまり、このファイルを置き換えてあげる必要がありそうですね...!

では、サクッと書き換えて試してみます...!

echo "Hello World! from nginx Container!" > /usr/share/nginx/html/index.html

書き換えたら、ブラウザから"localhost:8080"へアクセスしてみてください...

よさそうです...!

では、今回は直接書き換えたんですが次はDockerのvolumeマウントを行うことで、hostにあるファイルをDockerの中で反映できるようにしてみます...!

先ほどのコンテナからは出ておきましょう。

root@1fcc5fd5e4c9:/# exit
exit
(base) taka@Taka dockerPractice %

Hostのindex.htmlをVolumeマウントする

ではやっていきます！

Volumeのマウントとは、HostのフォルダをDockerの中で使えるように紐付けする...みたいなニュアンスです...!

先程nginxをHelloworldに書き換えたものは一度コンテナの削除をしたため、コンテナ内の変更内容は残っていません。

しかし、Hostにあるファイルをマウントすると、そのファイルを参照する形なので、コンテナを閉じても再度マウントさせれば同じデータを扱えますし、複数のコンテナから同じファイルを使うことも可能です。

習うより慣れよですね...!

やってみましょう！

まずは先程立ち上げていたコンテナを再度停止・削除しておきます。

(base) taka@Taka dockerPractice % docker stop nginx && docker rm nginx
nginx
nginx

そしたら、任意の場所（不要なファイルは少ない方がいいかもです）にて、以下のコマンドを実行し、Host側に配置する、Dockerコンテナのnginxで表示したいhtmlを作成します。

 touch index.html && echo "Hello World in Host File" > index.html

今回はコンテナ内ではないことがわかりやすいようにしてみました。

(base) taka@Taka dockerPractice % touch index.html && echo "Hello World in Host File" > index.html
(base) taka@Taka dockerPractice % ls
index.html
(base) taka@Taka dockerPractice % cat index.html
Hello World in Host File

よさそうです！

それでは、volumeのマウントを行なっていきます...!

volumeのマウントは起動時に行います。

docker run -d --volume "$(pwd)":/usr/share/nginx/html -p 8080:80 --name nginx nginx

簡単に説明しておきますね！

--volume "$(pwd)":/usr/share/nginx/html

が今回新しく追加されている部分なんですが、--volumeオプションでvolumeをマウントできます。

引数ですが、先ほどと同じで、コロンの手前がマウントしたいホストのpath、その後がコンテナ側のパスになっています。

先程index.htmlのファイルはnginxコンテナで"/usr/share/nginx/html"の下にありました。

そこへ、現在のカレントディレクトリをマウントすることで、あたかもDockerの"/usr/share/nginx/html"はカレントディレクトリのように振る舞うことができます。

うまく実行できれば以下のようにコンテナIDが出てくると思います。

(base) taka@Taka dockerPractice % docker run -d --volume "$(pwd)":/usr/share/nginx/html -p 8080:80 --name nginx nginx
8d615f08de4645c4544f1378e39372bfe4e2a3ee3af7fb63889deb947f80ec57
(base) taka@Taka dockerPractice %

では、上記のコンテナが正しく動いていそうであれば、再度"localhost:8080"へアクセスしてみましょう...!

いい感じです...!

では、以下も試してみます。

(base) taka@Taka dockerPractice % echo "Hello World in Host File Edit" > index.html
(base) taka@Taka dockerPractice % cat index.html
Hello World in Host File Edit

Hostのファイルを書き換えてそれがwebブラウザでもちゃんと確認できることを見ておきます...!

上記で書き換えたら再度アクセスします...!