CODEWITHSUNDEEP
reactjsnginxdeploymentnginx-location
Adrian Pop
Adrian Pop

Reputation: 1967

Nginx: serve multiple React applications on the same server

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!

Upvotes: 2

Views: 5267

Answers (1)

Richard Smith
Richard Smith

Reputation: 49822

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.

Upvotes: 3

Related Questions