使用反向代理 Nginx 服务反应创建应用程序和 Nodejs 应用程序

Question

Trying to have both apps one react create the other Nodejs run behind Nginx proxy. The followings are my configs:

server {
    listen       443 ssl;
    server_name  site.com;
    ssl_certificate     /etc/site.com.pem;
    ssl_certificate_key /etc/site.com.key;
    ssl_protocols       TLSv1 TLSv1.1 TLSv1.2;
    ssl_ciphers         HIGH:!aNULL:!MD5;

    #charset koi8-r;
    #access_log  /var/log/nginx/host.access.log  main;



    location /nodejs {
        root  /usr/share/nodejs;
        proxy_pass http://my.url.com:3009;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-for $remote_addr;
    }

    location / {
        root  /usr/share/react-create;
        proxy_pass http://my.url.com:3011;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-for $remote_addr;
    }

React app is being served at root but nodejs app files are not being served correctly:

Answer 1

// Please try with this configuration.

upstream nodejs {
  server http://my.url.com:3009; 
}

upstream reactjs {
  server http://my.url.com:3007; 
} 

server {
listen       443 ssl;
server_name  site.com;
ssl_certificate     /etc/site.com.pem;
ssl_certificate_key /etc/site.com.key;
ssl_protocols       TLSv1 TLSv1.1 TLSv1.2;
ssl_ciphers         HIGH:!aNULL:!MD5;

#charset koi8-r;
#access_log  /var/log/nginx/host.access.log  main;

location /node {
    root  /usr/share/nodejs;
    proxy_pass http://nodejs/api;
    proxy_set_header Host $host;
    proxy_set_header X-NginX-Proxy true;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-for $remote_addr;
}

location /react {
    root  /usr/share/react-create;
    proxy_pass http://reactjs;
    proxy_set_header Host $host;
    proxy_set_header X-NginX-Proxy true;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-for $remote_addr;
}

Answer 2

First let Nginx handle serving your react static files form their build file, and reorder the location matching for Nginx and let the nodejs or the api server for later catch for Nginx:

server {
   listen       443 ssl;
   server_name  site.com;
   ssl_certificate     /etc/site.com.pem;
   ssl_certificate_key /etc/site.com.key;
   ssl_protocols       TLSv1 TLSv1.1 TLSv1.2;
   ssl_ciphers         HIGH:!aNULL:!MD5;

   root /path/to/project-base/build-live/;
   index  index.html;

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

   location /api {
      proxy_pass http://myapistream;
      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection 'upgrade';
      proxy_set_header Host $host;
    }
}