I want to configure nginx to serve static React files, and listen for requests on “mywebsite.com/graphql”, but I am not exactly sure how to do that. Any help is appreciated!
These answers are provided by our Community. If you find them useful, show some love by clicking the heart. If you run into issues leave a comment, or add your own answer to help others.
×Hello,
You could try adding something like this to your Nginx server block:
Question
location / {
# This would be the directory where your React app's static files are stored at
root /var/www/html/;
try_files $uri /index.html;
}
Then, for the Node server you would keep what you have but put it at a different path, like so:
location /graphql {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-NginX-Proxy true;
proxy_pass http://localhost:5000/;
proxy_ssl_session_reuse off;
proxy_set_header Host $http_host;
proxy_cache_bypass $http_upgrade;
proxy_redirect off;
}
With the above you would basically proxies your traffic for /graphql to your Node server on port 5000 and also you would serve your static contents of /var/www/html for your mywebsite.com.
As always make sure to backup your config before making the changes and also run a Nginx config test before restarting Nginx:
nginx -t
If you get Syntax OK then you should be OK to restart Nginx:
systemctl restart nginx
Hope that this helps!
Regards,
Bobby
Hi, Bobby,
Similarly I have the backend raised in the port 5000 locally in the droplet Ubuntu by pm2.
I would like to know how I can configure nginx so that both the backend and the frontend in React which is in /var/www/html are accessible without a port, that is, if I call https://mywebsite.com the frontend is shown and if I call https://mywebsite.com/graphql the backend is redirected.
Thank you
Hi @diegofabrixio,
I believe that in your case you could use the same configuration as I listed above.
That way your frontend would load from the domain https://mywebsite.com directly and your backend would load when you visit the /graphql URL.
Let me know if you have any other questions!
Regards,
Bobby
Hi ,
I also have same issue, its unable to find my api.I tried using ur configuration also Bobby.
I am getting 404 Not Found.
my api is something like
https://www.domainname/api/v1/verifier.
Please guide.
Thanks
I have the same configuration but my /backend for my backend API calls gives CANNOT GET …if I interchange my frontend route from / to /frontend and my backend from /backend to / my backend works but my frontend gives CANNOT Get. Any idea whats wrong?
Hello, I have the issue maping my public IP:3000 to my domain name. the public-IP:port work well when I run the script “npm run dev” each backend and front-end of my react app work perfectly on the browser and I can even access via another PC. But when I run my domain name it doesn’t find the configuration on the server that should map it to the public-IP:3000, but at least it run the default index.html. Front-end running on localhost:3000 and Backend running on localhost:7000
here is the server config:
server {
listen 80;
server_name 64.50.0.125
server_name appname.com;
root /root/reactAppfolder;
location / {
proxy_pass http://localhost:3000;
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;
}
}
I need your expertise to solve my issue.
Hello Matt,
I am a beginner, but I think that you need to get a domain first and set it up in the DNS records inside the droplet.
server{
listen 443 ssl;
listen [::]:443 ssl ipv6only=on;
server_name www.barbeariaanfitriao.tk barbeariaanfitriao.tk;
root /home/deploy/web/build;
index index.html index.htm index.nginx-debian.html;
location / {
try_files $uri /index.html;
}
location /sessions {
proxy_pass http://localhost:3333;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_set_header 'Access-Control-Allow-Origin' '*';
proxy_set_header 'Access-Control-Allow_Credentials' 'true';
proxy_cache_bypass $http_upgrade;
proxy_ssl_session_reuse off;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-NginX-Proxy true;
}
ssl_certificate /etc/letsencrypt/live/barbeariaanfitriao.tk/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/barbeariaanfitriao.tk/privkey.pem;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
include /etc/letsencrypt/options-ssl-nginx.conf;
ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;
add_header Referrer-Policy 'origin';
}
server{
if ($host = www.barbeariaanfitriao.tk) {
return 301 https://$host$request_uri;
} # managed by Certbot
if ($host = barbeariaanfitriao.tk) {
return 301 https://$host$request_uri;
} # managed by Certbot
listen 80;
listen [::]:80;
server_name barbeariaanfitriao.tk www.barbeariaanfitriao.tk;
return 404; # managed by Certbot
}
server{
if ($host = barbeariaanfitriao.tk) {
return 301 https://$host$request_uri;
} # managed by Certbot
server_name www.barbeariaanfitriao.tk barbeariaanfitriao.tk;
listen 80;
return 404; # managed by Certbot
}
server{
if ($host = barbeariaanfitriao.tk) {
return 301 https://$host$request_uri;
} # managed by Certbot
server_name www.barbeariaanfitriao.tk barbeariaanfitriao.tk;
listen 80;
return 404; # managed by Certbot
}
My backend running on port 3333 and frontend on port 3000. But I only pass proxy on backend as you can see, and my call to the api in the frondend it is like this :
import axios from 'axios';
const api = axios.create({
baseURL: 'http://138.197.12.90:3333',
});
export default api;
and in the backend is something like this:
import app from './app';
app.listen(3333);
when I request this route on Insomnia, everything works perfectly, but when I make the request on http://barbeariaanfitriao.tk , I get the error : POST https://138.197.12.90:3333/sessions net::ERRSSLPROTOCOL_ERROR xhr.js:177.
But I already have a valid certificate.
Someone could help me?
Thank You.