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

【问题标题】：serve react create app and Nodejs app with reverse proxy Nginx使用反向代理 Nginx 服务创建应用程序和 Nodejs 应用程序
【发布时间】：2019-10-23 21:53:45
【问题描述】：

试图让两个应用程序一个反应创建另一个 Nodejs 在 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;

    #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 应用程序正在根目录提供，但 nodejs 应用程序文件未正确提供：

【问题讨论】：

标签： node.js reactjs nginx reverse-proxy

【解决方案1】：

// 请尝试使用此配置。

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

【讨论】：

【解决方案2】：

首先让 Nginx 从它们的构建文件中处理你的 react 静态文件，并重新排序匹配 Nginx 的位置，然后让 nodejs 或 api 服务器稍后捕获 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;
    }
}

【讨论】：