Nginx working outside Docker but not inside - django

Question

I'm making a personal website using Django, Gunicorn, Nginx and Docker. When I execute:
gunicorn --chdir personal-website --bind :8000 personal_website.wsgi:application
The output is:
[arturocuya#localhost personalwebsite]$ gunicorn --chdir personal-website --bind :8000 personal_website.wsgi:application
[2018-09-09 11:49:02 -0500] [5161] [INFO] Starting gunicorn 19.6.0
[2018-09-09 11:49:02 -0500] [5161] [INFO] Listening at: http://0.0.0.0:8000 (5161)
[2018-09-09 11:49:02 -0500] [5161] [INFO] Using worker: sync
[2018-09-09 11:49:02 -0500] [5165] [INFO] Booting worker with pid: 5165
And it works (kinda, configuration for static files is yet to be done)
The problem is that when I run the Docker container with sudo docker-compose up, I get 502 Bad Gateway
I'm suspecting that the problem is how I use the ports but I don't really understand how it should be done.
This is my folder structure
.
├── config
│   └── nginx
│   └── conf.d
│   └── local.conf
├── docker-compose.yml
├── Dockerfile
└── personal-website
└── manage.py
Dockerfile
# Start from an official image
FROM python:3.6
# The following is an arbitrary location choice
RUN mkdir -p /opt/services/personalwebsite/src
WORKDIR /opt/services/personalwebsite/src
# Copy the project code
COPY . /opt/services/personalwebsite/src
# Install dependencies
RUN pip install django gunicorn Pillow
# Expose Port 8000
EXPOSE 8000
# Define the default command to run when starting the container
CMD ["gunicorn", "--chdir", "personal-website", "--bind", ":8000", "personal_website.wsgi:application"]
docker-compose.yml
version: '3'
services:
personalwebsite:
build: .
volumes:
- .:/opt/services/personalwebsite/src
networks:
- nginx_network
nginx:
image: nginx:1.13
ports:
- 8000:80
volumes:
- ./config/nginx/conf.d:/etc/nginx/conf.d
depends_on:
- personalwebsite
networks:
- nginx_network
networks:
nginx_network:
driver: bridge
config / nginx / conf.d / local.conf
# first we declare our upstream server, which is our Gunicorn application
upstream personalwebsite_server {
# docker will automatically resolve this to the correct address
# because we use the same name as the service: "personalwebsite"
server personalwebsite:8000;
}
# now we declare our main server
server {
listen 80;
server_name localhost;
location / {
# everything is passed to Gunicorn
proxy_pass http://personalwebsite;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $host;
proxy_redirect off;
}
}
I also made sure to modify ALLOWED_HOSTS inside the Django project's settings.py
ALLOWED_HOSTS = ['127.0.0.1', '149.248.5.164', '0.0.0.0']
Edit 1:
As someone suggested in the comments, I accessed the Nginx container with sudo docker-compose exec nginx bash and then did curl personalwebsite:8000. I got a DISALLOWED HOST error so I added personalwebsite to the allowed hosts in settings.py then I tried to curl again and the output was the HTML of my page, which is fine.
That seemed to do the trick inside the container because the output was the HTML of my page. But then I did sudo docker-compose up and i got 502 Bad Gateway again. The exact output was:
[arturocuya#localhost personalwebsite]$ sudo docker-compose up
[sudo] password for arturocuya:
Starting personalwebsite_personalwebsite_1 ... done
Starting personalwebsite_nginx_1 ... done
Attaching to personalwebsite_personalwebsite_1, personalwebsite_nginx_1
personalwebsite_1 | [2018-09-10 02:07:12 +0000] [1] [INFO] Starting gunicorn 19.9.0
personalwebsite_1 | [2018-09-10 02:07:12 +0000] [1] [INFO] Listening at: http://0.0.0.0:8000 (1)
personalwebsite_1 | [2018-09-10 02:07:12 +0000] [1] [INFO] Using worker: sync
personalwebsite_1 | [2018-09-10 02:07:12 +0000] [10] [INFO] Booting worker with pid: 10
nginx_1 | 172.26.0.1 - - [10/Sep/2018:02:07:17 +0000] "GET / HTTP/1.1" 502 576 "-" "Mozilla/5.0 (X11; Fedora; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.79 Safari/537.36" "-"
nginx_1 | 2018/09/10 02:07:17 [error] 8#8: *1 connect() failed (111: Connection refused) while connecting to upstream, client: 172.26.0.1, server: localhost, request: "GET / HTTP/1.1", upstream: "http://172.26.0.2:80/", host: "0.0.0.0:8000"
nginx_1 | 2018/09/10 02:07:18 [error] 8#8: *1 connect() failed (111: Connection refused) while connecting to upstream, client: 172.26.0.1, server: localhost, request: "GET /favicon.ico HTTP/1.1", upstream: "http://172.26.0.2:80/favicon.ico", host: "0.0.0.0:8000", referrer: "http://0.0.0.0:8000/"
nginx_1 | 172.26.0.1 - - [10/Sep/2018:02:07:18 +0000] "GET /favicon.ico HTTP/1.1" 502 576 "http://0.0.0.0:8000/" "Mozilla/5.0 (X11; Fedora; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.79 Safari/537.36" "-"

Answer 1

Your Nginx configuration should be
upstream personalwebsite {
server personalwebsite:8000;
}
# now we declare our main server
server {
listen 80;
server_name localhost;
location / {
# everything is passed to Gunicorn
proxy_pass http://personalwebsite;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $host;
proxy_redirect off;
}
}
Is your Nginx service is running inside the container?
Please hit the below command inside the Nginx container and let me know the output
curl -I localhost:80

Answer 2

It's very easy to understand, your proxy_pass URL and upstream keyword should be the same
For deep diving into Nginx upstream configuration go through the Link