NGINX 和两个 React 应用程序答案

【问题标题】：NGINX and two react appsNGINX 和两个 React 应用程序
【发布时间】：2017-04-11 15:08:09
【问题描述】：

我有一个关于 NGINX 反向代理和不同应用程序的问题。

这是我的 nginx 配置

server {
    listen      443 ssl http2;
    listen      80;
    server_name example.com;

    resolver 8.8.4.4 8.8.8.8 valid=300s;
    resolver_timeout 10s;

    ssl_stapling on;
    ssl_stapling_verify on;
    ssl_certificate /etc/ssl/private/fullchain.pem;
    ssl_certificate_key /etc/ssl/private/privkey.pem;
    ssl_trusted_certificate /etc/ssl/private/chain.pem;
    ssl_dhparam /etc/pki/nginx/dhparam.pem;

    # Set up preferred protocols and ciphers. TLS1.2 is required for HTTP/2
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_prefer_server_ciphers on;
    ssl_ciphers ECDH+AESGCM:ECDH+AES256:ECDH+AES128:DH+3DES:!aNULL:!ADH:!AECDH:!MD5;
    # ssl_ciphers AES256+EECDH:AES256+EDH:!aNULL;

    # This is a cache for SSL connections
    ssl_session_cache shared:SSL:10m;
    ssl_session_timeout 60m;

    access_log  off;

    if ( $http_user_agent ~* (nmap|nikto|wikto|sf|sqlmap|bsqlbf|w3af|acunetix|havij|appscan) ) {
        return 444;
    }

    location / {
        proxy_pass http://site;
        proxy_next_upstream error timeout invalid_header http_500 http_502 http_503 http_504;
        proxy_redirect  off;
        proxy_buffering off;
        proxy_set_header        Host               $host;
        proxy_set_header        X-Real-IP          $remote_addr;
        proxy_set_header        X-Forwarded-For    $proxy_add_x_forwarded_for;
    }

    location /acc {
        proxy_pass http://acc;
        proxy_next_upstream error timeout invalid_header http_500 http_502 http_503 http_504;
        proxy_redirect  off;
        proxy_buffering off;
        proxy_set_header        Host               $host;
        proxy_set_header        X-Real-IP          $remote_addr;
        proxy_set_header        X-Forwarded-For    $proxy_add_x_forwarded_for;
    }
}

所以我的问题是如何在反向代理后面提供两个不同的 React 应用程序。

我需要在根路径 - / 上提供第一个应用，在 /acc 路径上提供第二个应用。

目前，第一个应用程序按预期工作。但是第二个应用程序不起作用，因为它通过根路径 / 路由。

附： URL 的 http://site 和 http://acc 看起来是这样的，因为我使用的是 docker。

任何帮助表示赞赏。

【问题讨论】：

您可以尝试更改您的location 指令的顺序，将/acc 排在第一位并检查一下。
@Panther 它不起作用

标签： reactjs nginx

【解决方案1】：

看起来这不是 NGINX 问题。

在我的 second 应用程序的 index.html 文件中，我有以下导入：

<script src="/vendor.bundle.js"></script>
<script src="/js.bundle.js"></script>

当我将导入更改为

<script src="vendor.bundle.js"></script>
<script src="js.bundle.js"></script>

一切正常。

【讨论】：