How to spawn two processes in nginx?

Question

Nginx

Deployment problems. I have a VPS and a Full stack application: a NodeJS API and a ReactJS client. Raised the server on nginx, got SSL with the help of certbot. Now I have a full client under HTTPS and a domain name. But in my thoughts, it should have interacted with an api that just works on pm2, it turned out that this is not possible, because the process raised via pm2 works using an insecure protocol and the client gives an error:

xhr.js:210 Mixed Content: The page at 'https://my_domain_name.ru/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://ip:port/'. This request has been blocked; the content must be served over HTTPS.

How to act in this situation? I thought that with the help of nginx, you can raise another (parallel to mine) process, where my API will work on a subdomain and it will all take the form:

https://api.domain_name.ru/   -  API (with ssl)
https://domain_name.ru/  - CLIENT (with ssl)

I don’t understand how to solve this problem, but if I think in the right direction, how can I do it all?

Answer 1

Why all this complexity with subdomains when everything is relatively simple

upstream client-upstream {
    server    0.0.0.0:3000;
    keepalive 15;
}

upstream back-upstream {
    server    0.0.0.0:8000;
    keepalive 15;
}

server {
  listen ${HOST_IP}80;
    server_name ${PROJECT_NAME} www.${PROJECT_NAME};

    server_tokens off;

    root /var/www/prod/public;
    index index.php index.html index.htm;

    location / {
         proxy_pass http://client-upstream;
         proxy_http_version 1.1;
         proxy_set_header Upgrade $http_upgrade;
         proxy_set_header Connection $http_upgrade;
         proxy_set_header Host $host;
    }
    
    location /api {
         proxy_pass http://back-upstream;
         proxy_http_version 1.1;
         proxy_set_header Upgrade $http_upgrade;
         proxy_set_header Connection $connection_upgrade;
    }
}

In this code, pm2 is able to raise both the back and front to nuxt, with a static react bundle, I think it’s even easier
for nuxt to spin on port 3000 back to 8000. When accessing domain.ru/api, nginx proxies to port 8000 in other cases to 3000

Answer 2

One nginx with multiple server sections.

Answer 3

this is called a virtual host.
raise two virtual hosts, in each you raise a proxy for your processes....