Question

我已经构建了一个具有3个不同的独立reactjs应用程序（app1，app2，app3）的系统。每个应用程序都使用React-Router-V4，并将其应用程序名称作为其基础名称：

对于每个应用程序，路由器配置为：

return (
        <BrowserRouter basename={baseName}>
            <Switch>
                <Route exact path="/logout" component={Logout} />
                <Route exact path="/auth" component={Logout} />
                <Route exact path="/" component={NavComponent} />
                <Route exact path="/:screen" component={NavComponent} />
                <Route exact path="/:screen/:action" component={NavComponent} />
                <Route exact path="/:screen/:action/:id" component={NavComponent} />
                <Route component={PageNotFoundError} />
            </Switch>
        </BrowserRouter>
    );

basename是应用程序名称（app1，app2，app3）

此外，我还有一个api和graphql nodejs服务器，它在端口3001上运行。

一切正常，因为我一次运行一个应用程序。

我现在很难部署到生产中。我想在Debian 9上使用nginx将所有的代码部署到单个服务器上。因此，我已经构建了包，然后将其存储在以下目录结构中：

/var/www/apps - Root (no files)
/var/www/apps/app1 - (app1 index.html and bundle files)
/var/www/apps/app2 - (app2 index.html and bundle files)
/var/www/apps/app3 - (app3 index.html and bundle files)

这是我的Nginx默认配置：

server {
  listen 80 default_server;

  root /var/www/html/apps;
  index index.html index.htm;      

  location /api {
        proxy_redirect          http://localhost:3001/  /api;
        proxy_pass_header       Server;
        proxy_set_header        X-Real-IP $remote_addr;
        proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header        X-Scheme $scheme;
        proxy_set_header        Host $http_host;
        proxy_set_header        X-NginX-Proxy true;
        proxy_connect_timeout   5;
        proxy_read_timeout      240;
        proxy_intercept_errors  on;

        proxy_pass              http://127.0.0.1:3001;
    }

    location /graphql {
        proxy_redirect          http://localhost:3001/  /graphql;
        proxy_pass_header       Server;
        proxy_set_header        X-Real-IP $remote_addr;
        proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header        X-Scheme $scheme;
        proxy_set_header        Host $http_host;
        proxy_set_header        X-NginX-Proxy true;
        proxy_connect_timeout   5;
        proxy_read_timeout      240;
        proxy_intercept_errors  on;

        proxy_pass              http://127.0.0.1:3001;
   }


  location ~* \.(?:manifest|appcache|html?|xml|json)$ {
    expires -1;
    # access_log logs/static.log; # I don't usually include a static log
  }

  location ~* \.(?:css|js)$ {
    try_files $uri =404;
    expires 1y;
    access_log off;
    add_header Cache-Control "public";
  }

  # Any route containing a file extension (e.g. /devicesfile.js)
  location ~ ^.+\..+$ {
    try_files $uri =404;
  }

  # Any route that doesn't have a file extension (e.g. /devices)
  location / {
    try_files $uri $uri/ /index.html;
  }
}

我无法将页面加载到生产环境中。每当我尝试时，我得到的只是一个带有404错误的空白页：

http://192.168.0.100
http://192.168.0.100/
http://192.168.0.100/apps
http://192.168.0.100/apps/app1
http://192.168.0.100/apps/app2
http://192.168.0.100/apps/app3

如何调整我的ngnix配置以支持这种配置，并使我的应用程序在生产服务器上正常运行

？

用于多个ReactJs应用程序的Nginx配置

0 个答案: