Django static files in live server using nginx - django

I have a live server running django, the address is http://179.188.3.54/ . As you can see, the app works but looks like the static files arent working. Also if I click in any other link, doesnt work.
This website is running without any problems in development version. Im not sure what I should do to fix this problem.
Here is my nginx config file and my settings.py
STATIC_URL = '/static/'
STATIC_ROOT = '/cinegloria/cinegloria/cinegloria/static/'
PS: I tried to run collectstatic ;)
server {
root /usr/share/nginx/www;
index index.html index.htm;
access_log /var/log/nginx/domain-access.log;
server_name 0.0.0.0;
location / {
try_files $uri $uri/ /index.html;
proxy_pass_header Server;
proxy_set_header Host $http_host;
proxy_redirect off;
proxy_set_header X-Forwarded-For $remote_addr;
proxy_set_header X-Scheme $scheme;
proxy_connect_timeout 10;
proxy_read_timeout 10;
proxy_pass http://0.0.0.0:8000/;
}
}
Any ideas or sample code will be appreciated!

Add the static serving to the nginx conf before the / pattern:
location /static {
alias /cinegloria/cinegloria/cinegloria/static/;
}
location / {
...
}
Or set the STATIC_ROOT to the directory under the www root:
STATIC_ROOT = '/usr/share/nginx/www/static'
Or add the symlink from www root to you static dir:
$ ln -s /cinegloria/cinegloria/cinegloria/static /usr/share/nginx/www/static

Add another nginx directive for the static files. Static files should be served by nginx, not the Django server.
location /static/ {
alias /cinegloria/cinegloria/cinegloria/static/;
}
If that still doesn't work, you may need to add the mime type directive. I had to do that yesterday, because for some reason nginx wasn't serving the correct mime type when I used an alias.
As a helpful pointer, whenever you run into problems like this, take a look at your nginx error log and paste the last few lines for debugging. It is located at /var/log/nginx/error.log or a similar path.

Related

Configure Nginx to serve Angular front end, Django Rest Framework backend on same server?

My site's frontend is built with Angular 7, and the back end is built with Django Rest Framework. It's all running via docker-compose, and I'm trying to serve the entire site through NGINX.
The basic premise of my configuration is this:
If the request includes a url with /api/ or /admin/ in it, allow gunicorn to handle the request.
If the url is anything else, send it to the root index.html so that Angular can handle the routing.
The root url / should serve my pre-compiled javascript via the index.html.
With the following Nginx config, I can visit all of the Angular routes. I can visit the admin page and my browsable API. However, when I go to /admin or the browsable API, all of the static files return a 404 error.
Do you see the issue? Thanks!
# urls.py
urlpatterns = [
re_path(r'^favicon\.ico$', favicon_view),
path('api/v1/', include('api.urls'), name='api'),
path('admin/', admin.site.urls),
]
# nginx.conf
upstream my_app {
server django:8000;
}
server {
listen 80;
location /staticfiles/ {
alias /usr/src/app/staticfiles/;
}
location ~ (api|admin) {
proxy_pass http://my_app;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $host;
proxy_redirect off;
}
location / {
root /usr/src/app/staticfiles/;
try_files $uri $uri/ /index.html;
}
}
Your configs are saying that everything available from /api/ or /admin/ are provided by the proxy to my_app. So, you may either ensure that the static files used by those endpoints are available through Django Rest Framework, OR tell NGINX to always try the static files first, then fall back to the my_app proxy.
The first option will involve setting STATIC_ROOT, STATIC_URL, STATICFILES_STORAGE, etc per the Django documentation on static files (link goes to current dev version).
The other option involves collecting the assets used by /api/ and /admin/ in the same location as your Angular assets, and altering your NGINX configuration to look something like this:
# nginx.conf
upstream my_app {
server django:8000;
}
server {
listen 80;
location /staticfiles/ {
alias /usr/src/app/staticfiles/;
}
location / {
root /usr/src/app/staticfiles/;
try_files $uri $uri/ index.html;
location /drf {
proxy_pass http://my_app;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $host;
proxy_redirect off;
}
}
}
This basically says try to look up everything in your Angular staticfiles directory, if it's not found, try looking it up in your DRF application.

