Configuring Nginx for multiple React Apps

Question

I have two React Apps that I'd like to serve using Nginx on the same server. After reading the documentation for Nginx and researching on multiple websites, I still haven't been able to serve more than one app at the same time. The configurations I'm showing are in a file in /etc/nginx/conf.d/myserver.conf, and I'll be showing two examples, one for just one app that works and the other for two apps, that doesn't.

This example works, with just one React app (in which I'm accessing through http://myserver/foo):

server {
    listen       80;
    server_name  myserver;
    root         /var/www/html/foo/build;

    location /foo {
        try_files  $uri $uri/ /index.html;
    }
}

This example doesn't work, in which I want to serve two apps,on http://myserver/foo and the other in http://myserver/bar):

server {
    listen       80;
    server_name  myserver;

    location /foo {
        root       /var/www/html/foo/build;
        try_files  $uri $uri/ /index.html;
    }

    location /bar {
        root       /var/www/html/bar/build;
        try_files  $uri $uri/ /index.html;
    }
}

I have tried other configurations, but I've posted this one because I believe it better illustrates what I've tried to do.

Ahmed Abdelazim · Accepted Answer · 2019-12-04 23:24:55Z

1

try

server {
    listen       80;
    server_name  myserver;

    location /foo {
        alias       /var/www/html/foo/build;
        try_files  $uri $uri/ /index.html;
    }

    location /bar {
        alias       /var/www/html/bar/build;
        try_files  $uri $uri/ /index.html;
    }
}

answered Dec 4, 2019 at 23:24

Ahmed Abdelazim

7437 silver badges16 bronze badges

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

4 Comments

Lucas Cafieiro Over a year ago

Hello! Both addresses worked after the change you suggested, but only "/bar" actually loaded something, while "/foo" only displayed a blank page. When tested alone, both "/foo" and "/bar" work.

Ahmed Abdelazim Over a year ago

please provide some log /var/log/nginx

Lucas Cafieiro Over a year ago

From the error log: 2019/12/05 13:28:18 [error] 9847#9847: *2600 rewrite or internal redirection cycle while internally redirecting to "/index.html", client: client, server: myserver, request: "GET /static/css/2.5e6251e8.chunk.css HTTP/1.1", host: "host", referrer: "host/foo"

Lucas Cafieiro Over a year ago

Quick update: After adding " "homepage": "./", " to the package.json of both /foo and /bar (before it was only on /bar, which was working), everything worked with your configuration. Thanks a lot!

Collectives™ on Stack Overflow

Configuring Nginx for multiple React Apps

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related