Nginx - How to serve static files with upstream model - django

I have running my django application in my ubuntu lxc container at 127.0.0.1:8001 with gunicorn and nginx.
This is nginx conf in host:
upstream django_app {
server 10.0.8.100:8001;
}
server {
listen 80;
server_name mysite.com;
location / {
proxy_pass http://django_app;
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}
And this is nginx conf in container:
server {
listen 80;
location / {
proxy_set_header X-Forward-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_pass http://127.0.0.1:8001;
}
location /static {
alias /opt/static_files/django_app/;
}
}
This configuration is working. I can see my application running from browser, but static files is not loading. I have 404 not found for each static file in browser.
the path /opt/static_files/django_app/ is where all static files collected with collectstatic command.
I could not find a way to serve static files with upstream.
Thank you

/opt/static_files/ should be the same as the STATIC_ROOT setting in your settings.py django file.
Also, change:
location /static {
alias /opt/static_files/django_app/;
}
to:
location /static/ {
alias /opt/static_files/django_app/;
}

Related

CSS files loaded but not rendered Django Rest Framework

I have a Django app with Gunicorn and Nginx deployed on AWS ECS. NGINX can load static files but the page still shows only text.
Nginx:
server {
listen 80;
listen [::]:80;
server_name api.example.com;
location /health {
access_log off;
return 200;
}
proxy_read_timeout 300;
proxy_connect_timeout 300;
proxy_send_timeout 300;
# Main app
location / {
if ($request_method !~ ^(GET|POST|HEAD|OPTIONS|PUT|DELETE|PATCH)$) {
return 405;
}
include /etc/nginx/mime.types;
proxy_pass http://example-api:8000;
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $http_x_forwarded_proto;
proxy_set_header X-Forwarded-Port $http_x_forwarded_port;
}
location /static/ {
autoindex on;
alias /my_app/static/;
}
}
In settings.py
STATIC_URL = '/static/'
STATIC_ROOT = '/my_app/static/'
When I inspect the webpage, all CSS files are loaded, no 404 (It was an issue before but I fixed that). So not sure what else I am missing here.
The UI works fine when running without Nginx and runserver, but on AWS ECS, I use gunicorn.

Nginx (on docker)return 403 Forbiden when trying to get static files

I'm trying to render static and media files using Nginx but i'm always getting 403 forbidden. Some are ssaying that I need to set a USER in nginx.conf file but how ? Need your help.
Dockerfile
FROM nginx:1.19.0-alpine
RUN rm /etc/nginx/conf.d/default.conf
COPY ./nginx/nginx.conf /etc/nginx/conf.d
my nginx.conf file
upstream zandu {
server gunicorn:8000;
}
server {
listen 80;
server_name localhost;
root /app/nginx;
location / {
proxy_pass http://zandu;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $host;
proxy_redirect off;
}
location /static/ {
alias /etc/nginx/staticfiles/;
}
location /media/ {
alias /etc/nginx/media/;
}
}

Getting rid of port in URL for django installation in production

I'm trying for the first time to deploy my Django application on a server but so far I wasn't able to get rid of port in my URL. Right now I'm using Gunicorn with Nginx with the following configuration.
Nginx /etc/nginx/sites-enabled/site.conf
server {
listen 8000;
server_name example.com;
location = /favicon.ico {access_log off;log_not_found off;}
location /static/ {
root /home/webapp/um;
}
location /media/ {
root /home/webapp/um;
}
location / {
include proxy_params;
proxy_pass http://unix:/home/webapp/um/um.sock;
}
}
/etc/nginx/proxy_params
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
Gunicorn /etc/systemd/system/gunicorn.service
Description=gunicorn service
After=network.target
[Service]
User=root
Group=www-data
WorkingDirectory=/home/webapp/um/
ExecStart=/root/um/bin/gunicorn --access-logfile - --workers 3 --bind unix:/home/webapp/um/um.sock um.wsgi:application
[Install]
WantedBy=multi-user.target
Gunicorn binding
gunicorn --bind 0.0.0.0:8000 um.wsgi:application
Changing port 8000 with port 80 in /etc/nginx/sites-enabled/site.conf gives me a 404 on nginx. Using port 8000 I'm able to see the site using http://example.com:8000/myapp but I'm aiming at using http://example.com/myapp as my address.
As a side note, the VPS I'm installing the app on came with Plesk already installed with which I'm also not familiar with. I don't know if Plesk might be interferring in catching traffic from port 80.
Thanks in advance
You just need to listen this server on port 80 instead of 8000
save gunicorn as described
server {
listen 80;
server_name 52.14.64.58 example.com www.example.com;
location = /favicon.ico {access_log off;log_not_found off;}
location /static/ {
root /home/webapp/um;
}
location /media/ {
root /home/webapp/um;
}
location / {
include proxy_params;
proxy_pass http://unix:/home/webapp/um/um.sock;
}
}
52.14.64.58 => is ipv4 of your virtual machine, it could be anything in your case.
Now time to make changes in our django settings
ALLOWED_HOSTS = ['IP_ADDRESS', 'example.com', 'www.example.com']
Now check nginx status then restart gunicorn and nginx . I hope it would work for you.
sudo nginx -t
sudo systemctl restart nginx
sudo systemctl restart gunicorn
Now setup your domain by it's dns settings.
After a bit of struggling, I found the solution. Turns out my config was correct, but there was an nginx config file automatically written by plesk that was catching requests on port 80. The content of such file is
server {
listen 111.111.111.111:80;
location ^~ /plesk-site-preview/ {
proxy_pass http://127.0.0.1:8880;
proxy_set_header Host plesk-site-preview.local;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_cookie_domain plesk-site-preview.local $host;
access_log off;
}
location / {
proxy_pass http://111.111.111.111:7080;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}
server {
listen 111.111.111.111:443 ssl;
ssl_certificate /opt/psa/var/certificates/certWpPLaPv;
ssl_certificate_key /opt/psa/var/certificates/certWpPLaPv;
location ^~ /plesk-site-preview/ {
proxy_pass http://127.0.0.1:8880;
proxy_set_header Host plesk-site-preview.local;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_cookie_domain plesk-site-preview.local $host;
access_log off;
}
location / {
proxy_pass https://111.111.111.111:7081;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
Once I removed that file from inclusion in nginx.conf everything started working. As a suggestion for whoever is facing a similar situation, I would recommend to check what Nginx is processing using the following command
nginx -T

Django swagger ui not accessible on nginx

I have setup Django using nginx, gunicorn and postgres as per below url.
https://www.digitalocean.com/community/tutorials/how-to-set-up-django-with-postgres-nginx-and-gunicorn-on-centos-7
Now I am trying to access swagger ui.
Nginx is up and running however showing default page.
When I run the same project using,
python manage.py runserver myip:8000
and then access the same url I can see actual swagger ui with rest end points.
I am not sure what I am doing wrong here.
Here is what I have added to nginx file.
server {
listen 80;
server_name <myipaddress>;
location = /favicon.ico { access_log off; log_not_found off; }
location /static/ {
root /home/threat-dashboard/backend;
}
location / {
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_pass http://unix:/tmp/backend.sock;
}
}
There was a mistake in sock file path. I corrected it from /tmp/backend.sock to /tmp/backend/backend.sock and it resolved the issue.

django+gunicorn+nginx 404 serving static files

I have django+gunicorn+nginx running on 192.168.1.81:3000. The web app will not serve any static files; it returns a 404 error. This suggests that there is a problem with the nginx virtual server config file. I have tried several solutions offered on stack overflow with no success. What is wrong with the nginx virtual server file?
upstream app_server {
server unix:/home/pi/door_site/gunicorn.sock fail_timeout=0;
}
server {
listen 80;
server_name 192.168.1.81;
client_max_body_size 4G;
access_log /home/pi/door_site/logs/nginx-access.log;
error_log /home/pi/door_site/logs/nginx-error.log;
location /static/ {
alias /home/pi/door_site/static/;
}
location / {
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_redirect off;
if (!-f $request_filename) {
proxy_pass http://app_server;
break;
}
}
}
In Nginx virtual server conf file inside server section you need to add to location sections for Nginx can serve files in /static/ and /media/ folders:
location /media {
alias /path/to/your/folder/media;
}
location /static {
alias /path/to/your/folder/static;
}
After that test Nginx configuration:
sudo nginx -t
and reload Nginx:
sudo nginx -s reload
(or restart - sudo /etc/init.d/nginx restart )
try this config using server root and try_files
upstream app_server {
server unix:/home/pi/door_site/gunicorn.sock fail_timeout=0;
}
server {
listen 80;
server_name 192.168.1.81;
client_max_body_size 4G;
access_log /home/pi/door_site/logs/nginx-access.log;
error_log /home/pi/door_site/logs/nginx-error.log;
root /path/to/root # place your static directories in root i.e /path/to/root/static
location / {
try_files $uri #proxy_to_app;
}
location #proxy_to_app {
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header Host $http_host;
proxy_redirect off;
proxy_pass http://app_server;
}
}
This will try to find your static file and then move onto your app server.
Make sure nginx is running as the right user to access your files and that your static files permissions are correctly set perhaps with:
chmod -R u=rwX,g=rwX,o=rX static_dir
I my case it was a permission issue on static directory and it worked after assigning proper permissions.