どーも！
たかぽんです！
今回はDokerでnginxを動かして、デフォルトの表示をちょっといじってみる...といったことを試してみようと思います...w
目次
なにこれ？
筆者、業務にてDockerをたくさん使っているのですが、大抵手順通りにやるだけ...
そのため、今回、基本的なところを学び直しておこうと思います...!
せっかくなので、今回はnginxのimageを用いて、Dockerでnginxを起動、そのウェブサイトをlocalhostで確認ができるところまでやってみようと思います...!
また、Volumeのマウントについてもなんとなくの理解なので、軽くさわれればと...!
Dockerでnginxのイメージをpullする
さて、まずはnginxのimageをpullしてきます。
Dockerのimageは、実際にlocalで動かす際はコンテナに必要なものを用意してそのコンテナ内でサーバーが動く形になるんですが、そのコンテナでどんなものを用意すればいいのか？といった設定内容を保存したものになっています。
つまり、nginxのimageがあればnginxのコンテナを立ち上げることが可能です。
もちろん、nginxだけでなく、他のlaravel等のサービスに必要な環境設定を書いておけば、それも可能になります。
今回はお試しで公式のnginxのイメージを使用します。
この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ブラウザでもちゃんと確認できることを見ておきます...!
上記で書き換えたら再度アクセスします...!
ちゃんとEditとついていますね...!
Volumeのマウントをして、Hostのファイルを書き換えることでDockerのコンテナで出している表示内容を変更できることを確認しました！
まとめ
さて、今回はDockerを使って、Nginxの公式イメージから最低限コンテナをたてて、デフォルトの表示ページをいじってみました...!
なかなかNginxを動かす経験はないんですが....
実は筆者の知識としてはnginxってなんやねん？って感じで、最低限アクセスをいい感じにするやつでしょ〜？ぐらいです...
なので、このDockerで作ったnginx環境を使っていい感じに色々試していきたいなと...思っています...!
またそれについても記事にできればと思います...!
それでわ！