Folks, the default CSS of my Django admin section is not loading (setup uses nginx reverse proxy + gunicorn, OS is the Debian-based Ubuntu).
The following is part of etc/nginx/sites-available/myproject:
location /static/admin {
alias /home/mhb11/.virtualenvs/myenv/local/lib/python2.7/site-packages/django/contrib/admin/static/;
}
That, btw, points to the correct location of django admin's css files, and is written below location /static/ {} snippet (not shown here).
Note that I have tried the root directive instead of alias too, to no avail. Also note that this error pertains solely to django admin static files. The project related static files are working perfectly. Also note that my settings.py file includes 'django.contrib.staticfiles', in INSTALLED_APPS and STATIC_URL = '/static/'.
What am I missing? Please ask for more information in case it is needed.
It may not be significant, but for consistency, your location path and alias path should both end with a / or neither end with a /.
With your current configuration, the server is constructing path names with an embedded //, like /home/mhb11/.virtualenvs/myenv/local/lib/python2.7/site-packages/django/contrib/admin/static//somefile.css.
Try:
location /static/admin/ {
alias /home/mhb11/.virtualenvs/myenv/local/lib/python2.7/site-packages/django/contrib/admin/static/;
}
Related
So i have 3 different angular projects, pj1, pj2 and pj3 which i'm trying to deploy using nginx. The aim is to have the routes as follows:
www.mysite.com/ ---> loads the pj1
www.mysite.com/pj2 ---> loads the pj2
www.mysite.com/pj3 ---> loads the pj3
Folder structure
The folder structure looks like this:
my-projects
pj1
pj2
pj3
Nginx configuration
My nginx configuration file looks like this:
server {
root /usr/share/nginx/my-projects;
location /pj1/ {
autoindex on;
try_files $uri$args $uri$args/ /pj1/index.html;
}
location /pj2/ {
autoindex on;
try_files $uri$args $uri$args/ /pj2/index.html;
}
location /pj3/ {
autoindex on;
try_files $uri$args $uri$args/ /pj3/index.html;
}
location / {
try_files $uri$args /pj1/index.html;
}
}
Angular build config
I am building each project with the following command:
ng build --prod --aot=true --buildOptimizer=true --base-href /pj1/ --deploy-url /pj1/
This is for building the pj1 project as an example, the other ones follow the same pattern.
The problem: Angular images
The images which are in the html are like this, for example:
<img src="assets/img1.jpg" />
It loads correctly, both on server and locally.
However, the images which are referenced in the scss files only load whether on server or locally, depending on how i define their paths.
This path, for example, works perfectly on my local machine, but does not work on the server:
background-image: url(/assets/img1.svg);
And when i change to the following path, i get an error on the cli saying that it could not load the resource:
background-image: url(assets/img1.svg);
Though it works if i put it manually with the inspector of the broswer when running on the server. So it works on the server, but not locally.
I don't know exactly what is causing this problem, perhaps angular is not referencing the correct root since it only goes wrong when i put the "/" at the beginning of the path, however if i don't put this there then it does not work on my local machine. Is there any solution to this? Something that functions both on local machine and server?
I found the solution!
The problem happens due to a weird way that angular handles the paths to images in the css files, as mentioned in this answer here
So what worked for me was to let the paths as absolutes, like the following example:
background-image: url(/assets/img1.svg);
And add the following code to my angular.json file:
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
...
"rebaseRootRelativeCssUrls": true
This makes angular change the root of where the folder assets is going to be searched, so instead of searching for the images of my project one on www.mysite.com/assets/, for example, it will instead search on www.mysite.com/pj1/assets/ which is in fact just what i needed.
I'm using nginx docker engine for a symfony app, and I have some images under /var/www/html/project/ezplatform/files/(.*) that i need to expose them to the public.
I tried to add under my nginx configuration this rewrite config:
rewrite "^/var/www/html/project/ezplatform/files/(.*)" "/app.php" break;
rewrite "^/var/www/html/project/ezplatform/files/(.*)" "/var/www/html/project
/ezplatform/files/$1" break;
But still facing an exception 404 Not Found when I try to access to an available image.
Any idea would be appreciated.
Try adding a location block to your nginx conf, where you define a handle for the images directory, which nginx then uses to retrieve files from the full path. Like:
location /other_images/ {
alias /var/www/html/project/ezplatform/files/;
}
You can link to the images using your 'virtual' folder path:
other_images/example.gif
(So in HTML, <img src = "other_images/example.gif">, or use whatever the symfony syntax is for image links.)
Let me know if this solves the 404 Not Found problem.
I just set up my new vps to hold my website server. It works perfectly fine on my existing vps, but after I put it on the new one, none of the CSS files are loading.
Image here:
Any help is appreciated thanks!
In your server block in there has to be location for static files:
server {
server_name yourhost.com www.yourhost.com;
root /var/www/vhosts/yourhost.com/public/;
...
location /static {
alias /var/www/vhosts/yourhost.com/public/static;
}
}
So that
location /static {
alias /var/www/vhosts/yourhost.com/public/static;
}
has to be properly configured, pointing to the location where your static files are placed.
Then if your css is in file styles.css (or any other file) and is placed on the server as /var/www/vhosts/yourhost.com/public/static/css/styles.css, it will be accessible from /static/css/styles.css in your html.
To see where exactly this is configured, you can start with nginx.conf (normally in /etc/nginx/nginx.conf) and check what other conf files are imported.
Note the path provided is fully up to you, but once it's known it has to be properly configured with the alias in the static location.
My css files named main.css?v=1.0.0 , site.css?=v.1.0 .
how to configure nginx to serve this kind of files(not extension with .css or .js but with a version number)
FYI:
all the files are in the right path and erro message in chrome dev tool console is file not found(404)
Thanks !
When you're trying to access main.css?v=1.0.0 or main.css?v=2.0.0 any webserver will point it to the same file, main.css
.
Well in your situation coud create a separate location for your versioned file, and then use the next code in the nginx config:
location = /main.css {
if ($arg_v) {
rewrite ([0-9]+) /where/maincss/versions/stored/main-$avg_v.css last;
}
// otherwise default main.css
}
The same thing'll be for the any other file
here is my baffling problem:
Everything is fine on my Pinax development machine, but when I moved the files to production, (using nginx webserver + flup) no style sheet is loaded.
I have run
python manage.py build_static
My project, going to server foo.com, lives in /www/foo and all my static files are copied
/www/foo/site_media/static
and here are the relevant parts in sttings.py
PINAX_ROOT = os.path.abspath(os.path.dirname(pinax.file))
PROJECT_ROOT = os.path.abspath(os.path.dirname(file))
PINAX_THEME = "default"
DEBUG = False
MEDIA_URL = "/site_media/"
STATIC_ROOT =
os.path.join(PROJECT_ROOT,
"site_media", "static")
STATIC_URL = "/site_media/static/"
ADMIN_MEDIA_PREFIX =
posixpath.join(STATIC_URL, "admin/")
In nginx's foo.com I have:
location /site_media {
autoindex on;
root /www/foo/;
}
location /static/ {
root /www/foo/site_media/static/;
}
Each time that I try a different tweak,I restart nginx and fcgi (hopefully) :
python /www/foo/manage.py runfcgi host=127.0.0.1 port=7718 pidfile=/www/foo/foocom.pid maxspare=2
There is no specific rules in urls.py about static files. Do I need to add something here?
I have tried literally dozens of different combination of paths, but no chance. Really got frustrated and appreciate your clues.
As a first step, try to load the style sheet URL directly in your browser (open "view source" in the HTML page to get the full URL). Check what error you get - it may be enlightening.