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.
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 have these lines in my nginx config:
location /proxy {
proxy_pass http://mysite.ru/;
proxy_redirect http://localhost/app http://mysite.ru/app;
}
Css files from mysite.ru are located in app folder, but it can't be loaded because full path to css file is like this: http://mysite.ru/app/files/css/style.css and it hasn't proxy in path, so it's trying to load http://localhost/app/files/css/style.css, and in the second line I'm trying to redirect this, but nothing works, what means that I'm doing something wrong (I don't know much about Nginx, what I'm trying is to understand)
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/;
}
I want to configure the nginx server in my windows7 PC.For storing images and html files.
I followed up the following steps:
1.I downloaded the nginx-1.2.9 and unziped into c:\ filder.
2. created one folder "data" and within 'data" folder created another two folders say "WWW" and "images".
3.Keeping all images in the "images"folder .and .html file in folder "WWW".
4.Now started the nginx server using command C:\nginx-1.2.9>start nginx
5.Made changes in nginx.conf file.`
#server {
#location / {
# proxy_pass http://127.0.0.0:8080;
#}
#location /images/ {
# root /C:/data/images;
# }
}
Not able to access images and html page.
Please help me to solving this problem. I'm sure doing mistake in config file only..
Thanks in Advance,
Satya
You have commented the configuration data.First remove all the # from your configuration file.Then use the below code inside the server {}
location / {
root data/www;
}
location /images/ {
root data;
}
Note- the location of the static file inside your nginx root folder should be the (root+location) data and the access of the file should be "location" data. e.g from the first location configuration the static file should present inside the folder "data/WWW/" and in the second location configuration the static file should present inside the folder "data/images/".
URL folder inside nginx home path
----- --------------------------
localhost/hello.html data/WWW/hello.html
localhost/images/img1.png data/images/img1.png
I have a very large CDN purge server. It is structured like so
site.com/
site.com/assets/
site.com/assets/products/3424/imgs/large.jpg
site.com/assets/products/3424/imgs/med.jpg
site.com/assets/products/3424/imgs/small.jpg
site.com/assets/products/3424/xml/xml.xml
site.com/assets/products/3424/swf/swfvideo.jpg
site.com/assets/products/3424/html5/video.ogg
site.com/assets/products/3424/mp3/mp3.jpg
and so on.. there are large directories. I was wondering if I can disable ALL access to the directory listings /assets/, /products/, /3424/ - so basically the only people that can see the directories are the CDN purge bot. I want the CDN to be able to cache all the index folders and directories. Users would see forbidden on the directory but obviously they can see files..
I believe this can be accomplished by simply adding lines similar to this in the virtual server's config file:
server {
listen 80; # look familiar?
...
# something similar to this
if ($remote_addr != cdnIP) {
location /assets {
deny all;
}
}
}
Check out the configuration wiki on nginx's site for more about syntax and working with the config files to get them just how you want them.