Nginx Question posted in
The official documentation can be found here.

Nginx With SSL and Frontend + Backend same server

I have a server (VPS Amazon) with Ubuntu. In this server is running my backend node and my frontend React.
My ReactApp is running over nginx and my backend over pm2.

In my react app I defined REACT_APP_BASE_URL: http://[my_ip_server]:4000.
So everything was working OK but after I configured SSL in nginx, I can access my frontend login page but when I send the request, I catch the following errors:

a) If I set https in my REACT_APP_BASE_URL (https://[my_ip_server]:4000), I get this error: ERR_SSL_PROTOCOL_ERROR.
b) If I let with http, I get Mixed Content error

Someone know How I do this work?

Thanks a lot!

My nginx.conf. At moment I’m using just port 80 until I solve my problem.

server {

        #listen [::]:443 ssl ipv6only=on; # managed by Certbot
        #listen 443 ssl; # managed by Certbot

        #ssl_certificate /etc/letsencrypt/live/mysite.com.br/fullchain.pem; # managed by Certbot
        #ssl_certificate_key /etc/letsencrypt/live/mysite.com.br/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

        #if ($host = surveys.alcancenet.com.br) {
        #  return 301 https://$host$request_uri;
        #} # managed by Certbot


        listen 80 default_server;
        listen [::]:80 default_server;
        server_name mysite.com.br;
        #return 404; # managed by Certbot

        root /var/www/html;
        
        # Add index.php to the list if you are using PHP
        index index.html index.htm index.nginx-debian.html;

        
        location / {
                # First attempt to serve request as file, then
                # as directory, then fall back to displaying a 404.
                try_files $uri $uri /index.html;


        }


}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    With help from @Markido. I managed to solve that.

    I added in my backend the default route "/api" and after that I put in my nginx config the following

    location /api {
    proxy_pass http://localhost:4000;
}

    Tks!!!


  2. 0

    First off, there is a difference between running the applications (which is what i assume you are using PS2 for), and exposing them through an nginx proxy.

    It would be most helpful to show us your nginx config file, and also tell us which port your backend runs on (assuming the frontend runs on port 4000).

    Edit;
    Thanks for the config and backend port.

    I don’t think you need to set the create react app base url to https, just set the port and run it on the VPS using PS2.

    I can’t see how you have any proxy at all pointing to 4000 in your config – do you not expose the backend?

    The only exposed part is static html files. The relevant code is;

    root /var/www/html;

# Add index.php to the list if you are using PHP
index index.html index.htm index.nginx-debian.html;


location / {
        # First attempt to serve request as file, then
        # as directory, then fall back to displaying a 404.
        try_files $uri $uri /index.html;
}

    If you want to call the backend using https, or generate your site using some tool with a process which entails HTTPS calls, you need to do so correctly in the frontend. IE something doesn’t add up here.

    The usual approach is;
    Expose the backend and the frontend on port 443 SSL only, using different sub-domains (eg. api.mydomain.com), and then use the proxy in nginx to redirect 443 traffic for each domain to the corresponding local ports (4000, and the frontend port or static files directory more likely).

    Instead of:

    location / {
        try_files $uri $uri /index.html;
}

    Use something like:

    location / {
            proxy_pass http://localhost:4000;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search