NGINX代理传递给React App不起作用

Question

我想在单个子域下使用NGINX运行以下项目：http://localhost:3000（Loopback API）和http://localhost:3006（React Application）

两个应用程序都在PM2下运行。 React App正在生产中（使用其生成的内部版本）运行，命令为：“ pm2 serve build 3006”。

/ etc / nginx / sites-available / default

server {
listen 80;

server_name subdomain.domain.com;

location / {
    proxy_pass http://localhost:3006;
    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;
    try_files $uri /index.html;
}

location /api {
    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;
}

/ api位置下的回送项目运行正常。问题是我的/路线下的React项目。当我进入subdomain.domain.com时，我只会得到一个空白页。在开发人员控制台中，出现以下错误：

使用http://localhost:3006访问我的React App完全正常，没有控制台问题，所以我完全确定这与nginx有关。

我一直在研究很多关于加载不正确的MIME类型的信息，但是我的/etc/nginx/nginx.conf已经使用以下配置运行：

http {
    include /etc/nginx/mime.types;
}

非常感谢您的帮助。

Answer 1

您是否正在使用Create React App？默认情况下，其构建脚本假定该应用程序将在根目录中提供。为了在子目录下正确提供React，您需要在package.json文件中指定主页。

"homepage" : "http://example.com/your-subdirectory"

此外，您将需要修改server/app.js以反映此更改。

app.use('/your-subdirectory/api', require('./api'));

最后，也是最重要的是，您还要设置React Router的基本名称。

  const Routes = () => {
     return (
        <Router basename={'/your-subdirectory'}>
        <div>
           <Route exact path={`/`}component={App} />
        </div>
       </Router>
     )
   };

Answer 2

无需使用pm2，因为它们是静态文件，并且 nginx 可以自行提供。

您只需要让 nginx 知道文件在哪里。

server {
   listen 80;


   root /home/user/app/buld <--- LOCATION_OF_YOUR_BUILD
   index index.html
   server_name subdomain.domain.com;

   location / {
      try_files $uri /index.html
    }

   location /api {
      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;
}