deploying django react on digitalocean with nginx gunicorn

Question

i have bind react build inside django. its working fine on localhost but on server its static files not working. when i run this after activating virtualenv:

gunicorn --bind 64.225.24.226:8000 liveimage.wsgi

its admin panel working without css:

this is my nginx default config:

server {
listen 80;
server_name 64.225.24.226;

access_log off;
location /media/ {
alias /root/liveimage/media/;  # change project_name
 }
location /static {
 autoindex on;
 alias /root/liveimage/build;
}
location / {
    proxy_pass http://127.0.0.1;
    proxy_set_header X-Forwarded-Host $server_name;
    proxy_set_header X-Real-IP $remote_addr;
    add_header P3P 'CP="ALL DSP COR PSAa PSDa OUR NOR ONL UNI COM NAV"';
}

}

my seetings.py:

TEMPLATES = [
{
    'BACKEND': 'django.template.backends.django.DjangoTemplates',
    'DIRS': [os.path.join(BASE_DIR, 'build')],
    'APP_DIRS': True,
    'OPTIONS': {
        'context_processors': [
            'django.template.context_processors.debug',
            'django.template.context_processors.request',
            'django.contrib.auth.context_processors.auth',
            'django.contrib.messages.context_processors.messages',
            'social_django.context_processors.backends',
            'social_django.context_processors.login_redirect',
        ],
    },
},
]

STATICFILES_DIRS = [os.path.join(BASE_DIR, 'build/static')] 


STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

gunicorn.service:

[Unit]
Description=gunicorn daemon
Requires=gunicorn.socket
After=network.target
[Service]
User=root
Group=www-data
WorkingDirectory=/root/liveimage
ExecStart=/root/venv/bin/gunicorn \
      --access-logfile - \
      --workers 3 \
      --bind unix:/run/gunicorn.sock \
      liveimage.wsgi:application
 [Install]
 WantedBy=multi-user.target

my project is in /root/liveimage and virtualenv at /root/venv i dont know what going wrong

Answer 1

Gunicorn will not show styling.

I found this :

Note: The admin interface will not have any of the styling applied since Gunicorn does not know how to find the static CSS content responsible for this.

From the docs

Answer 2

I don't really know Nginx configuration, but the key here is that Django doesn't serve static files in production, they must be served by Nginx.

On your site, go to your browser's dev tools -> network -> click css, and look at the urls. They must target the static directory generated by manage.py collectstatic and Nginx must serve the content of that directory from those urls.