I have a static site setup as follows:
location /cool {
alias /var/www/cool/build;
index index.html;
}
This serves the index.html file, but all the files that index.html references fail because they're relative to /. e.g., it's trying to load mydomain.com/styles.css rather than mydomain.com/cool/styles.css.
Rather than rewriting every link on the whole site to not have a preceding /, is there any way I can make nginx treat these links to be relative to /cool?
define root path before location block. Root path will be path of cool folder. By defining this, for every request it will check in cool directory by default.
root /var/www/cool;
location / {
alias /var/www/cool/build;
index index.html;
}
Related
We have a development server with lots of single page apps that also handle routing in the frontend.
Normally for a single page app I would assume you need to configure something like:
location /some/path {
try_files $uri $uri/ /index.html?$args;
}
Now on our development server it is quite a lot of work to re-configure nginx for every small test app people put on there.
I want to:
Serve the file if found
Serve the index.html file if the path is a folder
If not found, go back one folder and try look for index.html and serve that
Try previous step until you find an index.html file
Stop trying when you reach the defined root path e.g. /some/path, if that doesn’t have an index.html, return the folder content
If some sort of while loop is not possible (performance is less critical since it's for development purposes only), I could limit it to up to 6 folders back. That should cover most SPA's.
Example:
Let's say I have a single page app on:
/some/path/my-app
And one goes to:
/some/path/my-app/page1/subpage2/id3
It should try:
/some/path/my-app/page1/subpage2/id3 (no match)
/some/path/my-app/page1/subpage2/id3/index.html (no match)
/some/path/my-app/page1/subpage2/index.html (no match)
/some/path/my-app/page1/index.html (no match)
/some/path/my-app/index.html (MATCH !)
P.S. I'm mainly a front-end developer, my nginx knowledge is very limited.
You can use a named location as the last parameter of a try_files statement to perform an internal rewrite to climb up the directory tree. Nginx will limit this to about 10 iterations before declaring a redirection loop.
For example:
root /path/to/root;
index index.html;
location / {
try_files $uri $uri/ #rewrite;
}
location #rewrite {
rewrite ^/(.+/)?. /$1 last;
}
The index and try_files directives handle looking for index.html, and the rewrite statement truncates the URI by removing one or more characters following a /.
I'm having issues serving pictures with nginx. I originally started with a Django project and I wanted to serve the user uploaded media files via nginx but I wasn't able to get it working no matter what I tried.
So, I've make a second temporary droplet/server and am trying a bare bones setup with no Django project, just Nginx, to see if I can get it to simply serve an index and a couple pictures in a folder called 'media'. Here is the server block:
server {
listen 80;
listen [::]:80;
root /var/www/example.com/html;
index index.html;
server_name 159.89.141.121;
location / {
try_files $uri $uri/ =404;
}
location /media/ {
root /var/www/example.com/media;
}
}
Now, the index.html is served fine but if I try to go to 159.89.141.121/media/testpic.jpg it still doesn't work and returns a 404 error. I'm at a complete loss here, I've tried using alias instead of root, I've tried changing the folder structure and setting all permissions to 777 and changing folder and file ownership, permissions shouldn't be a problem because the index.html works fine with the same permissions; I just cant seem to figure out what I'm doing wrong. The picture is in the folder but nothing I try allows me to access it via the uri. Are there any obvious problems with my server block?
Well I decided to read the documentation and realized that the location block adds to the root directory specified..
So the pathing of
`location /media/ {
root /var/www/example.com/media;
}`
would end up routing example.com/media/testpic.jpg to /var/www/example.com/media/media/testpic.jpg
I've changed the location block to look like this
location /images/ {
root /var/www/example.com/media;
}
and it will now route example.com/images/testpic.jpg to /var/www/example.com/media/images/testpic.jpg
I'm not sure why it didn't work when I tried the alias directive, though...
Id like to serve to different websites based on url user enter.
For example if user will go to
my-domain.pl/ the content will be served from desktop folder
my-domain.pl/desktop the content will be served from desktop folder
my-domain.pl/mobile the content will be served from mobile folder
root
|
|---mobile
| |--- assets
| |---js,css,img
|
|---desktop
|--- assets
|---js,css,img
I tried that in nginx setup file:
server {
root /desktop
location /mobile {
root /mobile
}
location /desktop{
root /desktop
}
}
but it works only for / path, remaining paths return 404
I tried to add try_files $uri index.html but it seems that it returns index.html files for all request for this location e.g. it returns index.html file instead javascript too.
I am absolutely new in setting up nginx so any help will be appreciated.
You need to make use of the alias directive instead of root: see documentation.
server {
root /;
location /desktop {
}
location /mobile {
alias /mobile;
}
}
(don't forget trailing semicolons)
You should avoid specifying root inside location blocks (cf. nginx pitfalls).
Have you tried the following:
have only one root
use rewrite to serve /desktop by default
The config would look like:
server {
root /;
## this should take care of the redirect to /desktop by default:
location = / {
rewrite ^ /desktop/ redirect;
}
## this one below probably doesn't work:
# rewrite ^/$ /desktop/;
}
P.S. I have no access to a machine with nginx right now so I'm not able to check the rewrite syntax. See also this answer.
On our server we have the /var/www/root/html/web/ directory that contains all the code, and a /var/www/root/html/web/front/ that contains our static frontend code.
Our frontend communicates with the code only via REST API calls, which have the /api/ prefix, so all the calls will be accessible via ourdomain.com/api/products/ , ourdomain.com/api/products/45 and so on. We also have an admin running there, on ourdomain.com/admin
When we want to see the actual frontend, we have to go to ourdomain.com/front in the browser, which is of course not what we want.
We have, among other stuff, this in our config:
root /var/www/html/web;
index index.php index.html;
location /front {
# some magic to make sure the /front folder will not be parsed
index nothing_will_match;
autoindex on;
}
However, what we wish is that if you go to ourdomain.com it will load /var/www/html/web/front/ folder as root, and if you go to ourdomain.com/api/* or ourdomain.com/admin/* it will load the /var/www/html/web/ as root. Is that possible?
NOTE: the /var/www/html/web/front/ folder can be moved somewhere else if needed, to /var/www/html/front/ for example
What you need is the alias directive (instead of root) to rewrite the URI:
root /var/www/html/web/front;
index index.php index.html;
location / {
}
location /api {
alias /var/www/html/web/;
}
location /admin {
alias /var/www/html/web/;
}
My first rewrite rule is :
location / {
root E://w/q/__t/q/;
index index.html index.htm;
}
then I request 127.0.0.1/test.js
I can fetch the test.js file in the fold E://w/q/__t/q/
then I update the rewrite rule, I add a /js/ path both in my location and request path:
location /js/ {
root E://w/q/__t/q/;
index index.html index.htm;
}
then I request 127.0.0.1/js/test.js
but the nginx return 404
So what's wrong with my code? How can make it correct?
My nginx version is 1.5.8 and my OS is Windows 7
well, you don't actually use the rewrite command!
With this config, Nginx will look at E://w/q/__t/q/js/test.js when you request 127.0.0.1/js/test.js
So copy your js there, or use a rewrite command to remove the js part in your url.
You didn't update the root, you can either do that or use alias instead of root
location /js/ {
root E://w/q/__t/q/js;
index index.html index.htm;
}
or
location /js/ {
alias E://w/q/__t/q/;
index index.html index.htm;
}
Ps: try to avoid placing index and root inside locations, it's a bad practice, also if you're going to use alias make sure not to use try_files with it