NGINX not serving htm files, but serving all other static files

I've been banging away at this for a bit and I'm obviously missing something simple. I have a Django application I'm serving on nginx. All the other static files across the application are being served ok, except for some .htm files that are part of the library for the TinyMCE HTML editor.
The path for the file not being served is:
http://www.myurl.org/static/admin/tinymce/jscripts/tiny_mce/plugins/advlink/link.htm/
The nginx log file states the error is:
"/home/deployer/cmp/cml/static/admin/tinymce/jscripts/tiny_mce/plugins/advlink/link.htm/index.html" is not found (20: Not a directory)"
(Incidentally, I don't know why nginx keeps thinking that file path leads to a directory.)
But, this test file:
http://www.myurl.org/static/admin/tinymce/jscripts/tiny_mce/plugins/advlink/tst.html
is served ok.
My config file is:
upstream app_server_wsgiapp {
server localhost:8000 fail_timeout=0;
}
server {
listen 80;
server_name XX.XXX.X.XX;
access_log /var/log/nginx/XX.XXX.X.XX.access.log;
error_log /var/log/nginx/XX.XXX.X.XX.error.log info;
keepalive_timeout 5;
#nginx serve up static files and never send to the WSGI server
location /static {
include /etc/nginx/mime.types;
autoindex on;
alias /home/deployer/cmp/cml/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_wsgiapp;
break;
}
}
#this section allows Nginx to reverse proxy for websockets
location /socket.io {
proxy_pass http://app_server_wsgiapp/socket.io;
proxy_redirect off;
proxy_buffering 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;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "Upgrade";
}
}
Relevant portions of mime types file:
types {
text/html html htm shtml;
text/css css;
text/xml xml rss;
image/gif gif;
image/jpeg jpeg jpg;
application/x-javascript js;
application/atom+xml atom;
...
}
Any suggestions to get that link.htm to be served?
Update: After trying a few things, I noticed that the nginx error log says: "/home/deployer/cmp/cml/static_proxy/index.html is not found" and the request is coming from: "GET /static_proxy/?u=myurl.org/static/admin/tinymce/jscripts/tiny_mce/plugins/advlink/link.htm
(For the record, this isn't my application, I'm helping a teacher friend migrate off Gondor to Linode after her Dev bailed.)
The static_proxy is coming from the tinymce lib. But, that isn't a problem in dev on my machine. Everything works great there. I tried adding in this location block, but that was just a flailing guess.
location /static_proxy {
autoindex on;
root /home/deployer/cmp/cml;
}
If I change the root directive in the above to
alias /home/deployer/cmp/cml/static;
I get the static directory listing in the pop-up, which seems like an improvement.
I had quite the same issue with Wordpress-Mailpoet-TinyMCE.
After struggling a bit, I noticed all the files ending with .htm or .html were not found. When renaming the same file with a different suffix like .jpg or .gif, it get served successfully.
So I finally add a special NGINX directive allowing htm and html files coming from the mailpoet extension.
Here it is :
# Mailpoet - tinyMCE quick fix
location ~ /wp-content/plugins/wysija-newsletters/js/tinymce/.*\.(htm|html)$ {
add_header Access-Control-Allow-Origin *;
access_log off; log_not_found off; expires 30d;
}
Hope it might help others...
I had an issue getting timymce to work with nginx.
The following link helped me solve the issue. Not sure if it's the best solution but it worked well for what I needed it to do.
https://techvangelist.net/nginx-global-rewrite-issue-js-css-images-not-found/
I was able to get tinymce to work by adding a directive like this...
#tinymce fix
location ~ .(mezzanine|tinymce)/(.+)$ {
try_files $uri $uri/ /$1/$2;
}

