Nginx Not Serving Image Files - django

Question

I have set up a django website that would be served by Nginx, everything was working perfectly not until images stopped showing recently.
I tried inspecting the possible cause of this strange development using curl and then realized that the Content-Type is not recognized as Content-Type: image/jpeg returns a Content-Type: text/html; charset=utf-8
This behavior looks strange as I have included mime.types in my nginx.conf file.
Below is an example response from curl command
user#server:~$ curl -I https://domain.name/media/upload/image.jpg
HTTP/1.1 200 OK
Server: nginx/1.18.0 (Ubuntu)
Date: Sun, 29 May 2022 00:45:53 GMT
Content-Type: text/html; charset=utf-8
Content-Length: 11392
Connection: keep-alive
X-Frame-Options: DENY
Vary: Cookie
X-Content-Type-Options: nosniff
Referrer-Policy: same-origin
Cross-Origin-Opener-Policy: same-origin
Set-Cookie: csrftoken=T9Z3jrp4dzOAINxo6JzOUyjIGwGYHoc37TZaYsIOmHHyrQUw30vI6ETIAcy66Wnr; expires=Sun, 28 May 2023 00:45:53 GMT; Max-Age=31449600; Path=/; SameSite=Lax
Here is my full nginx.conf file
user www-data;
worker_processes auto;
pid /run/nginx.pid;
include /etc/nginx/modules-enabled/*.conf;
events {
worker_connections 768;
# multi_accept on;
}
http {
##
# Basic Settings
##
sendfile on;
tcp_nopush on;
types_hash_max_size 2048;
# server_tokens off;
# server_names_hash_bucket_size 64;
# server_name_in_redirect off;
include /etc/nginx/mime.types;
default_type application/octet-stream;
##
# SSL Settings
##
ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3; # Dropping SSLv3, ref: POODLE
ssl_prefer_server_ciphers on;
##
# Logging Settings
##
access_log /var/log/nginx/access.log;
error_log /var/log/nginx/error.log;
##
# Gzip Settings
##
gzip on;
# gzip_vary on;
# gzip_proxied any;
# gzip_comp_level 6;
# gzip_buffers 16 8k;
# gzip_http_version 1.1;
# gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
##
# Virtual Host Configs
##
include /etc/nginx/conf.d/*.conf;
include /etc/nginx/sites-enabled/*;
}
#mail {
# # See sample authentication script at:
# # http://wiki.nginx.org/ImapAuthenticateWithApachePhpScript
#
# # auth_http localhost/auth.php;
# # pop3_capabilities "TOP" "USER";
# # imap_capabilities "IMAP4rev1" "UIDPLUS";
#
# server {
# listen localhost:110;
# protocol pop3;
# proxy on;
# }
#
# server {
# listen localhost:143;
# protocol imap;
# proxy on;
# }
#}
Contents of /etc/nginx/sites-enabled/app
# /etc/nginx/sites-enabled
server {
server_name my_server_IP my_server_NAME;
location = /favicon.ico { access_log off; log_not_found off; }
location /static/ {
root /home/user/app;
}
location / {
include proxy_params;
proxy_pass http://unix:/run/gunicorn.sock;
}
listen 443 ssl;
ssl_certificate /path/to/certfullchain.pem;
ssl_certificate_key /path/to/certprivkey.pem;
include /etc/cert-provider/options-ssl-nginx.conf;
ssl_dhparam /etc/cerrt-provider/ssl-dhparams.pem;
}
server {
if ($host = www.domain.name {
return 301 https://$host$request_uri;
}
if ($host = domain.name) {
return 301 https://$host$request_uri;
}
listen 80;
server_name my_server_IP my_server_NAME;
return 404;
}
Note: I am serving this website with gunicorn

Answer 1

I was able to fix this problem by adding new location directive which matches my media files.
In this case my files are uploaded to media
I fixed this by add the following to my server block
location /media/ {
root /home/user/app;
}
Now my new /etc/nginx/sites-enabled/app looks like this.
# /etc/nginx/sites-enabled
server {
server_name my_server_IP my_server_NAME;
location = /favicon.ico { access_log off; log_not_found off; }
location /static/ {
root /home/user/app;
}
location /media/ {
root /home/user/app;
}
location / {
include proxy_params;
proxy_pass http://unix:/run/gunicorn.sock;
}
listen 443 ssl;
ssl_certificate /path/to/certfullchain.pem;
ssl_certificate_key /path/to/certprivkey.pem;
include /etc/cert-provider/options-ssl-nginx.conf;
ssl_dhparam /etc/cerrt-provider/ssl-dhparams.pem;
}
server {
if ($host = www.domain.name {
return 301 https://$host$request_uri;
}
if ($host = domain.name) {
return 301 https://$host$request_uri;
}
listen 80;
server_name my_server_IP my_server_NAME;
return 404;
}