読者です 読者をやめる 読者になる 読者になる

DockerでNginxをシュッと構築する

フロントエンドでちょっとした作業があった際に、ぱっと確認するためにWebサーバが必要だったのですが、 そこでDockerを利用したところ大変便利だったのでメモを残したいと思います。

やりたいこと

  • ローカルにコマンド一発でWebサーバーを構築したい
  • 手元のファイルを編集したらブラウザを更新するだけで反映されてほしい
  • ポート番号がかぶらないように80番以外のポートで確認したい

解決策

  • docker-composeを使ってnginxを一コマンドで構築する
  • dockerのvolume機能を使ってホストのディレクトリをマウントしリアルタイムで変更を確認できるようにする
  • envsubstで環境変数をコンテナ起動時に埋め込む

DockerでNginxを構築する

上記の解決方法を実際に試してみます。

ちなみに、今回使用したツールのバージョンは以下のとおりです。
docker: 1.13.1
docker-compose: 1.11.1

まず適当なディレクトリを用意します。

$ mkdir nginx
$ cd nginx

次にdocker-compose.ymlファイルを作成し、保存します。

web:
  # 公式のdockerイメージ
  image: nginx 
  volumes:
   # ホスト側のnginxの設定ファイルのテンプレートをコンテナ側にマウント
   - ./mysite.template:/etc/nginx/conf.d/mysite.template
   # コンテンツを含むディレクトリをマウント
   - <表示したいhtmlを含むディレクトリのパス>:/var/www
  ports:
  # ポートを設定(ホスト:ゲストの順)
   - "8080:80"
  environment:
   - ROOT=/var/www/
  command: /bin/sh -c "envsubst '$$ROOT' < /etc/nginx/conf.d/mysite.template > /etc/nginx/conf.d/default.conf && nginx -g 'daemon off;'"

volumesでホストのディレクトリをマウントすることで、dockerを再起動せずにローカルファイルの変更を反映できるようにしています。
また、commandenvironmentに設定した環境ファイルをテンプレートに埋め込みnginxの設定ファイルを生成した後、nginxの起動を行っています。 ちなみに、'daemon off;'はデーモン化(background実行)をしないようにするための設定です。 dockerはルート・プロセスをフォアグラウンドで動かさないとコンテナが停止してしまうためこの設定が必要になるようです。

ここまでできたら、同じディレクトリにnginxの設定ファイルのテンプレートファイル(mysite.template)を作成します。

server {
    listen 80;
    server_name localhost;
    root    ${ROOT};
    index index.html; 
}

これで準備完了です。 docker-composeを実行してnginxを起動してみましょう。

$ docker-compose up

これで、nginxが起動しブラウザから確認できるようになったと思います。 ポートを変更したい場合はdocker-compose.ymlのportsのホスト側を変更すれば任意のポートでアクセスできます。

まとめ

dockerを使ってnginxをシュッと構築する方法を試してみました。 一度configファイル・テンプレートを作成しておくと次回からは少し修正するだけで簡単にwebサーバを作成できますので大変便利だと思います。

参考文献