Question

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

Posted February 28, 2020 237 views
Nginx

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 ERRSSLPROTOCOL_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;
  }
}

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.

×
3 answers

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:

  • 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

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!

Show answer This answer has been marked as resolved by cyclops.
Submit an Answer