Nginx:在同一台服务器上服务多个React应用程序 [英] Nginx: serve multiple React applications on the same server

问题描述

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

I am trying to set up multiple React apps on the same server. The problem is that after I build the project, index.html from build/ is found, but the auxiliary files from build/static are not. Initially, with just one app, I had location static/ with an alias. However, with multiple projects and multiple static/ directories I can not do that. Basically I want that each app to has its own static folder. How do I solve my problem?

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

In the browser, the error looks like this:

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

我当前的设置是这样的:

My current set up is like this:

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...]
           }
    }
}

我尝试结合了此处，此处或

I tried combining answers from here, here or here, sorry if it looks messy or I have major mistakes. If what am I trying to achieve isn't really ok, please suggest something else. Thanks!

推荐答案

在多个项目和目录中共享相同的URI名称空间前缀不是非常有效或可扩展.最好给每个项目一个唯一的URI前缀，所以/project1/index.html使用类似于/project1/foo.css的URI来定位其资源.或者，对资源文件使用公用的构建目录，然后将它们收集在构建脚本中.

It's not very efficient or scalable to share the same URI namespace prefix across a number of projects and directories. It would be preferable to give each project a unique URI prefix, so /project1/index.html locates its resources using a URI like /project1/foo.css. Alternatively, use a common build directory for resource files and collect them together in the build scripts.

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

However, if you must keep the resource files in separate directories and use the same URI prefix to reference them, the Nginx try_files directive can search directories sequentially until a matching filename is found.

例如:

root /data/adpop;

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

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

The URI /static/css/foo.css will be searched for first at /data/adpop/possible-malware-domains-viewer/static/css/foo.css and then at /data/adpop/punycode-domains-viewer/static/css/foo.css. And if neither file is found, a 404 status is returned.

有关详细信息，请参见此文档.

See this document for details.

这篇关于Nginx:在同一台服务器上服务多个React应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！