Question

我在Nginx Web服务器上部署了一个React应用程序。当我使用URL XX.XX.XX.XX访问应用程序时，react应用程序可以工作。但是，我想使用URL XX.XX.XX.XX/myapp/frontend访问该应用程序。我已将nginx反向代理配置为将所有请求重定向到路径/myapp/frontend。

nginx配置文件

server {                                                  
    listen 80 default_server;                         

    server_name localhost;                            
    root /var/www/myapp/myapp-frontend;            
    index index.html index.htm;                       
    location / {                                      


    }                                                 

    location /myapp/frontend {                               

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

要使用URL XX.XX.XX.XX/myapp/frontend访问该应用程序，我必须告诉react应用程序从路径/myapp/frontend开始。

编辑：

我已指定“主页”：“ http://XX.XX.XX.XX/myapp/frontend”，以便React应用程序从位置/myapp/frontend开始。

当我尝试访问URL时出现黑页。检查页面后，呼叫http://XX.XX.XX.XX/myapp/frontend/static/css/1.5a6735dd.chunk.css我得到502 Bad Gateway。因此，静态文件不会被访问。我该如何解决？

Answer 1

您可以在src文件中设置“ setupProxy.js”
代码是：

 const proxy = require("http-proxy-middleware");

    module.exports = function(app) {
      app.use(proxy("/auth/google", { target: "http://localhost:5000/" }));
      app.use(proxy("/api/*", { target: "http://localhost:5000/" }));
    };

React Application寻找未被访问的静态文件

1 个答案: