How can I store images on server and serve them with nginx and django?

I've created a Django app and I'm using Gunicorn and Nginx with it on an Ubuntu server. Nginx serve my static files and it work great for css files and javascript, but I have problem with images. App is my personal blog site and I'm using Django ckeditor for uploading images and writing some text.Everything worked as it should while I was using local server, but when i deploy it on cloud server images are not displayed.

here's my project/app/models.py

from django.db import models
import uuid
from ckeditor_uploader.fields import RichTextUploadingField

# Create your models here.

class Category(models.Model):
    title = models.CharField(max_length=150)
    created = models.DateTimeField(auto_now_add=True)
    id = models.UUIDField(default=uuid.uuid4, unique=True, primary_key=True, editable=False)

    def __str__(self):
        return self.title


class Article(models.Model):
    title = models.CharField(max_length=150)
    description = models.CharField(max_length=150, blank=True, null=True)
    body = RichTextUploadingField(blank=True, null=True)
    profile_image = models.ImageField(null=True, blank=True, default='default.png')
    category = models.ForeignKey(Category, on_delete=models.CASCADE)
    created = models.DateTimeField(auto_now_add=True)
    id = models.UUIDField(default=uuid.uuid4, unique=True, primary_key=True, editable=False)

    def __str__(self):
        return self.title

    class Meta:
        ordering = ['-created']

The code below is in settings.py:

STATIC_URL = '/static/'
MEDIA_URL = '/media/'

STATICFILES_DIRS = [
    BASE_DIR / 'static'
]
 
MEDIA_ROOT = '/var/www/my-website.com/media'
STATIC_ROOT = '/var/www/my-website.com/static'
CKEDITOR_UPLOAD_PATH = 'uploads/'

In project urls.py I add:

urlpatterns = [
    .
    .
    .
    path('ckeditor', include('ckeditor_uploader.urls')),
]

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

I create Nginx config file in /etc/nginx/sites-available/myWebsite and it looks like this:

server_tokens           off;
access_log              /var/log/nginx/my-website.access.log;
error_log               /var/log/nginx/my-website.error.log;

server {
    server_name         .my-website.com;
    listen              80;

    location / {
        proxy_pass              http://localhost:8000;
        proxy_set_header        Host $host;
        proxy_set_header        X-Forwarded-Proto $scheme;
    }

    location /static {
        autoindex on;
        alias /var/www/my-website.com/static/;
    }

    location /media {
        autoindex on;
        alias /var/www/my-website.com/media/;
    }


}

I created directories /var/www/my-website.com/static/ and /var/www/my-website.com/media/
and i run next commands:

sudo chown -cR user:user /var/www/my-website.com/static/
sudo chown -cR user:user /var/www/my-website.com/media/

here's what it looks like when I want to upload image using ckeditor i click on "upload" and "Send it to the Server":

The image does not want to be displayed.

Back to Top