How to configure nginx for 2 react express app-CodePudding

i've been struggling to configure the sites-available config file and was hoping to get some guidance. I'm trying to point sub.domain.com/app1 and sub.domain.com/app2 to the correct location. I have 2 react and express running on port 2000 and port 3000, and they are both working file when accessing the ip address and port number (xx.xx.xx.x:2000). One of the app works if the location is root(/), but as soon as I try to change the location or add another the page turns blank. Any help would be appreciated.

server { listen 80; server_name sub.domain.com;

location /app1 {
    proxy_pass http://localhost:2000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
    proxy_buffering off;
    proxy_request_buffering off;
    proxy_cache_revalidate on;
}

location /app2 {
    proxy_pass http://localhost:3000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
    proxy_buffering off;
    proxy_request_buffering off;
    proxy_cache_revalidate on;
}

}

CodePudding user response：

If you have a standard react application(not a next.js one) then you will need to first build it and then you have to place it in the correct path, as example /var/www/html/app1/

So your default.conf would include the following:

 location /app1 {
    alias /var/www/html/app1/;
    try_files $uri /index.html =404;
    }


  location /app2 {
    alias /var/www/html/app2/;
    try_files $uri $uri/ index.html =404;
  }

Now, if you run CRA then you should have a look on their deployment guide, especially in Serving the Same Build from Different Paths