Docker compose with nginx keeps displaying welcome page - docker

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.

Answer 2

After struggling a lot on this question, I have figured out three factors that made my deploy with docker-compose work.
I did a website in nodejs.
We expose web part and nginx on port 80
Dockerfile for nodejs : [ important line is -> EXPOSE 80 ]
FROM node:14-alpine
WORKDIR /
COPY package.json ./
EXPOSE 80
RUN npm install
COPY . .
CMD ["node", "bin/www"]
Nginx.conf for nginx : [ important line is -> listen 80; ]
events {
}
http {
server {
listen 80;
location / {
proxy_pass http://nodejs:3000;
}
}
}
We give to nginx config file, the name and port of web's image
docker-compose.yaml :
[ important line is -> image: nodejs ] that is the name of web's image
AND
[ important line is -> ports: -"3000:3000" ] that is the port to run web's part
version: "3.7"
services:
nodejs:
build:
context: .
dockerfile: Dockerfile
image: nodejs
container_name: nodejs
restart: unless-stopped
networks:
- app-network
ports:
- "3000:3000"
webserver:
image: nginx
container_name: webserver
restart: unless-stopped
ports:
- "80:80"
volumes:
- ./nginx/nginx.conf:/etc/nginx/nginx.conf
- ./nginx/:/etc/nginx/conf.d
depends_on:
- nodejs
networks:
- app-network
networks:
app-network:
driver: bridge
Nginx.conf for nginx : [ important line is -> proxy_pass http://nodejs:3000; ]
events {
}
http {
server {
listen 80;
location / {
proxy_pass http://nodejs:3000;
}
}
}
We give nginx's image, volumes as path for the config file to replace default one
Tree :
mainfolder
.
|_____nginx
| |______nginx.conf
|
|_____Dockerfile
|
|_____docker-compose.yaml
docker-compose.yaml :
[ important line is -> ./nginx/nginx.conf:/etc/nginx/nginx.conf ] to replace config file
version: "3.7"
services:
nodejs:
build:
context: .
dockerfile: Dockerfile
image: nodejs
container_name: nodejs
restart: unless-stopped
networks:
- app-network
ports:
- "3000:3000"
webserver:
image: nginx
container_name: webserver
restart: unless-stopped
ports:
- "80:80"
volumes:
- ./nginx/nginx.conf:/etc/nginx/nginx.conf
depends_on:
- nodejs
networks:
- app-network
networks:
app-network:
driver: bridge