docker-composeを使ってnginxサーバーの立ち上げ方法について紹介

投稿日 2019年9月23日
著者南　健太郎
カテゴリー docker
カテゴリー開発ツール

こんにちは！

個人開発者の南です。

今回は、Docker Composeを使って実際にnginxのサーバーを立てて、htmlファイルを表示する方法を紹介します。

始めていた時に思っていた「DockerFileとdocker-copose.yml」や設定ファイルの記述などに関しても紹介していきますので、ぜひ最後まで読んでみて下さい。

docker-composeとは？

dockerのドキュメントによると下記のように記載されています。

Compose is a tool for defining and running multi-container Docker applications. With Compose, you use a YAML file to configure your application’s services. Then, with a single command, you create and start all the services from your configuration.
Dockerドキュメントより

訳：composeはDockerを動かすために使用されるアプリケーションを整理、動かすためのツールです。composeを使うことで、YAMLファイル形式で、Dokcerのアプリケーションのサービスを定義することができます。そして、シンプルなコマンドでYAMLファイルに定義したものを作り、起動することができます。

とあります。

早い話が、今までバラバラに管理しているファイル群をYAML形式のファイルで管理し、コマンド一発で各種サービスを立ち上げるための仕組みのことです。

DockerFileとdocker-copose.ymlの違い

僕は「docker-compose」を使った方がより、Dockerのファイルを管理しやすいというようなイメージでした。

そこで、「DockerFile」と「docker-copose.yml」の違いって何なのだろうと思っていました。

どっちか片方だけ覚えたら良いのかなと思っていました。

ただ、実際は「DockerFile」と「docker-copose.yml」ファイルの両方を覚える必要があります。

先に結論を言うと、「DockerFile」には実際のサーバー内で行う処理を記述します。

「docker-copose.yml」では、そもそも「どんなものをダウンロード(nginxかapacheかなど)するのか？」、「マウントするボリューム」は何なのか？などの概要を記載するファイルです。

これにより、１つの「DockerFile」に長々と記述するのでなく、ダウンロードするものに分けて「DockerFile」を作成して、処理を分けて記述することができるようになります。

「nginx」に関してはこの「nginx/DockerFile」を編集。

「MySQL」に関してはこの「mysql/DockerFile」を編集するといったことができるようになります。

docker-composeを使う時のフォルダの構成

docker-composeを使う時は、下記のようなフォルダ構成にするのが良さそうです。

例
dockerfolder
    |
    docker-compose/
        |
        docker-compose.yml
        |
        nginx/
            |
            DockerFile
        |
        mysql/
            |
            DockerFile

例

dockerfolder

docker-compose/

docker-compose.yml

nginx/

DockerFile

mysql/

DockerFile

Docker Tip #10: Project Structure with Multiple Dockerfiles and Docker Compose

というわけで下記のような構成で、htmlファイルを表示します。

例
dockerfolder
    |
    docker-compose/
        |
        docker-compose.yml
        |
        nginx/
            |
            DockerFile
        |
        mysql/
            |
            DockerFile
    |
    html/
        |
        index.html

例

dockerfolder

docker-compose/

docker-compose.yml

nginx/

DockerFile

mysql/

DockerFile

html/

index.html

実際にnginxサーバーの立ち上げ

それでは、実際にnginxサーバーを立ち上げて見ようと思います。

・.envファイルの作成
・docker-comcose.ymlの設定
・nginxの設定

.envファイルの作成

まず初めに「.envファイル」を作成します。

.envファイルとは「dokcer-compose.yml」でデフォルトで読まれる、設定変数ファイルです。

下記のような内容でファイルを記述します。

VOLUMES_DRIVER=local

### Paths #################################################

APP_CODE_PATH_HOST=../

APP_CODE_PATH_CONTAINER=/var/www

APP_CODE_CONTAINER_FLAG=:cached


### NGINX #################################################

NGINX_HOST_HTTP_PORT=80
NGINX_HOST_HTTPS_PORT=443
NGINX_HOST_LOG_PATH=./logs/nginx/
NGINX_SITES_PATH=./nginx/sites/
NGINX_SSL_PATH=./nginx/ssl/

