React router with nginx is throwing 404 page not found - nginx

When we try direct urls like localhost/page1 nginx throwing me 404 page not found.
we are using react-router, webpack and nginx.
in nginx config we tried
location /{
try_files $uri index.html;
}
location /{
try_files $uri $uri/ =404;
}
location /{
try_files $uri $uri/ index.html;
}
here is my webpack configuration
devServer: {
historyApiFallback: true,
host : '0.0.0.0'
},
but nothing has worked,
Am I missing anything here?

Try this
location / {
try_files $uri /index.html;
}

Related

how to configure cache response header for root path only?

i am using nginx for static files and want that all files should be cached by browser, but not index.html. Tried following config but i get cache response header for index.html also.
how can i change config?
server{
location = / {
try_files $uri $uri/ =404;
}
location / {
try_files $uri $uri/ =404;
add_header 'Cache-Control' "public, max-age=3600";
}
}
To understand the logic of try_files $uri $uri/ ... directive (and the whole nginx behavior) I recommend you to read this answer at ServerFault. The essential thing is
The very important yet absolutely non-obvious thing is that an index directive being used with try_files $uri $uri/ =404 can cause an internal redirect.
This is what happens with your current config. The $uri/ argument of the try_files directive causes nginx to make an internal redirect from / to /index.html, and that URI in turn is processed by the location / { ... }, not the location = / { ... }! To achieve what you want you can use
location = /index.html {
try_files $uri $uri/ =404;
}
location / {
try_files $uri $uri/ =404;
add_header 'Cache-Control' "public, max-age=3600";
}
Moreover, since the try_files $uri $uri/ =404; is default nginx behavior, you can further simplify it to
location = /index.html {}
location / {
add_header 'Cache-Control' "public, max-age=3600";
}

Getting 500 internal error on redirect rule of alias in nginx

I am newbie to nginx server. I am getting stuck in URL redirection. I have following lines to default file.
server {
listen 80;
root /home/ubuntu/web/server/current/public;
index index.php index.html index.htm index.nginx-debian.html;
server_name _;
error_log /home/ubuntu/web/error.log info;
location / {
# try_files $uri $uri/ /index.php?$query_string;
# try_files $uri $uri/ =404;
}
rewrite ^/web/(.*) /web/;
location /web/ {
alias /home/ubuntu/web/client/web/;
# try_files $uri $uri/ index.html;
}
location ~ \.php$ {
include snippets/fastcgi-php.conf;
fastcgi_pass unix:/var/run/php/php7.2-fpm.sock;
}
location ~ /\.ht {
deny all;
}
}
what I expect from above rewrite rule is - all URLs like - http://example.com/web/login, http://exmpale.com/web/dashboard will be redirected to /home/ubuntu/web/client/web/ and the default page to hit is index.html file.
When I open the error log file then i found error like -
rewrite or internal redirection cycle while internally redirecting to "/web/index.php", client: ip_address, server: _, request: "GET /web/ HTTP/1.1", host: "ipaddress"
What i am doing wrong here.
Answer credit goes to #RichardSmith, he provided possible error which is in right direction. I figure out my mistake in nginx rewriting rule.
rewrite ^/web/(.*) /web/;
location /web/ {
alias /home/ubuntu/web/client/web/;
# try_files $uri $uri/ index.html;
}
Instead of above I should have following-
rewrite ^/web/(.*) web/;
location web/ {
alias /home/ubuntu/web/client/web/;
# try_files $uri $uri/ index.html;
}
Server consider path as absolute whenever / placed before web. Thus rewrite statement tries to redirect to fallback file which is not existed in absolute path. Eventually, rewrite statement makes never ending loop.

Configuring multiple sites on nginx server

