Question

How to write server block for React app on port 5000 and api on port 3030

I have a react app on port 5000 – the site works when loaded under http or https. However, when the app makes a call to the api running on port 3030, I get ERR_SSL_PROTOCOL_ERROR in the browser. I’ve tried so many config options, I’ve lost count. For a minute, I thought I should make a new block with a different route for the api, but I don’t think that’s right. Really stuck! If anyone can point me in right direction, I’d be most grateful:

server {
  listen 80;
  listen [::]:80;

  root path_to_build_dir;
  index index.html index.htm;
  server_name mydomain.com;

  ssl_certificate /etc/letsencrypt/live/www.mydomain.com/fullchain.pem;
  ssl_certificate_key /etc/letsencrypt/live/www.mydomain.com/privkey.pem;
  ssl_trusted_certificate /etc/letsencrypt/live/www.mydomain.com/fullchain.pem;
  include /etc/nginx/snippets/ssl.conf;
  include /etc/nginx/snippets/letsencrypt.conf;

  location / {
    proxy_pass http://xxx.xx.xxx.xxx:5000;
  }

  location /authentication {
    proxy_pass http://xxx.xx.xxx.xxx:3030;
  }
}

server {
  listen 443 default_server ssl http2;
  listen [::]:443 ssl http2;

  root path_to_build_dir;
  index index.html index.htm;
  server_name mydomain.com;

  ssl_certificate /etc/letsencrypt/live/www.mydomain.com/fullchain.pem;
  ssl_certificate_key /etc/letsencrypt/live/www.mydomain.com/privkey.pem;
  ssl_trusted_certificate /etc/letsencrypt/live/www.mydomain.com/fullchain.pem;
  include /etc/nginx/snippets/ssl.conf;
  include /etc/nginx/snippets/letsencrypt.conf;

  location / {
    proxy_pass http://xxx.xx.xxx.xxx:5000;
  }

  location /authentication {
    proxy_pass http://xxx.xx.xxx.xxx:3030;
  }
}

Submit an answer

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!

Sign In or Sign Up to Answer

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.

Want to learn more? Join the DigitalOcean Community!

Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in Q&A, subscribe to topics of interest, and get courses and tools that will help you grow as a developer and scale your project or business.

I removed ssl from the port 80, as you suggested. It’s all working now. Sorry for not getting back earlier – I had a real crunch!

Thank you so much!!!

I think port 3030 is responding normally to curl (for instance). Nginx is a great steer. I’ll run experiments, and hopefully fix it. Either way, I’ll post back here. It might take me a day or 2.

I’m very grateful for your advice!

Hi there @cyclops,

One thing that I’m seeing as a possible issue in your current server block is that you have your SSL settings in your port 80 server block. I would recommend trying to remove them and test the reverse proxy again.

On another note, does the API on port 3030 work as normal if you access the port directly?

What you could also check is your Nginx error log for some more information:

  1. tail -100 /var/log/nginx/error.log

Feel free to share the error log here so I could try to advise you further.

Have you tried using the DigitalOcean Nginx Config Tool here:

https://www.digitalocean.com/community/tools/nginx

It has a reverse proxy setting as well.

Regards, Bobby