VOLUMES_DRIVER=local

### Paths #################################################

APP_CODE_PATH_HOST=../

APP_CODE_PATH_CONTAINER=/var/www

APP_CODE_CONTAINER_FLAG=:cached

### NGINX #################################################

NGINX_HOST_HTTP_PORT=80

NGINX_HOST_HTTPS_PORT=443

NGINX_HOST_LOG_PATH=./logs/nginx/

NGINX_SITES_PATH=./nginx/sites/

NGINX_SSL_PATH=./nginx/ssl/

ここで記載しているものは、あとで「docker-comcose.yml」ファイルを作成する時に使用する環境変数になります。

docker-comcose.ymlの設定

「.envファイル」が作成できたら、次は「docker-comcose.yml」ファイルを作成していきます。

docker-composeの中身は下記のように記載します。

version: '3'
services:
    nginx:
        build:
            context: ./nginx
        volumes:
            - ${APP_CODE_PATH_HOST}:${APP_CODE_PATH_CONTAINER}${APP_CODE_CONTAINER_FLAG}
            - ${NGINX_HOST_LOG_PATH}:/var/log/nginx
            - ${NGINX_SITES_PATH}:/etc/nginx/sites-available
            - ${NGINX_SSL_PATH}:/etc/nginx/ssl
        ports:
            - "${NGINX_HOST_HTTP_PORT}:80"
            - "${NGINX_HOST_HTTPS_PORT}:443"

version: '3'

services:

nginx:

build:

context: ./nginx

volumes:

- ${APP_CODE_PATH_HOST}:${APP_CODE_PATH_CONTAINER}${APP_CODE_CONTAINER_FLAG}

- ${NGINX_HOST_LOG_PATH}:/var/log/nginx

- ${NGINX_SITES_PATH}:/etc/nginx/sites-available

- ${NGINX_SSL_PATH}:/etc/nginx/ssl

ports:

- "${NGINX_HOST_HTTP_PORT}:80"

- "${NGINX_HOST_HTTPS_PORT}:443"

versionについて

versionについては、下記の公式サイトの中から選びます。

2019年時点では、「version:’3’」とするのが一般的かと思います。

Docker-composeの公式レファレンス

servicesについて

servicesでは、サーバー内で使用するものを設定していきます。

今回はnginxを使用するので、「nginx」を続けて記載しています。

ちなみにスペースもちゃんと開けて調整しないとコマンドを入力した時に、下記のようなエラーがでます。

「yaml.parser.ParserError: while parsing a block mapping in 」

buildについて

buildには、使用するサービスのDokcerFileが設置している場所を指定するようにしましょう。

上記では「docker-comcose.yml」と同じ階層にある「nginx」フォルダを指定しています。

volumesについて

volumesでは、ローカルのフォルダとDockerのコンテナを反映させるものをそれぞれ指定します。

「.env」の環境変数を使っていますが、環境変数を入れ替えると下記のように表示されます。

volumes:
    - ../:/var/www:cached
    - ./logs/nginx/:/var/log/nginx
    - ./nginx/sites/:/etc/nginx/sites-available
    - ./nginx/ssl/:/etc/nginx/ssl

volumes:

- ../:/var/www:cached

- ./logs/nginx/:/var/log/nginx

- ./nginx/sites/:/etc/nginx/sites-available

- ./nginx/ssl/:/etc/nginx/ssl

対応としては、ローカル：Dockerのコンテナ内といったように対応しています。

portsについて

portsには、ローカルのマシンとDokcerコンテナのマシンでのポートを対応させます。

「.env」の環境変数を使っていますが、環境変数を入れ替えると下記のように表示されます。

ports:
    - "80:80"
    - "443:443"

ports:

- "80:80"

- "443:443"

nginxの設定

docker-compose.ymlの設定ができたら、今度はnginxの設定を行っていきます。

nginxのフォルダの中身は下記のように設定しましょう。

nginx/
    |
    DockerFile
    |
    nginx.conf
    |
    sites/
        |
        app.test-html.conf
    |
    ssl/

nginx/

DockerFile

nginx.conf

sites/

app.test-html.conf

