使用nginx + gunicorn服务在django部署中未显示的媒体

Question

I am deploying a django app in a VPS (debian 9) using Nginx and gunicorn service. Everything works as expected but images uploaded by the user in media file are not displayed, 404 (not found). When I use Debug=True images are displayed, Static file works correctly in development and production.

To run this app I have created a webuser without sudo rights and a group called webapps. Since it seems that nginx can't see the media I have changed the group to www-data, but still, it doesn't work. There is a similar issue here but without an accepted answer. Any help will be much appreciated.

Bellow some important configurations:

(web_env) webuser@:~/web_project$ ls -la
total 72
drwxrwxr-x 10 webuser www-data  4096 Jun 11 20:30 .
drwxr-xr-x  3 webuser webapps   4096 Jun 10 17:15 ..
drwxr-xr-x  6 webuser webapps   4096 Jun 10 17:15 blog
-rw-r--r--  1 webuser webapps    655 Jun 10 17:15 environment.yaml
drwxr-xr-x  2 webuser webapps   4096 Jun 10 17:15 .idea
drwxr-xr-x  2 webuser webuser   4096 Jun 11 17:28 logs
-rwxr-xr-x  1 webuser webapps    631 Jun 10 17:15 manage.py
drwxrwxr-x  3 webuser www-data  4096 Jun 10 17:15 media
-rw-r--r--  1 webuser webapps  14417 Jun 10 17:15 posts.json
-rw-r--r--  1 webuser webapps    229 Jun 10 17:15 README.md
-rw-r--r--  1 webuser webapps    161 Jun 10 17:15 requirements.txt
drwxrwxr-x  2 webuser www-data  4096 Jun 19 13:47 run
drwxrwxr-x  4 webuser www-data  4096 Jun 11 16:31 static
drwxr-xr-x  5 webuser webapps   4096 Jun 16 12:12 users
drwxr-xr-x  3 webuser webapps   4096 Jun 19 15:52 web_project

Gunicorn service in /etc/systemd/system/gunicorn.service

[Unit]
Description=gunicorn daemon
After=network.target

[Service]
User=webuser
Group=www-data
WorkingDirectory=/home/webuser/DjangoProjects/web_project
ExecStart=/home/webuser/.conda/envs/web_env/bin/gunicorn \
      --access-logfile - \
      --workers 3 \
      --bind 
unix:/home/webuser/DjangoProjects/web_project/run/gunicorn.soc$
      web_project.wsgi:application

[Install]
WantedBy=multi-user.target

My nginx configuration

server {
    listen         80;
    server_name    mysite.com;
    client_max_body_size 100M; #to have space to load images
    return         301 https://$server_name$request_uri;
}

server {
    listen         443 ssl;
    server_name    mysite.com www.mysitet;
    client_max_body_size 100M; #to have space to load images

    ssl on;
    ssl_certificate /etc/letsencrypt/live/mysite.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/mysite.com/privkey.pem;

    location /static/ {
            autoindex on;
            alias /home/webuser/DjangoProject/web_project/static/;
    }

    location /media/ {
            autoindex on;
            alias /home/webuser/DjangoProject/web_project/media/;
    }

    location / {
            include proxy_params;           
            proxy_pass http://unix:/home/webuser/DjangoProjects/web_project/run/gunicorn.sock;

    }
}

Some parts of my settings.py

import os
import json

with open('/etc/config.json') as config_file:
    config = json.load(config_file)

BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))


SECRET_KEY = config['SECRET_KEY']
DEBUG = False
ALLOWED_HOSTS = ['mysite.com', '198.XX.XX.XXX']

INSTALLED_APPS = [
  'blog.apps.BlogConfig',
  'users.apps.UsersConfig',
  'crispy_forms',
  'django.contrib.admin',
  'django.contrib.auth',
  'django.contrib.contenttypes',
  'django.contrib.sessions',
  'django.contrib.messages',
  'django.contrib.staticfiles',
]

ROOT_URLCONF = 'web_project.urls'

TEMPLATES = [
  {
    'BACKEND': 'django.template.backends.django.DjangoTemplates',
    'DIRS': [
        ''
    ],
    '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',
        ],
    },
  },
]

WSGI_APPLICATION = 'web_project.wsgi.application'

DATABASES = {
  'default': {
    'ENGINE': 'django.db.backends.postgresql',
    'NAME': 'dbname',
    'USER': 'webuser',
    'PASSWORD': 'dbpassword',
    'HOST': 'localhost',
    'PORT': '',
  }
}

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

in urls.py I have added

urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Of course after each change I use to run

sudo systemctl restart nginx
sudo pkill gunicorn
sudo systemctl daemon-reload
sudoo systemctl start gunicorn

EDITED

/var/logs/nginx

2019/06/19 20:17:13 [error] 17420#17420: *53 open() "/home/webuser/DjangoProject/web_project/media/profile_pics/StackOverFlowPicture_TL8URPF.png" failed (2: No such file or directory), client: 109.132.181.209, server: example.com, request: "GET /media/profile_pics/StackOverFlowPicture_TL8URPF.png HTTP/1.1", host: "example.com", referrer: "https://example.com/"
2019/06/19 20:17:17 [error] 17420#17420: *53 open() "/home/webuser/DjangoProject/web_project/media/default.jpg" failed (2: No such file or directory), client: 109.132.181.209, server: example.com, request: "GET /media/default.jpg HTTP/1.1", host: "example.com", referrer: "https://example.com/profile/"

the original picture is StackOverFlowPicture.png but know I have another picture

webuser@:~/DjangoProjects/web_project/media/profile_pics$ ls
StackOverFlowPicture.png  StackOverFlowPicture_TL8URPF.png

Answer 1

Thanks to Ivan Starostin who remarked my typo error DjangoProjects != DjangoProject and my last log error

2019/06/20 11:06:46 [error] 22983#22983: *1 open() "/home/webuser/DjangoProjects/web_project/media/media/profile_pics/StackOverFlowPicture_TL8URPF.png" failed (2: No such file or directory), client: 109.132.217.176, server: example.com, request: "GET /media/profile_pics/StackOverFlowPicture_TL8URPF.png HTTP/1.1", host: "example.com", referrer: "https://example.com/"

I have solved the problem by changing

location /media/ {
        autoindex on;
        alias /home/webuser/DjangoProject/web_project/media/;
}

to

location /media/ {
        autoindex on;
        alias /home/webuser/DjangoProject/web_project;
}

And now the pictures are loaded. Thanks for your help!