nginx how to configure route to html file? - nginx

I have the nginx config:
server {
listen 80 default_server;
listen [::]:80 default_server ipv6only=on;
root /var/www/site/public;
index main.html;
server_name localhost;
location / {
try_files $uri $uri/ =404;
}
At root directory I also have html files:page1.html, page2.html, page3.html.
I would like to configure route mysite.com/services/page1 to file page1.html. etc. How can I do it?
I tried it:
location = /services/page1 { try_files /page1.html;}
But it doesn't work.

If you want to rewrite url only if the file doesn't exist you can use named location in try_files directive.
location /services {
try_files $uri $uri/ #service_pages;
}
location #service_pages {
rewrite ^/services/page([1-3]).html /page$1.html;
}

Related

nginx path based routing

I would like to to route requests based on a path to two different Angular applications. So when i request http://example.com/admin is routes to one app http://example.com/client routes to the second app. I have the following config but all requests are always sent to the nginx default page. Configuration is as follows:
server {
listen 80 default_server;
listen [::]:80 default_server;
server_name _;
location /admin {
root /home/ubuntu/apps/admin/;
index index.html;
try_files $uri $uri/ /index.html?$args;
}
location /client {
root /home/ubuntu/apps/client;
index index.html;
try_files $uri $uri/ /index.html?$args;
}
}
No other confs are in /etc/nginx/sites-enabled and nginx.conf is default post install on Ubuntu. Any help is appreciated.
You were using the wrong value for the root directive. In both locations the correct value for the root directive is /home/ubuntu/apps, which means you can simplify the configuration by using just one root directive by moving it into the server block.
Of course you can use the alias directive - but as the manual states :
When location matches the last part of the directive’s value ... it is better to use the root directive instead.
The other problem is that your try_files statements are pointing to the wrong index.html file.
For example:
server {
listen 80 default_server;
listen [::]:80 default_server;
root /home/ubuntu/apps;
location /admin {
try_files $uri $uri/ /admin/index.html;
}
location /client {
try_files $uri $uri/ /client/index.html;
}
}
Note that server_name _; is not necessary - see the Server Names document.
Also, index index.html; is not necessary being the default value for the index directive.
It appears that you cannot use multiple root directives but instead need to use alias (Configure nginx with multiple locations with different root folders on subdomain). With that, I would still get 404s until I took off $args from the index.html. After that everything worked fine (don't ask how long it took to figure that out). Working config:
server {
listen 80 default_server;
listen [::]:80 default_server;
server_name _;
index index.html;
location /admin {
alias /home/ubuntu/apps/admin;
try_files $uri /index.html =404;
}
location /client {
alias /home/ubuntu/apps/client;
try_files $uri /index.html =404;
}
}

How to configure multiple react projects using nginx?

I have 3 different React projects, pointing to the same IP address with different ports.
Routing works accurately for the first project(default project)
For the other 2, routing works fine if I'm navigating from the very first page of the website.
For an instance, if I'm at some.ip:3000 then I click something and now, I'm at some.ip:3000/page, it works fine
but if I try some.ip:3000/page directly, 404 page is returned.
Following is the nginx configuration - /etc/nginx/sites-available/default
server {
listen 80 default_server;
listen [::]:80 default_server;
server_name <private-IP>;
root /var/www/<project1>;
index index.html index.htm;
location / {
try_files $uri $uri/ /index.html =404;
}
}
server {
listen 3000;
listen [::]:3000;
server_name <private-IP>;
root /var/www/<project2>;
index index.html index.htm;
location / {
try_files $uri $uri/ =404;
}
}
server {
listen 8000;
listen [::]:8000;
server_name <private-IP>;
root /var/www/<project3>;
index index.html index.htm;
location / {
try_files $uri $uri/ /index.html =404;
}
}

Multiple roots nginx

Is it possible to have a suburl that point to a different root? For example:
www.domain.com/ -> /home/ubuntu/project1
www.domain.com/project2 -> /home/ubuntu/project2
I have this configuration at this moment but I'm getting a 404 when resolving domain.com/project2
server {
listen 80;
server_name domain.com;
root /home/ubuntu/project1;
location /project2 {
root /home/ubuntu/project2;
index index.html;
}
location / {
try_files $uri $uri/ /index.html;
}
}
It's because nginx will append the uri to root directive.
In your example config, accessing domain.com/project2 would try to look for a file named project2 in /home/ubuntu/project2 which is not found and return 404.
To solve your problem, try using alias directives.
server {
listen 80;
server_name domain.com;
root /home/ubuntu/project1;
location /project2 {
alias /home/ubuntu/project2;
index index.html;
}
location / {
try_files $uri $uri/ /index.html;
}
}

Nginx redirection from any subfolder to root index.html

Anything put as a subfolder, it will read the domain.com/index.html
Similar to this but in Nginx
Redirect URL non existent subfolder to root
server {
listen 80;
listen [::]:80;
server_name example.com;
root /apt/website/path;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
}

Nginx configuration causing too many redirects

I have a conf file with example.com as the root. In the example.com directory, there is an html, css, img, and js folder. I understand this deviates from the traditional html directory as root. I have tried many different configurations (using regex based on filetypes, variables, etc.) but I always get too many redirect errors. Can anyone help on a good conf file for this type of directory structure? Here is my conf file currently.
server {
listen 80 default_server;
listen [::]:80 default_server;
# return 301 https://$server_name$request_uri;
listen 443 ssl http2 default_server;
listen [::]:443 ssl http2 default_server;
include snippets/ssl-example.com.conf;
include snippets/ssl-params.conf;
server_name www.example.com example.com;
root /var/www/www.example.com/;
index index.php index.html;
client_max_body_size 100m;
error_page 404 = error.html?error=404;
location ~ /.well-known {
allow all;
}
location / {
location ~* \.(html|php)$ {
root html/;
}
location ~* \.css$ {
root css/;
}
location ~* \.js$ {
root js/;
}
location ~* \.(png|jpeg|gif)$ {
root img/;
}
try_files $uri =404;
}
}
Thanks in advance for any help!
Here is the configuration I ended up using:
server {
listen 80 default_server;
listen [::]:80 default_server;
# return 301 https://$server_name$request_uri;
listen 443 ssl http2 default_server;
listen [::]:443 ssl http2 default_server;
include snippets/ssl-example.com.conf;
include snippets/ssl-params.conf;
server_name www.example.com example.com;
root /var/www/www.example.com/;
index index.php index.html;
client_max_body_size 100m;
error_page 404 = /html/error.html?error=404;
location ~ /.well-known {
allow all;
}
location = / {
try_files /html/index.html =404;
}
location / {
location ~* \.(html|php)$ {
try_files $uri /html/$uri =404;
}
location ~* \.css$ {
try_files $uri /css/$uri =404;
}
location ~* \.js$ {
try_files $uri /js/$uri =404;
}
location ~* \.(png|jpeg|gif)$ {
try_files $uri /img/$uri =404;
}
try_files $uri =404;
}
}
My problem was that all of my redirects were using relative pathing (such as try_files html/$uri) instead of absolute pathing from the site root (/html/$uri). This lead to redirects like /html/html/html/...
I thought that if I used an absolute path, it would be absolute to the root of the server, and not the site.
My only issue now is that my parameter on my error page redirect (?error=404) doesn't work with absolute pathing, but that not a huge deal.

Resources