Docker compose with nginx keeps displaying welcome page

Question

I'm new to docker and trying the simplest docker-compose.yml showing an hello world page to build on top of that with eventually a full LEMP stack that would have the same config as my server. However most tutorials are obsolete and there are so many ways of using docker that I can't find one using only Docker compose v3 that is still actual. I checked the docs and it's awfully confusing as well for a beginner, been trying to make it work for the past 5 hours so I thought I'd ask on SO.

docker-compose.yml

version: '3'
services:
  web:
    image: bitnami/nginx:1.10.3-r0 #using this version as it's the same on my server
    volumes:
      - "./test.conf:/etc/nginx/sites-available/test.local"
      - "./test.conf:/etc/nginx/sites-enabled/test.local"
      - "./code:/var/www/html" #code contains only a basic index.html file
    ports:
      - "80:80"

test.conf

server {
    listen 80;
    listen [::]:80;
    server_name test.local;

    index index.html; #Only a basic helloworld index.html file
    error_log  /var/log/nginx/error.log;
    access_log /var/log/nginx/access.log;
    root /var/www/html;
}

Do I need a Dockerfile with this? Tutorials don't seem to mention it's needed.

NOTE:
Tried adding the volume

- "./default.conf:/etc/nginx/conf.d/default.conf"

but nothing changes and the welcome page still loads, while with nginx:latest I get a very verbose error containing this phrase: "unknown: Are you trying to mount a directory onto a file (or vice-versa)? Check if the specified host path exists and is the expected type".

UPDATE about docker-compose.yml:

• Without the line "./code:/usr/share/nginx/html", the /usr/share/nginx/html folder contains the default index.html file (expected)
• With the line "./code:/usr/share/nginx/html", the /usr/share/nginx/html folder is EMPTY!
• With the line "./:/usr/share/nginx/html", the /usr/share/nginx/html folder has and empty "code" folder and a bunch of random test files I deleted a while ago.

Between tries, I run my reset script to make sure I start fresh:

docker rm $(docker ps -a -q)
docker rmi $(docker images -q) --force
docker volume rm $(docker volume ls -q)

Running docker inspect <container> returns this for the volume, not sure it's normal that the type is "bind" for as a bind mount instead of a volume.

"Mounts": [
    {
        "Type": "bind",
        "Source": "/e/DEV/sandbox/docker",
        "Destination": "/usr/share/nginx/html",
        "Mode": "rw",
        "RW": true,
        "Propagation": "rprivate"
    }
],

Answer 1

It's easy to mount your own hello world page. I'll explain it using the official nginx:latest image but you can do it for yourself with the bitnami image if you want.

First the very basic. Just run the nginx container (without docker-compose). I'll explain it in detail and basic, of course I can try to perform more advanced or faster commands to read files which are inside the container but this can be confusing for a beginner. So just run the container and name it my-nginx:

$ docker run --rm -d -p 80:80 --name my-nginx nginx

Go to localhost:80, you'll see the default nginx page. Now you can exec inside the container by using it's name. exec will bring you 'inside the container' so you can check its files.

$ docker exec -it my-nginx bash
root@2888fdb672a1:/# cd /etc/nginx/
root@2888fdb672a1:/etc/nginx# ls
conf.d      koi-utf  mime.types  nginx.conf   uwsgi_params
fastcgi_params  koi-win  modules     scgi_params  win-utf

Now read the nginx.conf by using cat. The most important line in this file is:

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

This means all the confs inside that directory are used/read. So go into /etc/nginx/conf.d/.

root@2888fdb672a1:~# cd /etc/nginx/conf.d/
root@2888fdb672a1:/etc/nginx/conf.d# ls
default.conf

The default.conf is the only file. Inside this file you see the configuration:

listen       80;
server_name  localhost;

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

server is local host, port is 80 and the file that will be displayed is in the directory /usr/share/nginx/html/

Now check that file in your container:

root@2888fdb672a1:/etc/nginx/conf.d# cat /usr/share/nginx/html/index.html
<!DOCTYPE html>
<html>
<head>
<title>Welcome to nginx!</title>
<style>
    body {
        width: 35em;
        margin: 0 auto;
        font-family: Tahoma, Verdana, Arial, sans-serif;
    }
</style>
...

It's the expected file. It's the 'Welcome to Nginx' page we can see. So how can we show our own index.html? By just mounting it in /usr/share/nginx/html.

You'll docker-compose.yaml will look like this.

version: '3'
services:
  web:
    image: nginx:latest
    volumes:
      - ./code:/usr/share/nginx/html
    ports:
      - "80:80"

The code directory just contains an index.html with hello world. Run docker-compose up -d --build and when you curl localhost:80 you will see your own index.html.

If you really want to put your code in /var/www/html instead of /usr/share/nginx you can do that.

Use your test.conf. Here you define to put your file in /var/www/html/:

server {
    listen 80;
    listen [::]:80;
    server_name test.local;

    index index.html; #Only a basic helloworld index.html file
    error_log  /var/log/nginx/error.log;
    access_log /var/log/nginx/access.log;
    root /var/www/html;
}

In the compose you will overwrite the default.conf with your own conf where you tell nginx to look in /var/www/html. Your compose can look like this:

version: '3'
services:
  web:
    image: nginx:latest
    volumes:
      - "./test.conf:/etc/nginx/conf.d/default.conf"
      - "./code:/var/www/html"
    ports:
      - "80:80"

Now you will also see your own index.html while it's on your own specified location. Long answer but I hope this helps.