Hello I am having the same issue here, I have tried everything I have found online. The only thing loading is the HTML. I was running it on my dev PC with whitenoise, DEBUG disabled, everything works properly. Then I uploaded it to a Ubuntu server on the cloud and configured it with gunicorn and nginx. The website runs, just not loading the images, css and js files (static files). I don’t know what else to do.
in the ubuntu VPS
Static files are living at /var/www/site/static/website
Ran the collectstatic and moved all static files to the above location
First, a side note: When you’re posting code (or config files) here, please enclose the code between lines of three backtick - ` characters. This means you’ll have a line of ```, then your code, then another line of ```. This forces the forum software to keep your code properly formatted.
You say:
However, you show:
as:
But then you have:
additionally, you show:
You really don’t want this. You want to ensure that your media files are stored in a different directory than your static files.
Also, look at your nginx error log - it’ll show you what’s trying to be retrieved.
I removed the location /media/ as I only need static files. I fixed the location /static to the below inside the static folder I created a folder website for the app. and in my html code I have the static coded like in the below. it works beautifully with whhitenoise on a Windows PC, but when using a Linode ubuntu VPS with nginx it does not server the css, js and images.
changed static files location
root /home/user/project/static/;
}
HTML static <link href="{% static 'website/css/style.css' %}" rel="stylesheet" />
(Typically, I recommend that STATIC_ROOT reside in a non-home directory, such as /var/www/html. By default, that directory is usually assigned to group www-data, but owned by the account used to run collectstatic. There are many ways to handle this, this is just one way.)
Thank you for the responses. I am new at this and still trying to figure it out.
I moved the static folder where all the css, js and images to /var/www/site/static, I then ran manage.py collectstatic and gave the prompt that the static files were moved. restarted nginx but same thing. Below is my settings.py static file config. I am still using whitenoise, not sure if this can be causing something to it. WTH am I doing wrong.
okay got most of it to work by placing the entire project on /var/ww/
but still some of the images are not serving. I think is a permission issue. Going to looking into it more.
ok, moved the project back to /home/username/project. moved static files(css, js and images) to /var/www/sitename/static. www-data has full permission to /var/www/sitename and /home/username/project. still missing a lot of images.
Still, no. Your web server (nginx) has no need to have access to your source code at all. It communicates with your project through the socket file to your wsgi container, it does not access files directly.
What does your error log look like for the missing files? That should always be your first place to look.
And what is the full directory path for those files you listed?
Show the commands you’ve issued and the output that you get from those commands. (Copy/paste the contents of the terminal window into your post, surrounded by lines of the three backtick - ` characters.)
Show the permissions for those files (ls -l) and for each directory up to (and including) /var/www.
ls -l /var/www/
drwxr-xr-x 2 root root 4096 Nov 18 05:26 html
drwxr-xr-x+ 3 www-data www-data 4096 Nov 22 14:56 kas
ls -l /var/www/kas/
drwxr-xr-x+ 4 www-data www-data 4096 Nov 22 04:22 static
ls -l /var/www/kas/static/
drwxr-xr-x+ 5 www-data www-data 4096 Nov 22 04:22 admin
drwxr-xr-x+ 6 www-data www-data 4096 Nov 22 04:22 website
ls -l /var/www/kas/static/website/
drwxr-xr-x+ 2 www-data www-data 4096 Nov 22 04:22 css
drwxr-xr-x+ 2 www-data www-data 4096 Nov 22 04:22 fonts
drwxr-xr-x+ 2 www-data www-data 4096 Nov 22 04:22 images
drwxr-xr-x+ 2 www-data www-data 4096 Nov 22 04:22 js
ls -l /var/www/kas/static/website/images/
-rw-rw-r-- 1 www-data www-data 1727 Nov 22 04:22 SS-10.png
-rw-rw-r-- 1 www-data www-data 876 Nov 22 04:22 SS-11.png
-rw-rw-r-- 1 www-data www-data 1547 Nov 22 04:22 SS-12.png
-rw-rw-r-- 1 www-data www-data 1136 Nov 22 04:22 SS-13.png
-rw-rw-r-- 1 www-data www-data 1066 Nov 22 04:22 SS-14.png
-rw-rw-r-- 1 www-data www-data 1463 Nov 22 04:22 SS-15.png
-rw-rw-r-- 1 www-data www-data 682 Nov 22 04:22 SS-16.png
-rw-rw-r-- 1 www-data www-data 863 Nov 22 04:22 SS-17.png
-rw-rw-r-- 1 www-data www-data 2493 Nov 22 04:22 SS-18.png
-rw-rw-r-- 1 www-data www-data 3011 Nov 22 04:22 SS-19.png
-rw-rw-r-- 1 www-data www-data 1457 Nov 22 04:22 SS-1.png
-rw-rw-r-- 1 www-data www-data 3051 Nov 22 04:22 SS-20.png
-rw-rw-r-- 1 www-data www-data 2781 Nov 22 04:22 ss-21.png
-rw-rw-r-- 1 www-data www-data 1646 Nov 22 04:22 ss-22.png
there are a lot more images with the same permissions, but I didn’t want to have a long post.
nginx erro log
[error] 10623#10623: *122 open() "/var/www/kas/static/website/images/ss-18.png" failed (2: No such file or directory),
[error] 10622#10622: *123 open() "/var/www/kas/static/website/images/ss-16.png" failed (2: No such file or directory)
etc
I had the same problem with my flask app when i was trying deployement and i solved it by changing the user in /etc/nginx/nginx.conf to your current user. user www-data; by user your_username;