Configure Django App as nginx location

I am trying to deploy a Django app along a static html website. The general www.example.com will provide the basic website. The URI /app should then proxy to a Gunicorn WSGI server. The nginx configuration in sites-enabled looks as follows:
upstream gunicorn {
server 127.0.0.1:8000;
}
server {
listen 80 default_server;
listen [::]:80 default_server;
root /var/www/website;
index index.html index.htm index.nginx-debian.html;
server_name _;
location / {
# First attempt to serve request as file, then
# as directory, then fall back to displaying a 404.
try_files $uri $uri/ =404;
}
location /app {
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_redirect off;
proxy_pass http://gunicorn;
}
}
I am getting a 404 error when trying www.example.com/app. It seems the URI gets messed up somehow. The complete URL that is created is http://www.example.com/accounts/login/?next=/app/
Setting up the App alone exactly following this tutorial http://hackedexistence.com/project/raspi/django-on-raspberry-pi.html does work.
Is the setup I am aiming at even possible? And if yes, where is my misunderstanding of the location concept?
You need to set the SCRIPT_NAME header in your location directive.
proxy_set_header SCRIPT_NAME /app;
See this blog post for an example.

Nginx giving 403 code for django static files

I'm trying to deploy my django project. In my django settings, static file settings are like this:
STATIC_URL = '/static/'
STATIC_ROOT = '/root/www/static'
so my static files are in /root/www/static directory, i can see them in the server. My nginx server block is like this:
server{
listen 80;
location /static/ {
root /root/www;
}
location / {
proxy_pass http://127.0.0.1:8000;
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}
when i browse my application with browser, i'm getting
403 - Forbidden
error for static files.
You shouldn't put the static files under /root: that's for files accessible via the root user only.
The problem seems to be with user permissions. You need to change the path that is accessible by the user for which the app is deployed.
The location should look something like this:
location /static {
alias /home/ubuntu/srv/webapps/[app_name]/static;
}
Try this tutorial for more help.

Proper way to serve updated files without user refreshing on nginx

This is a pretty core question. I have a django app that I run in an nginx/gunicorn configuration. Nginx is responsible for proxying to gunicorn, but it also serves the static files of the project directly.
The issue is, when I update the static files, the browser doesn't load the latest version. Sometimes a refresh fixes it, but sometimes it requires clearing the cache. (I should mention I'm using require.js, which does not help).
To alleviate this issue I'm doing this trick:
VERSION = '2.03'
STATIC_URL = '/static/' + VERSION + '/'
STATIC_ROOT = BASE_DIR + '/static/' + VERSION + '/'
This way, when I change static files, I simply bump the version. But for various reasons, I need to stop doing this. Is there a way to configure nginx to better serve updated static files when they are available?
I'm just not sure if the browser or nginx is to blame.
Update: Here's my nginx configuration with the comments removed:
upstream mycoolsite_server {
server unix:/webapps/mycoolsite/run/gunicorn.sock fail_timeout=0;
}
server {
listen 80;
server_name www.mycoolsite.com;
return 301 http://mycoolsite.com$request_uri;
}
server {
listen 80;
server_name mycoolsite.com 42.42.42.42;
client_max_body_size 4G;
access_log /webapps/mycoolsite/logs/nginx-access.log;
error_log /webapps/mycoolsite/logs/nginx-error.log;
location /static/ {
alias /webapps/mycoolsite/site/static/;
}
location /media/ {
alias /webapps/mycoolsite/site/media/;
}
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://mycoolsite_server;
break;
}
}
# Error pages
error_page 500 502 503 504 /500.html;
location = /500.html {
root /webapps/mycoolsite/site/static/;
}
}
You can set expire for the static files in nginx configuration. For example if you don't want to cache css, js and png files. you can define sth. like:
location ~* \.(css|js|png)$ {
expires 0;
break;
}
so they won't been cached. But i assume you are making ./manage.py collectstatic after you change your static files on your repository or dev. environment.