NginxとDockerでWebサーバーを立てる

やりたいこと

HTML と CSS の勉強用に、テスト用の Web サーバーを用意したくなったので Docker と Nginx で Web ページを簡単にホスティングしてみた。

経緯

最近、簡単な Web 画面を作りたいなと思うことが増えてきた。

そこで React の使い方を覚え、簡単なフロントエンドアプリケーションくらいなら作れるようになってきたが、そもそも HTML やら CSS についてちゃんと勉強したことがないので見た目のいじり方がいまいちよく分からない。

そこでMozilla が Web 開発者用の学習資料を公開していたので目を通してみることにした。

使用するソフトウェアで主なものはテキストエディタ―と最新のブラウザで、前者は VSCode が入っているし、ブラウザーはいくつもインストールされているので何も問題はない。

ただひとつ小さな問題として、私は普段 Windows10 の PC で VirtualBox 上の Virtual Machine (VM)に Ubuntu Server を入れて、 VSCode の Remote - SSH で Ubuntu に入って開発を行っている。そのため、Ubuntu 内で作成した HTML をホストのブラウザから見るための何らかの工夫が必要になる。

どうしようかなと思った瞬間ぱっと思いついた方法は Docker で Nginx を立てて HTML を公開するというものだった。

実は学習資料の中にローカルのテストサーバーはどのようにセットアップしますか？をいう Q&A があり、そこでは Python のSimpleHTTPServerを利用するパターンが紹介されている。

SimpleHTTPServerを使った方法はとても簡単だが、Docker を使った方法もなかなか簡単である。ということでやってみたので、今回はそのメモを残す。

Docker を利用した Nginx の立て方

まず有名どころの OSS ソフトウェアは多くの場合 Official が DockerHub に Image を挙げているので DockerHub を見に行く。

すると案の定、Nginx が作成した Imageがあったのでこれを使用することにした。 Image の Build に使用された Dockerfile などはここに上がっているので興味があれば見ることができる。

DockerHub のページの Quick Reference に Hosting some simple static content というドンピシャな項目がある。これによると

docker run --name some-nginx -v /some/content:/usr/share/nginx/html:ro -d nginx

で OK とのことである。

今回は公開したい HTML を置いた Directory で Container を起動するつもりなので、/some/contentを$PWDで置き換え、 Web Server を公開するためにポートバインディング-p 8080:80を追加したりして下のようなコマンドで Nginx を起動することにした。

docker run -p 8080:80 -v $PWD:/usr/share/nginx/html:ro --rm nginx

Ctrl+Cでコンテナを kill できたほうが便利なので-dオプションは外して--rmオプションをつけている。 --nameについては Daemon として起動する場合は管理上名前がないと不便だが、今回は必要に応じて起動して、消すので除いた。

テスト

これを参考に簡単な HTML をホスティングしてみる。

次のようにファイルを配置し、

$ tree
.
├── images
│   └── Firefox_Project_Logo_2019.svg
└── index.html

index.htmlの中身は次のようにした。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>My test page</title>
  </head>
  <body>
    <img
      src="images/Firefox_Project_Logo_2019.svg"
      alt="My test image"
      width="200"
    />
  </body>
</html>

この状態で Docker Container を起動する。

$ docker run -p 8080:80 -v $PWD:/usr/share/nginx/html:ro --rm nginx
/docker-entrypoint.sh: /docker-entrypoint.d/ is not empty, will attempt to perform configuration
/docker-entrypoint.sh: Looking for shell scripts in /docker-entrypoint.d/
/docker-entrypoint.sh: Launching /docker-entrypoint.d/10-listen-on-ipv6-by-default.sh
10-listen-on-ipv6-by-default.sh: Getting the checksum of /etc/nginx/conf.d/default.conf
10-listen-on-ipv6-by-default.sh: Enabled listen on IPv6 in /etc/nginx/conf.d/default.conf
/docker-entrypoint.sh: Launching /docker-entrypoint.d/20-envsubst-on-templates.sh
/docker-entrypoint.sh: Configuration complete; ready for start up

VM の8080ポートで HTML は公開されているので、Chrome で接続してみると Web ページが表示された。

このとき Terminal 側では

192.168.56.1 - - [24/Oct/2020:12:23:40 +0000] "GET / HTTP/1.1" 304 0 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.111 Safari/537.36" "-"

のようなログが出ている。

ここで、VM とホストの通信はホストオンリーアダプターを経由して行っている。 VM のネットワークアダプターが NAT しかない場合は、ホストと VM でポートフォワーディングをする必要が出てくるので少し面倒かもしれない。

まとめ

Docker で Nginx を起動して HTML を公開してみた。準備が終わったので本題の Mozilla の学習資料に目を通していこうと思う。やはり Docker は便利だった。凝った設定が必要ない場合は Official のコンテナを起動するだけでやりたいことが実現できることも多い。

よく考えてみると普段私が使用している開発環境の構成について記事を書いていないことに気づいた。そのうちまとめてみようと思う。

Published Oct 24, 2020

スタートアップで働くデータエンジニア兼データサイエンティスト。興味の範囲はデータパイプラインの構築、データ分析、機械学習、クラウドなどなど。Atsuik on Twitter

NginxとDockerでWebサーバーを立てる

目次

やりたいこと

経緯

Docker を利用した Nginx の立て方

テスト

まとめ