南 健太郎 
こんにちは！
個人開発者の南です。
今回は、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を使う時は、下記のようなフォルダ構成にするのが良さそうです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
例 dockerfolder | docker-compose/ | docker-compose.yml | nginx/ | DockerFile | mysql/ | DockerFile |
Docker Tip #10: Project Structure with Multiple Dockerfiles and Docker Compose
というわけで下記のような構成で、htmlファイルを表示します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
例 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」でデフォルトで読まれる、設定変数ファイルです。
下記のような内容でファイルを記述します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
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の中身は下記のように記載します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
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’」とするのが一般的かと思います。
servicesについて
servicesでは、サーバー内で使用するものを設定していきます。
今回はnginxを使用するので、「nginx」を続けて記載しています。
ちなみにスペースもちゃんと開けて調整しないとコマンドを入力した時に、下記のようなエラーがでます。
「yaml.parser.ParserError: while parsing a block mapping in 」
buildについて
buildには、使用するサービスのDokcerFileが設置している場所を指定するようにしましょう。
上記では「docker-comcose.yml」と同じ階層にある「nginx」フォルダを指定しています。
volumesについて
volumesでは、ローカルのフォルダとDockerのコンテナを反映させるものをそれぞれ指定します。
「.env」の環境変数を使っていますが、環境変数を入れ替えると下記のように表示されます。
|
1 2 3 4 5 |
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」の環境変数を使っていますが、環境変数を入れ替えると下記のように表示されます。
|
1 2 3 |
ports: - "80:80" - "443:443" |
nginxの設定
docker-compose.ymlの設定ができたら、今度はnginxの設定を行っていきます。
nginxのフォルダの中身は下記のように設定しましょう。
|
1 2 3 4 5 6 7 8 9 10 11 |
nginx/ | DockerFile | nginx.conf | sites/ | app.test-html.conf | ssl/ |
ここでは、下記の順番で設定を行っていきます。
・nginx.confの設定
・app.test-html.confの設定
・DockerFileの設定
nginx.confの設定
まずは、nginx.confの設定を行います。
nginx.confの中身は下記のように行います。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
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の記事にとても丁寧に纏められています。
app.test-html.confの設定
app.test-html.confの中身は下記のように記述します。
普通は「default.conf」というファイルを作成して設定するのですが、僕の場合は「default.conf」とすると、localhostで「nginx」のデフォルトのものしか表示されなしため、下記のようにしています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
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」でページにアクセスできるようになります。
|
1 |
127.0.0.1 test-html.test |
hostsファイルの場所はそれぞれ下記の場所にあります。
Mac:/private/etc/hosts
Windows:C:\Windows\System32\drivers\etc\hosts
各設定について
この「server」部分の各設定についても、下記のページにキレイに纏められています。
気になる方は「server」部分を見てみて下さい。
nginxのDockerFileの設定
「app.test-html.conf」の設定ができたら、今度はDokcerFileの設定を行っていきます。
DockerFileの中身は、下記のように記述しましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
#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ファイルを作成しましょう。
実際のディレクトリ構成は下記のようにします。
|
1 2 3 |
html/ | index.html |
index.htmlファイルの中身は、下記のようにしましょう。
|
1 |
Hello World!! |
最終的には、下記のようなフォルダ構成になると思います。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
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!!」の文字が表示されていると思います。
