javascript - React 应用程序寻找未被访问的静态文件

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/" }));
    };