ssl/

ここでは、下記の順番で設定を行っていきます。

・nginx.confの設定
・app.test-html.confの設定
・DockerFileの設定

nginx.confの設定

まずは、nginx.confの設定を行います。

nginx.confの中身は下記のように行います。

user www-data;
worker_processes 4;
pid /run/nginx.pid;


events {
  worker_connections  2048;
  multi_accept on;
  use epoll;
}


http {
    server_tokens off;
    include /etc/nginx/mime.types;
    default_type  application/octet-stream;
    access_log /dev/stdout;
    sendfile on;
    tcp_nopush on;
    tcp_nodelay on;
    keepalive_timeout 15;
    keepalive_requests 100;
    client_max_body_size 20M;
    gzip on;
    gzip_disable "msie6";
    gzip_min_length 1000;
    types_hash_max_size 2048;
    server_name_in_redirect off;
    include /etc/nginx/conf.d/*.conf;
    include /etc/nginx/sites-available/*.conf;
    open_file_cache off; # Disabled for issue 619
    charset UTF-8;

}

user www-data;

worker_processes 4;

pid /run/nginx.pid;

events {

worker_connections 2048;

multi_accept on;

use epoll;

}

http {

server_tokens off;

include /etc/nginx/mime.types;

default_type application/octet-stream;

access_log /dev/stdout;

sendfile on;

tcp_nopush on;

tcp_nodelay on;

keepalive_timeout 15;

keepalive_requests 100;

client_max_body_size 20M;

gzip on;

gzip_disable "msie6";

gzip_min_length 1000;

types_hash_max_size 2048;

server_name_in_redirect off;

include /etc/nginx/conf.d/*.conf;

include /etc/nginx/sites-available/*.conf;

open_file_cache off; # Disabled for issue 619

charset UTF-8;

}

各設定について

各設定の内容については、下記のQitaの記事にとても丁寧に纏められています。

Nginx設定のまとめ

app.test-html.confの設定

app.test-html.confの中身は下記のように記述します。

普通は「default.conf」というファイルを作成して設定するのですが、僕の場合は「default.conf」とすると、localhostで「nginx」のデフォルトのものしか表示されなしため、下記のようにしています。

server {

    listen 80;
    listen [::]:80;

    # For https
    # listen 443 ssl default_server;
    # listen [::]:443 ssl default_server ipv6only=on;
    # ssl_certificate /etc/nginx/ssl/default.crt;
    # ssl_certificate_key /etc/nginx/ssl/default.key;

    server_name test-html.test;
    #www/以下に使用するフォルダ名を指定します。今回は「html」を使用するため「html」と記入します。
    root /var/www/html;
    index index.php index.html index.htm;

    location / {
         try_files $uri $uri/ /index.php$is_args$args;
    }

    location ~ /\.ht {
        deny all;
    }

}

server {

listen 80;

listen [::]:80;

# For https

# listen 443 ssl default_server;

# listen [::]:443 ssl default_server ipv6only=on;

# ssl_certificate /etc/nginx/ssl/default.crt;

# ssl_certificate_key /etc/nginx/ssl/default.key;

server_name test-html.test;

#www/以下に使用するフォルダ名を指定します。今回は「html」を使用するため「html」と記入します。

root /var/www/html;

index index.php index.html index.htm;

location / {

try_files $uri $uri/ /index.php$is_args$args;

}

location ~ /\.ht {

deny all;

}

上記の設定ができた「hosts」ファイルに下記の記載を加えましょう。

加えることで、docker-composeで起動した時「test-html.test」でページにアクセスできるようになります。

127.0.0.1   test-html.test

1	127.0.0.1 test-html.test

hostsファイルの場所はそれぞれ下記の場所にあります。

Mac:/private/etc/hosts

Windows:C:\Windows\System32\drivers\etc\hosts

各設定について

この「server」部分の各設定についても、下記のページにキレイに纏められています。

気になる方は「server」部分を見てみて下さい。

Nginx設定のまとめ

nginxのDockerFileの設定

「app.test-html.conf」の設定ができたら、今度はDokcerFileの設定を行っていきます。

DockerFileの中身は、下記のように記述しましょう。

#ngixのalpine Linux番を使用。
FROM nginx:alpine

#nginx.confをDockerの/etc/nginx/以下に配置
COPY nginx.conf /etc/nginx/


#Alpine Linuxのアップデート
RUN apk update \
    && apk upgrade \
    && apk add --no-cache openssl \
    && apk add --no-cache bash

#www-dataを追加
RUN set -x ; \
    addgroup -g 82 -S www-data ; \
    adduser -u 82 -D -S -G www-data www-data && exit 0 ; exit 1

#ポートの80と443番を開放
EXPOSE 80 443

#ngixのalpine Linux番を使用。

FROM nginx:alpine

#nginx.confをDockerの/etc/nginx/以下に配置

COPY nginx.conf /etc/nginx/

#Alpine Linuxのアップデート

RUN apk update \

&& apk upgrade \

&& apk add --no-cache openssl \

&& apk add --no-cache bash

#www-dataを追加

RUN set -x ; \

addgroup -g 82 -S www-data ; \

adduser -u 82 -D -S -G www-data www-data && exit 0 ; exit 1

#ポートの80と443番を開放

EXPOSE 80 443

FORMの部分で指定している「nginx」には「alpine」と「latest」を指定できます。

「alpine」を指定するとAlpine Linux。

「latest」を指定すると、デフォルトのnginxを使用するようです。

latestを指定した場合は、別のコマンドを入力する必要があると思います。。。

表示するhtmlファイルを作成

最後に実際に表示するhtmlファイルを作成しましょう。

実際のディレクトリ構成は下記のようにします。

html/
    |
    index.html

html/

index.html

index.htmlファイルの中身は、下記のようにしましょう。

Hello World!!

1	Hello World!!

最終的には、下記のようなフォルダ構成になると思います。

dockerfolder
    |
    docker-compose/
        |
        docker-compose.yml
        |
        nginx/
            |
            DockerFile
            |
            nginx.conf
            |
            sites/
                |
                app.test-html.conf
            |
            ssl/
            |
        |
    html/
        |
        index.html

dockerfolder

docker-compose/

docker-compose.yml

nginx/

DockerFile

nginx.conf

sites/

app.test-html.conf

ssl/

html/

index.html

nginxの起動とhtmlファイルの表示

ここまでできたら、最後は実際に「docker-compose up」コマンドで起動してみましょう。

イメージの作成が終わったら、下記のURLにアクセスしてみます。

「test-html.test」

下記のように「Hello World!!」の文字が表示されていると思います。

この記事を書いた人

南　健太郎

1991年生まれ。都内でエンジニアをしています。
このブログでは、個人開発や日々の技術に関する情報などを発信していきます。

記事一覧

docker-composeを使ってnginxサーバーの立ち上げ方法について紹介

docker-composeとは？

DockerFileとdocker-copose.ymlの違い

docker-composeを使う時のフォルダの構成

実際にnginxサーバーの立ち上げ

.envファイルの作成

docker-comcose.ymlの設定

versionについて

servicesについて

buildについて

volumesについて

portsについて

nginxの設定

nginx.confの設定

各設定について

app.test-html.confの設定

各設定について

nginxのDockerFileの設定

表示するhtmlファイルを作成

nginxの起動とhtmlファイルの表示

この記事を書いた人

南　健太郎

webpackでcssをコンパイルする方法をご紹介！

実際にPHPを動作させながらDokcerの基本的な使い方について紹介

Seleniumの自動テストでWordPressのポップアップに対応する方法

webpackでbabel-loaderを使う方法を紹介

docker-composeとは？

DockerFileとdocker-copose.ymlの違い

docker-composeを使う時のフォルダの構成

実際にnginxサーバーの立ち上げ

.envファイルの作成

docker-comcose.ymlの設定

versionについて

servicesについて

buildについて

volumesについて

portsについて

nginxの設定

nginx.confの設定

各設定について

app.test-html.confの設定

各設定について

nginxのDockerFileの設定

表示するhtmlファイルを作成

nginxの起動とhtmlファイルの表示

この記事を書いた人

南 健太郎

南　健太郎