I am deploying my react application on nginx. I am somehow getting some trouble configuring the try_files attribute in nginx in router configuration. the home page route(/) is working perfectly well, clicking the router links to navigate to other pages work well.
But refreshing a page other than homepage, for example blog page route(/blog) I get error page is not working, checking on the address bar it is show /index instead of /blog.
Before using try_files in nginx, the error was 404 the requested path could not be found instead of page is not working.
I am sure there is something I am missing here. How should I go about this?
below is my nginx default code
server {
root /home/project/dist;
index index.html index.htm index.nginx-debian.html;
server_name server-name-here;
location / {
# reverse proxy for server
proxy_pass http://localhost:3000/;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
try_files $uri $uri/ /index.html;
}
}
Related
I was trying to host react as a frontend and rails as backend.
I host rails at http://localhost:3000.
You can see that it is working.
But when I call http://localhost:3000 from react, instead of going to server's localhost, it go to user's localhost.
How can I fix this? I am using Nginx as web server.
I just solved by doing reverse proxy in Nginx.
location / {
try_files $uri /index.html;
}
location /api {
proxy_pass http://localhost:3000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
first location / will find static frontend files and /api will go to localhost:3000.
For example, in my case
this.url='https://yourdomain.com/api/' to access the backend.
Also don't forget all of your backend route to start with 'api/'.
i'm trying to deploy a react app with express on a ubuntu server but I don't think i'm making much headway. I was able to get the entire front end(react) side working, but I can't seem to connect the client to the backend. I made sure to update the "homepage" in the package.json file before building the react app that it'll built with the subdirectory as the root. I have react router dom set up where when I access the url "tools.domain.com/style/{styleNumber}" then it makes a request to the express route "/getStyle".However, I receive a 405 error when trying to make that request. I have express running on port 6000. I'm not too sure if it's something I need to adjust in my nginx default.config file or possibly something in react/express? I've read that it has something to do with nginx not being able to make post requests through static files. Any help would be appreciated!
This is the error I am receiving when trying to make a request to the express route/endpoint:
https://i.stack.imgur.com/SdECo.jpg
Here is my default config file:
server {
listen 80;
root /var/www/home;
server_name tools.domain.com;
location / {
root /var/www/home;
try_files $uri $uri/ index.html;
}
location /app1 {
alias /var/www/app1;
try_files $uri $uri/ /app1/index.html;
}
location ^~ /app2 {
alias /var/www/app2;
try_files $uri $uri/ /app2/index.html;
}
location /getStyle/ {
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Host $host;
proxy_set_header content-type "application/json";
proxy_cache_bypass $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_pass http://localhost:6000/;
}
}
I am serving my static file using nginx(react frontend).
I have used different urls like /login /user /home for each page.
My nginx doesn't redirect these to my index.html file.
I made some changes and now I cannot get my main page either. It returns cannot get /.
This is my nginx.conf file. I am running it on windows. My index.html is inside the build folder. How do I get my nginx to use Router and Link in reactjs, so that I can get the page by referring to the link or through navigation bar?
worker_processes 5;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
server {
listen 80;
server_name ip;
location / {
root /Users/username/projectfolder/build;
index index.html index.htm;
try_files $uri $uri/ index.html;
proxy_pass http://ipaddress:portnumber;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}
}
UPDATE:
I have tried the following configuration
server {
listen some_port;
server_name some_ip;
root C:\\nginx-1.17.1\\build\\;
index index.html index.htm;
location /test/ {
alias C:\\nginx-1.17.1\\build\\;
index index.html index.htm;
try_files $uri \\index.html;
#internal;
#return index;
}
location = /index.html {
# no try_files here
return 502;
}
location / {
#root C:\\Users\\DEV-a0a02yc\\insurance_automation\\build;
try_files $uri $uri\ \index.html?$args;
#try_files $uri/ index.html;
proxy_pass http://some_ip:some_port;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}
In the /test/ url I am getting a blank page and a rewrite/internal redirection error saying :
2019/07/01 09:53:22 [error] 17820#18008: *1 rewrite or internal redirection cycle while internally redirecting to "/favicon.ico\ \index.html\ \index.html\ \index.html\ \index.html\ \index.html\ \index.html\ \index.html\ \index.html\ \index.html\ \index.html\ \index.html"
This is my network tab:
How do I serve my index.html file here to handle redirection when entering this url?
What are the proxy lines for in your configuration?
Shouldn't you either serve from html files or proxy pass to a different address?
I would suggest trying to remove the proxy lines from the configuration.
Also on an unrelated note the proxy_pass line is invalid. The server address "ipaddress" is a far stretch (though not impossible with dns) and the port "portnumber" is definitely invalid.
So the minimum required configuration is the following:
location / {
root /folder/subfolder/build;
try_files $uri /index.html;
}
root defines your react build folder location and try_files defines that nginx should look if the requested file exists, if not it serves the index.html.
I'm trying to run a single react app on a separate port and using proxy pass from nginx to location '/app'
"http://localhost/app" -> React Application
The application is running under PM2 using its generated build with the command: 'pm2 serve build 3002'.
My thought was i do all this tested locally and then will port it to my own domain.
I've swapped 'localhost' for '127.0.0.1' just in case that had anything to do with it.
From online tutorials i've ended up with the following in my nginx "../sites-available/my_domain" file
server {
listen 80;
listen [::]:80;
server_name localhost;
location / {
root /var/www/my_domain/html;
index index.html index.htm index.nginx-debian.html;
try_files $uri $uri/ =404;
}
location /app {
proxy_pass http://localhost:3002;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}
If i type "http://localhost:3002" into the url it works fine however "http://localhost/app" does not work and shows 404 error.
Side-note: "http://localhost" works fine and directs to the index.html stored at root.
I am running a React app on Nginx in production.
If I refresh on any route different that "/" I get "Resource not found".
for example:
Refresh on http://www.aaaa.com will be OK
Refresh on http://www.aaaa.com/bbb/ddd will result in Resource not found.
I searched a lot and tried everything I found including adding try_files $uri $uri/ /index.html;
This is part of my conf file:
upstream ggg_stream {
server ggg.aaa.com:9090 fail_timeout=0;
}
server {
listen 80;
server_name aaa.com;
root /var/www;
location / {
try_files $uri $uri/ /index.html;
}
location /ggg {
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
# Fix the "It appears that your reverse proxy set up is broken" error.
proxy_pass http://ggg_stream/;
proxy_read_timeout 90;
# proxy_redirect http://127.0.0.1:8080 http://34.248.183.236:8080;
# Required for new HTTP-based CLI
proxy_http_version 1.1;
proxy_request_buffering off;
}
}
This server also used as a proxy so it has many stream mappings such as ggg
The site content is located at /var/www
We use React router 4.
Any ideas?
Regards,
Ido