I would like to configure multiple websites on my nginx server. My configuration under /etc/nginx/sites-enabled/default is as below :
server {
listen 80 default_server;
listen [::]:80 default_server;
server_name _;
root /var/www/html/MyWebsite;
location / {
try_files $uri $uri/ =404;
}
location /admin {
alias /var/www/html/MyWebsiteAdmin;
try_files $uri $uri/ =404;
}
}
My website is deployed at www.mywebsite.com. I am able to access www.mywebsite.com but not able to access www.mywebsite.com/admin due to few errors like, it cannot load js and css files eg: www.mywebsite.com/inline.bundle.js, www.mywebsite.com/theme.css etc. So, It is trying to access js and css files from www.mywebsite.com but not from www.mywebsite.com/admin/inline.bundle.js. How can i resolve this issue?
/admin are folder then you not need
location /admin {alias /var/www/html/MyWebsiteAdmin;try_files $uri $uri/ =404;}
now /admin is like www.mywebsite.com/index.php/admin then you have to add rewrite rule of index.php
location / {index index.html index.php;try_files $uri $uri/ #handler;}location #handler { rewrite / /index.php; }

Nginx: Unable to run multiple site in single URL

In My application i have 3 sites - User frontend , Admin panel and Splash page .I want to run User frontend in localhost:8080 , Admin panel in localhost:8080/admin and splash in localhost:8080/splash
To run this all i used the following configuration:
server {
listen 8080;
server_name localhost;
root /home/ajit/git/univisior;
location / {
alias /home/ajit/git/univisior/FrontEnd/dist/;
index index.html;
try_files $uri $uri/ /index.html;
}
location /admin{
alias /home/ajit/git/univisior/admin/dist/;
index index.html;
try_files $uri $uri/ index.html;
}
location /splash {
alias /home/ajit/git/univisior/Splash/dist/;
index index.html;
try_files $uri $uri/ /index.html;
}
location /api {
proxy_pass http://localhost:3000/api;
}
}
The issue with this configuration is this
When i am opening admin site (localhost:8080/admin) i am getting error
VM189:1 Uncaught SyntaxError: Unexpected token <
but when i am running admin site with single site configuration it works fine , nginx config is pasted below:
server {
listen 9010;
server_name localhost;
root /home/ajit/git/univisior/admin/dist;
index index.html index.htm;
location / {
index index.html;
try_files $uri $uri/ /index.html;
}
location /api {
proxy_pass http://localhost:3000/api;
}
location /static {
alias /opt/univisor;
}
}
With splash page i am unable to get images.splash also works fine if i am running this with single site configuration just like admin.
User front is working fine but i am facing issue with admin and splash.can anybody help me out of this problem.
Thanks
Remove the trailing / from your alias directives:
location / {
alias /home/ajit/git/univisior/FrontEnd/dist/;
index index.html;
try_files $uri $uri/ /index.html;
}
location /admin{
# alias /home/ajit/git/univisior/admin/dist/;
alias /home/ajit/git/univisior/admin/dist;
# index index.html;
# try_files $uri $uri/ index.html;
try_files $url $uri/;
}
location /splash {
# alias /home/ajit/git/univisior/Splash/dist/;
alias /home/ajit/git/univisior/Splash/dist;
# index index.html;
# try_files $uri $uri/ /index.html;
try_files $uri $uri/;
}
I was able to figure out the issue. The issue in both admin and splash page were same. The path for images and scripts files in index.html was written as
<img src="../images/logo.png" alt="logo">
.
.
<script src="../bower_components/jquery/dist/jquery.js"></script>
<script src="../bower_components/angular/angular.js"></script>
When running index file with single site nginx configuration (admin site configuration pasted above in question) both admin and splash works fine. But when running both of them in configuration like this
.
.
location / {
alias /home/ajit/git/univisior/FrontEnd/dist/;
index index.html;
try_files $uri $uri/ /index.html;
}
location /admin{
alias /home/ajit/git/univisior/admin/dist/;
index index.html;
try_files $uri $uri/ index.html;
}
location /splash {
alias /home/ajit/git/univisior/Splash/dist/;
index index.html;
try_files $uri $uri/ /index.html;
}
.
.
makes issue as <img src="../images/logo.png" alt="logo"> will look for url localhost:8080/images/logo.png instead of localhost:8080/admin/images/logo.png same applies for scripts because of this browser is not able to get scripts/images.
Inorder to solve this i replaced ../ from index.html to have a final index.html like this.
<img src="images/logo.png" alt="logo">
.
.
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>

Nginx - sub-url and separated service

It's possible in nginx to do something like:
location /backend {
try_files $uri #proxy_to_app;
}
location /{
try_files $uri #proxy_to_frontend;
}
It works when I go to /backend but if I go to /backend/something_more I'm redirected to /something_more

Resources