I got some nginx code from Question which makes my proxy work, but I’m not sure what it’s actually doing, except that it passes the request to the proxy?
My code is:
upstream my_upstream {
server 127.0.0.1:8080;
keepalive 64;
}
server {
root /var/www/myurl.com;
index index.html index.htm index.nginx-debian.html;
server_name url.com www.myurl.com;
location / {
root /var/www/myurl.com;
try_files $uri /index.html;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_set_header X-NginX-Proxy true;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection “upgrade”;
proxy_max_temp_file_size 0;
proxy_pass http://my_upstream/;
proxy_redirect off;
proxy_read_timeout 240s;
}
listen [::]:443 ssl ipv6only=on; # managed by Certbot
listen 443 ssl; # managed by Certbot
ssl_certificate /etc/letsencrypt/live/myurl.com/fullchain.pem; # managed by Certbot
ssl_certificate_key /etc/letsencrypt/live/myurl.com/privkey.pem; # managed by Certbot
include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
The trouble is, when I try to use internal app routes like myurl.com/about from the url bar, the server returns 404.
I tried
try_files $uri $uri/ =404;
and I tried putting it at the beginning or the end of the location / block, and I looked at some things along the lines of
proxy_pass http://server:8080$request_uri;
I have read two books on nginx, a lot of documentation and lots of questions about react and nginx, and I still don’t understand what is going on and which part of the process I need to interrupt to tell it to interpret anything after the request header as a react internal route - or how it knows to use the coded routes at that point?
Could anyone explain?
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Heya
The problem you’re seeing arises because the React application is a single-page application (SPA). That means that all the routing is actually handled in the client side JavaScript and not by the server. So when you’re trying to access a path like myurl.com/about, Nginx is trying to find an actual file or directory at that path and serve it, and when it can’t find anything, it returns a 404.
When you type in the URL directly into the browser, a request is made to the server for that path. In the case of a React application served from Nginix, if the path doesn’t exist as a file or directory on the server, it needs to just serve the index.html file and let the React router handle the routing.
This line in your configuration: try_files $uri /index.html; is intended to fix this. It tells Nginx that for any path, it should first try to serve a file or directory with that name, and if it can’t find one, it should serve the index.html file.
However, since you’ve added the proxy_pass directive after that, Nginix is trying to proxy the request to the upstream server instead of serving the index.html.
The key is to ensure that for all routes that do not correspond to actual files on the server, you fall back to serving the index.html file and let the React Router take care of the rest.
Try modifying your location / block as below:
location / {
root /var/www/myurl.com;
try_files $uri $uri/ /index.html;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_set_header X-NginX-Proxy true;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection “upgrade”;
proxy_max_temp_file_size 0;
proxy_pass http://my_upstream/;
proxy_redirect off;
proxy_read_timeout 240s;
}
This will attempt to resolve the request to a file or directory, and if it doesn’t find a match, it’ll serve the index.html page.
One more thing you have to ensure is that your React application’s router is using Browser History. If it’s using Hash History, then the URLs will have a # symbol, and those won’t be routed correctly by this setup.
Become a contributor for community
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.
DigitalOcean Documentation
Full documentation for every DigitalOcean product.
Resources for startups and SMBs
The Wave has everything you need to know about building a business, from raising funding to marketing your product.
The developer cloud
Scale up as you grow — whether you're running one virtual machine or ten thousand.
Get started for free
Sign up and get $200 in credit for your first 60 days with DigitalOcean.*
*This promotional offer applies to new accounts only.