Nginx

Question

----- 第二次尝试 ------

问题和思路还是和下面一样，但是我现在的NGINX是这样的：

    set $QA "http://reactapp-qa:80";
    set $DEV "http://reactapp-dev:80";
    set $PROD "http://reactapp-prod:80";

    location /dev {          

        rewrite ^/dev(.*)$ / break;

        proxy_pass $DEV;

    }

    location /qa {          

        rewrite ^/qa(.*)$ / break;

        proxy_pass $QA;

    }

    #reactapp
    location / {          

        rewrite /(.*) / break;

        proxy_pass $PROD;
    }

我的 / 位置很好

其他位置从应用程序加载 header 和一些页面元素，但不会像 / 位置那样触发 react axios api 调用，因此它们会失败。

我觉得我更接近了，只需要弄清楚 axios 调用发生了什么。

----- 原版 POST ------

问题总结

我们在一个容器中有一个 React 应用程序，在主机的另一个容器中有一个 nginx。

配置现在可以工作了，但我们想让它的工作方式有点不同——我们希望 React 应用程序的三个独立副本在它们自己的容器中，可以从不同的地址访问——但是在理解我们需要做什么时遇到了问题让它发挥作用。

背景

该应用正在 Rancher 1.6 主机中的堆栈中使用 React/Dotnetcore 应用。

我不是 React 开发人员，但可以在星期一与编写应用程序的人交谈！我们也继承了 Nginx，我一直在通过试炼来学习使用它。

配置示例

这是我们当前运行配置的 NGINX 位置块。这一切都很好，如下面的实际和预期结果部分所述：

set $ReactAppDev_url "http://reactapp-development:80";
set $ReactAppQA_url "http://reactapp-qa:80";
set $ReactAppProd_url "http://reactapp-production:80";

location / {          

    rewrite /(.*) / break;

    proxy_set_header Authorization $http_authorization;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Host $server_name;
    proxy_set_header X-Forwarded-Proto https;

    resolver {{DNS_RESOLVER}} valid=30s;
    proxy_pass $ReactAppDev_url;

}

我确定我一开始尝试的可能是错误的方式，但用 /production 替换 / location 块是我的第一次尝试。尽管阅读了一些关于重写模块和位置的文章和 nginx 官方文档，但我真的不认为我理解它们是如何组合在一起的：

set $ReactAppDev_url "http://reactapp-development:80";
set $ReactAppQA_url "http://reactapp-qa:80";
set $ReactAppProd_url "http://reactapp-production:80";

location /production {          

    rewrite /production/(.*) / break;

    proxy_set_header Authorization $http_authorization;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Host $server_name;
    proxy_set_header X-Forwarded-Proto https;

    resolver {{DNS_RESOLVER}} valid=30s;
    proxy_pass $ReactAppProd_url;
}

location /dev {...same as above but dev in rewrite and proxy_pass $ReactAppDev_url}

location /qa {...same as above but qa in rewrite and proxy_pass $ReactAppQA_url}

这导致页面无法正常工作：

[error] 29#29: *5 directory index of "/" is forbidden, client: , server: localhost, request: "GET / HTTP/1.1", host: ""
1/19/2019 8:01:52 PM - - [20/Jan/2019:03:01:52 +0000] "GET / HTTP/1.1" 403 555 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36"

实际和预期结果

以下是用户现在与网站进行交互的方式 - 所有这些功能：

用户点击 https://www.servername.com/，React 应用显示登录页面。
用户输入登录凭证，React 应用程序检测身份
如果身份正确，React 应用会显示 https://www.servername.com/request 和请求数据

我正在努力做到这一点，以便用户可以访问三个 uri 之一，并根据命中的 uri 被路由到不同的内部服务：

用户点击 https://www.servername.com/development> 功能上方的位置块
用户点击 https://www.servername.com/qa> location 块上面的功能，但 proxy_pass 指令使用 ReactAppQA_url 而不是
用户点击 https://www.servername.com/production> location 块上面的功能，但 proxy_pass 指令使用 ReactAppProduction_url 而不是
每个 url 都是应用程序的副本，只是在不同的内部 rancher 服务中；用户输入登录凭据，应用程序检测到身份
如果身份良好，应用程序打开 www.servername。com/request

我不确定这是否在 Nginx 中配置，或者 React 应用程序本身是否需要配置以使用户能够访问 /development、/qa、/production。

任何人都可以就我们如何配置它提供任何建议吗？

Answer 1

我最终放弃了 URI，作为确定用户想要访问三个 'environments' 中的哪一个的方法，而只是使用端口。

这让配置变得简单多了，这样我就可以拥有三个服务器块——一个监听 443（生产），一个监听 8443 端口（qa），一个监听 8444 端口（开发），每个都将用户定向到包含相同应用程序的不同容器。

这是最终版本的精简版：

worker_processes 2;

events {
   worker_connections  8096;
   multi_accept        on;
   use                 epoll;
}

worker_rlimit_nofile 40000;

http {

    include    /etc/nginx/mime.types;
    default_type  application/octet-stream;
    sendfile on;
    tcp_nopush         on;
    keepalive_timeout  15;

    server { #Handles port 443 traffic (Production)

        #Setup port and server
        listen 443 ssl;       
        server_name {{SERVER_NAME}};

        #omitted SSL and proxy settings

        set $ReactApp1_url "http://reactapp1:81";
        location / {          
            rewrite /(.*) / break;
            proxy_set_header Authorization $http_authorization;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Host $server_name;
            proxy_set_header X-Forwarded-Proto https;
            resolver {{DNS_RESOLVER}} valid=30s;          
            add_header X-Environment "production";
            proxy_pass $ReactApp1_url;
        }
    }

    server { #Handles port 8444 traffic (Development)
        #Setup port and server
        listen 8444 ssl;
        server_name {{SERVER_NAME}};

        #omitted SSL and proxy settings

        set $ReactApp2_url "http://reactapp2:80";
        location / {          
            rewrite /(.*) / break;
            proxy_set_header Authorization $http_authorization;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Host $server_name;
            proxy_set_header X-Forwarded-Proto https;
            resolver {{DNS_RESOLVER}} valid=30s;           
            add_header X-Environment "dev";
            proxy_pass $ReactApp2_url;
        }
    }

    server { #Handles all port 8443 traffic (QA)
        listen 8443 ssl;   
        server_name {{SERVER_NAME}};

        #omitted SSL and proxy settings 

        set $ReactApp3_url "http://reactapp3:80";
        location / {          
            rewrite /(.*) / break;
            proxy_set_header Authorization $http_authorization;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Host $server_name;
            proxy_set_header X-Forwarded-Proto https;
            resolver {{DNS_RESOLVER}} valid=30s;
            add_header X-Environment "qa";
            proxy_pass $ReactApp3_url;
        }
    }
}

Nginx - 允许用户点击单独的 URI 以访问同一 React 应用程序的单独内部副本

Nginx - allow user to hit seperate URIs to reach seperate internal copies of the same React app

reactjs

.net-core

rancher