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)
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.
I am new to Nginx but I managed to install Drupal on windows 8 machine. I just noticed that this URL(http://localhost:8080/drupal/) spits out error message 403 Forbidden. If I mutate that URL a bit by including the index(http://localhost:8080/drupal/index.php) file then it works as expected. My question is this:
How could I configure Nginx so that I wont get error message when I go to http://localhost:8080/drupal/?
Depending on your configuration, an index directive will encourage nginx to look for specific files when encountering a directory:
index index.php;
For a more specific rule, to single out that one path and map it to the controller, you could use an exact match location directive:
location = /drupal/ { rewrite ^ /drupal/index.php last; }
See this and this for more.
I am trying to execute cgi script on Nginx. In nginx.conf file, I added a location directive such as below:
location /cgi-bin{
root cgi-bin;
index index.cgi;
}
When I try to connect to http://example.com/cgi-bin/index.cgi, it says file not found. In error.log, I see the request as "http://example.com/html/cgi-bin/index.cgi.
cgi-bin is not in html folder. The correct path is "http://example.com/cgi-bin/index.cgi
I tried many possibilities for location directive. Either it looks in html/cgi-bin or it does /cgi-bin/cgi-bin/index.cgi. I am not sure why it uses 'cgi-bin' twice
Any suggestions.. I have been trying for hours now!!!