Issue with django, react and nginx server with docker
I am new with nginx and trying to understand how its works. I build and dockerize a website using react for the frontend and django for backend and serving both react and django api with nginx. But when I reach localhost which should serve react app, everything works well. The problem appear when I want to access for example localhost/docs or localhost/admin which should be serve by gunicorn and django. I always obtain bad request (400)
In my settings.py I have
ALLOWED_HOSTS = []
ALLOWED_HOSTS.extend(
filter(
None,
os.environ.get('ALLOWED_HOSTS', '').split(' '),
)
)
STATIC_URL = '/static/static/'
MEDIA_URL = '/static/media/'
MEDIA_ROOT = '/vol/web/mediafiles'
STATIC_ROOT = '/vol/web/staticfiles'
my .env file
DB_NAME=dbname
DB_USER=rootuser
DB_PASS=dbpassword
DJANGO_SECRET_KEY=secretkey_for_production_environment
DJANGO_ALLOWED_HOSTS=localhost
Here is docker-compose-prod.yml file
version: "3.9"
services:
db:
image: postgres:13-alpine
container_name: db-prod-c
restart: always
volumes:
- db-prod:/var/lib/postgresql/data
environment:
- POSTGRES_DB=${DB_NAME}
- POSTGRES_USER=${DB_USER}
- POSTGRES_PASSWORD=${DB_PASS}
backend:
build:
context: ./backend
dockerfile: Dockerfile.prod
#restart: always
image: api-prod-i:django-prod
container_name: api-prod-c
user: root
volumes:
- mediafiles:/vol/web/mediafiles
- staticfiles:/vol/web/staticfiles
environment:
- DB_HOST=db
- DB_NAME=${DB_NAME}
- DB_USER=${DB_USER}
- DB_PASS=${DB_PASS}
- SECRET_KEY=${DJANGO_SECRET_KEY}
- ALLOWED_HOSTS=${DJANGO_ALLOWED_HOSTS}
expose:
- 8000
depends_on:
- db
# networks:
# - django-network
frontend:
build:
context: ./frontend
dockerfile: Dockerfile
#restart: always
image: client-prod-i:django-prod
container_name: client-prod-c
volumes:
- react-build:/frontend/build
depends_on:
- backend
proxy:
build:
context: ./webserver
dockerfile: Dockerfile
image: proxy-i
container_name: proxy-c
#restart: always
ports:
- 80:80
volumes:
- staticfiles:/webserver/staticfiles
- mediafiles:/webserver/mediafiles
- react-build:/webserver/buildfiles
depends_on:
- backend
- frontend
# networks:
# - django-network
# networks:
# django-network:
# name: django-network
volumes:
db-prod:
react-build:
staticfiles:
mediafiles:
The configuration of nginx
upstream django {
server backend:8000;
}
log_format custom_json escape=json
'{'
'"time_local":"$time_local",'
'"remote_addr":"$remote_addr",'
'"remote_user":"$remote_user",'
'"request":"$request",'
'"status": "$status",'
'"body_bytes_sent":"$body_bytes_sent",'
'"http_referrer":"$http_referer",'
'"http_user_agent":"$http_user_agent",'
'"request_time":"$request_time"'
'}';
server {
listen 80;
large_client_header_buffers 4 16k;
access_log /var/log/nginx/access.log custom_json;
error_log /var/log/nginx/error.log debug;
#error_log /var/log/nginx/error.log.info info;
#error_log /var/log/nginx/error.log.crit crit;
#error_log /var/log/nginx/error.log.warn warn;
#error_log /var/log/nginx/error.log.error error;
#error_log /var/log/nginx/error.log.alert alert;
#error_log /var/log/nginx/error.log.notice notice;
#error_log /var/log/nginx/error.log.emerg emerg;
location / {
root /webserver/buildfiles;
}
location /static/static/ {
alias /webserver/staticfiles/;
}
location /static/media/ {
alias /webserver/mediafiles/;
}
location /api {
proxy_pass http://django;
}
location /admin/ {
proxy_pass http://django;
}
location /docs {
proxy_pass http://django;
}
}
When I deploy with docker-compose everything works well as follow
api-prod-c sh entrypoint.sh Up 8000/tcp
client-prod-c docker-entrypoint.sh npm r ... Exit 0
db-prod-c docker-entrypoint.sh postgres Up 5432/tcp
proxy-c /docker-entrypoint.sh /run.sh Up 0.0.0.0:80->80/tcp,:::80->80/tcp, 8080/tcp
I tried to change DJANGO_ALLOWED_HOST=localhost in .env file to DJANGO_ALLOWED_HOST=backend since backend is the service name of my django container which is used in upstream but still get bad request (400)
I tried to log nginx error_log and obtain the following
2022/12/21 15:28:20 [notice] 8#8: using the "epoll" event method
2022/12/21 15:28:20 [notice] 8#8: nginx/1.23.3
2022/12/21 15:28:20 [notice] 8#8: built by gcc 12.2.1 20220924 (Alpine 12.2.1_git20220924-r4)
2022/12/21 15:28:20 [notice] 8#8: OS: Linux 5.15.0-56-generic
2022/12/21 15:28:20 [notice] 8#8: getrlimit(RLIMIT_NOFILE): 1048576:1048576
2022/12/21 15:28:20 [notice] 8#8: start worker processes
2022/12/21 15:28:20 [notice] 8#8: start worker process 9
2022/12/21 15:28:20 [notice] 8#8: start worker process 10
2022/12/21 15:28:20 [notice] 8#8: start worker process 11
2022/12/21 15:28:20 [notice] 8#8: start worker process 12
2022/12/21 15:28:20 [notice] 8#8: start worker process 13
2022/12/21 15:28:20 [notice] 8#8: start worker process 14
2022/12/21 15:28:20 [notice] 8#8: start worker process 15
2022/12/21 15:28:20 [notice] 8#8: start worker process 16
{"time_local":"","remote_addr":"","remote_user":"","request":"","status": "","body_bytes_sent":"","http_referrer":"","http_user_agent":"","request_time":""}
{"time_local":"","remote_addr":"","remote_user":"","request":"","status": "","body_bytes_sent":"","http_referrer":"","http_user_agent":"","request_time":""}
{"time_local":"","remote_addr":"","remote_user":"","request":"","status": "","body_bytes_sent":"","http_referrer":"","http_user_agent":"","request_time":""}
{"time_local":"","remote_addr":"","remote_user":"","request":"","status": "","body_bytes_sent":"","http_referrer":"","http_user_agent":"","request_time":""}
{"time_local":"","remote_addr":"","remote_user":"","request":"","status": "","body_bytes_sent":"","http_referrer":"","http_user_agent":"","request_time":""}
{"time_local":"","remote_addr":"","remote_user":"","request":"","status": "","body_bytes_sent":"","http_referrer":"","http_user_agent":"","request_time":""}
I don't know what is going wrong when I want to access my backend.