使用 NGINX 的多个 React 应用程序答案

【问题标题】：Multiple React Apps with NGINX使用 NGINX 的多个 React 应用程序
【发布时间】：2018-03-11 14:40:54
【问题描述】：

我正在尝试在 NGINX 服务器上托管 2 个反应应用程序。我目前的配置如下：

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

}

我已经尝试了这篇文章中提到的两种解决方案：Run multiple React Apps

如果我导航到 /json，这会给我一个 404 错误，如果我导航到 root，则会有一条消息通知我 NGINX 已设置。目前，根位置工作得很好，但导航到 domain.com/json 会呈现索引页面。我已清除缓存并在多台计算机上进行了测试，并验证了我的路径配置是否正确。

【问题讨论】：

您可以在不同的端口上为您的服务器提供服务，并使 nginx 在不同的端口上监听不同的响应应用程序。我就是这样做的。
你能分享你的配置文件吗？

标签： reactjs nginx create-react-app

【解决方案1】：

如果不知道文件在光盘上的组织方式，很难确定，但这可能会发生，因为root 指令在查找文件时包含了位置。 IE。点击example.com/json/ 将使nginx 在/var/www/json-converter-yay/build/json/ 中查找文件。

如果你是这种情况，并且/json/ 结尾是不可取的，alias 指令而不是root 可以帮助你。有关详细信息，请参阅此出色的 SO 答案：https://stackoverflow.com/a/10647080/4166517。另外，请参阅那里的评论：“别名路径上的尾部斜杠是必不可少的！”

【讨论】：

【解决方案2】：

这是我的配置文件@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;
  }
}

【讨论】：