Nginx: serve multiple React applications on the same server

Question

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!

So URIs beginning with `/static/` should be searched for under multiple directories, e.g. `/data/foo/build/static/` and `/data/bar/build/static/`? — Richard Smith, Jun 14 '19 at 12:00
@RichardSmith Exactly. Each app should know about its own static folder. — Adrian Pop, Jun 14 '19 at 12:01
@RichardSmith For example, `/punycode-domains-viewer/` app should search for its static files in `data/adpop/punycode-domains-viewer/build/static/` and so on. I don't want to really mix the static files of multiple apps. — Adrian Pop, Jun 14 '19 at 12:04

score 3 · Accepted Answer · answered Jun 14 '19 at 12:12

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.

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.

For example:

root /data/adpop;

location /static/ {
    try_files
        /possible-malware-domains-viewer$uri
        /punycode-domains-viewer$uri
        =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.

I know it's not very effective, but these are just some simple and quick apps used to display some results, they quickly change. Maybe I'll change everything to use `http-server` or `serve` or another package, using only different ports. Thanks for the answer, just tried it and it works. — Adrian Pop, Jun 14 '19 at 12:18

Nginx: serve multiple React applications on the same server

1 Answers1