NGINX and two react apps

Question

I have a question about NGINX reverse proxy and to different apps.

Here is my nginx config

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;
    }
}

So my question is how to serve two different React apps behind a reverse proxy.

I need to serve first app on root path - / and second app on /acc path.

For now first app work as expected. But second app doesn't work because it routed through the root path /.

P.S. URL's http://site and http://acc looks this way because I'm using docker.

Any help appreciated.

Can you try changing the order of your location directives with /acc coming first in the order and check. — Panther
– Panther, Commented Apr 11, 2017 at 15:29

aprisniak · Accepted Answer · 2017-04-11 16:15:38Z

1

Looks like it's not an NGINX problem.

In my index.html file for second app I have the following imports:

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

And when I've changed my imports to

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

All works just fine.

answered Apr 11, 2017 at 16:15

aprisniak

4126 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

NGINX and two react apps

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related