Multiple React Apps with NGINX

Question

I am trying to host 2 react apps on an NGINX server. My configuration is currently as follows:

server {
listen 80;
server_name www.domain.net;

location / {
  root /var/www/portfolio_site/code/client/build;
  try_files $uri /index.html;
}

location /json/ {
    root /var/www/json-converter-yay/build;
    try_files $uri $uri/ /json.html;
}

}

I have tried both solutions mentioned at this post: Run multiple React Apps

Which gives me a 404 error if I navigate to the /json, and a message informing me that NGINX has been set up if I navigate to root. Currently, the root location works just fine, but navigating to domain.com/json renders the index page. I have cleared my cache and tested on multiple computers, as well as verifying that I have my paths configured correctly.

You can serve your server on different ports and make nginx listen to different reacts apps on different ports. Thats how i do it. — Yash Thakur, Mar 03 '18 at 08:14

u354356007 · Answer 1 · 2018-03-05T12:01:24.170

Without the knowledge of how your files are organized on disc it's hard to say for sure, but this may happen because root directive includes the location when looking for files. I. e. hitting example.com/json/ will make nginx look for files in /var/www/json-converter-yay/build/json/.

If this is the case for you, and /json/ ending is not desirable, alias directive instead of root can help you. See this excellent SO answer for details: https://stackoverflow.com/a/10647080/4166517. Also, see the comment there: "The trailing slash on the alias path is essential!"

score 0 · Answer 2 · answered Mar 11 '18 at 06:40

Here is my config file @alex-wright :

server {
  server_name example.com;
  #location ~* \.(eot|otf|ttf|woff|woff2)$ {
    add_header Access-Control-Allow-Origin *;
  #}
  location / {
    proxy_set_header HOST $host;
    proxy_set_header X-Host $host;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_pass http://localhost:3003;
    proxy_connect_timeout 600;
    proxy_send_timeout 600;
    proxy_read_timeout 600;
    send_timeout 600;
  }
}

Multiple React Apps with NGINX

2 Answers2