docker の nginx イメージの設定ファイルを眺めながら、独自ページを表示します。

たとえば、[Docker for Mac のドキュメント](https://docs.docker.com/docker-for-mac/) を読むと、すぐに nginx のサンプルに出会います。

```zsh
docker run -d -p 80:80 --name webserver nginx
```

これで、`localhost` にアクセスすれば、Welcome to nginx ページが表示されわけですが、

ところで、**nginx の設定ファイルとか何処にあって、何が書かれているんだろう？**　と初心者は思います。 :hushed: 

ですので、設定ファイルを確認しつつ、piyo.html といったサンプルページを表示させる 『docker + nginx 簡単サンプル』をお届けします。

# コンテナ内の設定ファイルを確認


```zsh
# コンテナを立ち上げます
$ docker run -d -p 80:80 --name webserver nginx

# コンテナ内に入ります。
$ docker exec -it webserver /bin/bash
```

あとは、`cat` とかで見れます。:eye:


```zsh:/etc/nginx/nginx.conf
user  nginx;
worker_processes  1;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;

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

```zsh:/etc/nginx/conf.d/default.conf
server {
    listen       80;
    server_name  localhost;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}
```


# 独自のページを表示してみる

上の設定ファイルから、location が `/usr/share/nginx/html` で設定されていることがわかりますので、ここに html を配置したいと思います。

参考： https://hub.docker.com/_/nginx/

## ファイルの用意

```zsh:ファイル構成
# 作業
$ mkdir workspace; cd $_
$ touch Dockerfile
$ mkdir html; cd $_
$ touch index.html piyo.html
$ cd ..


# 確認
mochizuki ~/workspace
$ tree
.
├── Dockerfile
└── html
    ├── index.html
    └── piyo.html

1 directory, 3 files
```

```zsh:Dockerfile
FROM nginx
COPY ./html /usr/share/nginx/html
```

```html:html/piyo.html
<html>
<body>
<h1>Piyo</h1>
</body>
</html>
```

Dockerfile に `COPY` 行を追加しているだけです。:no_mouth:

## コマンド実行

```zsh
$ cd ~/workspace

# ------------------------ 
# まずは、イメージの作成
# ------------------------ 

$ docker build --tag simple-nginx .
# Sending build context to Docker daemon 4.096 kB
# Step 1/2 : FROM nginx
#  ---> cc1b61406712
# Step 2/2 : COPY ./html /usr/share/nginx/html
#  ---> 68e7ceff0e0a
# Removing intermediate container 82d84fb20caf
# Successfully built 68e7ceff0e0a

# ------------------------ 
# イメージの確認
# ------------------------ 

$ docker images -a simple-nginx
# REPOSITORY          TAG                 IMAGE ID            CREATED             SIZE
# simple-nginx        latest              68e7ceff0e0a        56 seconds ago      182 MB

# ------------------------ 
# コンテナ立ち上げ & 確認
# ------------------------ 

$ docker run -d --name simple-nginx-container -p 80:80 simple-nginx
# d2f9613a55cf8c39628f319f0e23777ecd1e1a69554c094bf765a1a7c0c5015a

$ docker ps
# CONTAINER ID        IMAGE               COMMAND                  CREATED             STATUS              PORTS                         NAMES
# d2f9613a55cf        simple-nginx        "nginx -g 'daemon ..."   5 seconds ago       Up 4 seconds         0.0.0.0:80->80/tcp, 443/tcp   simple-nginx-container

```

これで、`localhost/piyo.html` にアクセスすると、ページが表示されます。:grinning:

![スクリーンショット 2017-02-05 13.32.24.png](https://qiita-image-store.s3.amazonaws.com/0/45822/ea6c53f3-f09e-ee18-5e27-921d0660f93f.png)


以上です。同じことを実現するのに、コンテナ立ち上げ時に `-v` とかで処理するなど、他にも方法はあるとおもいますが、ひとつのサンプルとしてお届けさせて頂きました。

ありがとうございました。:wave:


# おまけ

同じことを、docker-compose をつかってやってみました。


```zsh
$ tree
.
├── containers
│   └── nginx
│       └── Dockerfile
├── docker-compose.yml
└── public
    ├── index.html
    └── piyo.html
```

```yaml:docker-compose.yml
version: '3'
services:
  nginx:
    build: ./containers/nginx
    ports:
      - "80:80"
    volumes:
      - ./public:/usr/share/nginx/html
```

```yaml:containers/nginx/Dockerfile
FROM nginx
```

```zsh:コマンド
$ docker-compose up
```

これから、ここに、php-fpm をいれたり、mysql を入れたりしていくので、docker-compose を使って組み立てていくことになりそうです。