Nginx：在同一台服务器上提供多个 React 应用程序

Question

我正在尝试在同一台服务器上设置多个 React 应用程序。问题是在我构建项目后，找到了build/中的index.html，但是找不到build/static中的辅助文件。最初，只有一个应用程序，我 location static/ 有一个别名。但是，对于多个项目和多个 static/ 目录，我无法做到这一点。基本上我希望每个应用程序都有自己的静态文件夹。我该如何解决我的问题？

在浏览器中，错误如下所示：

GET http://my.servername/static/css/2.266e55a5.chunk.css net::ERR_ABORTED 404 (Not Found)

我目前的设置是这样的：

server {
    listen   80;
    server_name my.servername;
    root   /data/adpop/;


    location /possible-malware-domains-viewer/ {
            alias /data/adpop/possible-malware-domains-viewer/build/;
            try_files $uri /possible-malware-domains-viewer/index.html;

            add_header Access-Control-Allow-Origin *;
            autoindex on;

            # Simple requests
            if ($request_method ~* "(GET|POST)") {
                    add_header "Access-Control-Allow-Origin"  *;
            }

            # Preflighted requests
            if ($request_method = OPTIONS ) {
                    add_header "Access-Control-Allow-Origin"  *;
                    add_header "Access-Control-Allow-Methods" "GET, POST, OPTIONS, HEAD";
                    add_header "Access-Control-Allow-Headers" "Authorization, Origin, X-Requested-With, Content-Type, Accept";
                    return 200;
           }
    }

    location /punycode-domains-viewer/ {
            alias /data/adpop/punycode-domains-viewer/build/;
            try_files $uri /punycode-domains-viewer/index.html;

            [...same settings as above...]
           }
    }
}

我尝试合并 , here or 的答案，如果看起来很乱或者我有重大错误，请见谅。如果我想要实现的目标不是很好，请提出其他建议。谢谢！

Answer 1

在多个项目和目录之间共享相同的 URI 命名空间前缀不是很有效或可扩展。最好给每个项目一个唯一的 URI 前缀，这样 /project1/index.html 使用像 /project1/foo.css 这样的 URI 定位它的资源。或者，为资源文件使用公共构建目录，并将它们集中在构建脚本中。

但是，如果您必须将资源文件放在不同的目录中并使用相同的 URI 前缀来引用它们，Nginx try_files 指令可以按顺序搜索目录，直到找到匹配的文件名。

例如：

root /data/adpop;

location /static/ {
    try_files
        /possible-malware-domains-viewer$uri
        /punycode-domains-viewer$uri
        =404;
}

URI /static/css/foo.css 将首先在 /data/adpop/possible-malware-domains-viewer/static/css/foo.css 处搜索，然后在 /data/adpop/punycode-domains-viewer/static/css/foo.css 处搜索。如果两个文件都找不到，则返回 404 状态。

详情见this document。

Nginx：在同一台服务器上提供多个 React 应用程序

Nginx: serve multiple React applications on the same server

deployment

nginx

reactjs

nginx-location