Related

Join the DigitalOcean Community Community

Join 1M+ other developers and:

  • Get help and share knowledge in Q&A
  • Subscribe to topics of interest
  • Get courses & tools that help you grow as a developer or small business owner
 Join Now
my site i down please see http://www.cheri3a.com/ Question Question
How do I get a SSL certificate for my WSGI Flask server so it can send data over HTTPS? Question Question

Question

Configure nginx for nodejs backend and React frontend app

Posted August 16, 2019 62.2k views
NginxNode.jsUbuntu 18.04React

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!

Add a comment
HauntedLollipop
By:
HauntedLollipop

Related

Join the DigitalOcean Community Community

Join 1M+ other developers and:

  • Get help and share knowledge in Q&A
  • Subscribe to topics of interest
  • Get courses & tools that help you grow as a developer or small business owner
 Join Now
my site i down please see http://www.cheri3a.com/ Question Question
How do I get a SSL certificate for my WSGI Flask server so it can send data over HTTPS? Question Question

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.

×
Submit an Answer
5 answers
bobbyiliev August 16, 2019

Hello,

You could try adding something like this to your Nginx server block:

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

Reply Report
pieramodebates September 9, 2020

I had the same configuration. Instead of /graphql I am using /backend for my backend API calls. If I run with my IP/backend it is showing error like Cannot GET. Any idea how to solve it?

Reply Report
swatisrivastava December 9, 2020
[deleted]
Reply Report
leskeylevy December 13, 2020

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?

Reply Report
makante17 January 17, 2021

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.

edited by MattIPv4
Reply Report
  • ldmaia92 February 10, 2021

    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.

    Reply Report

Related

Looking for something else?

Ask a new question Search for more help