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

Question

我在 Nginx 网络服务器上部署了一个 React 应用程序。当我使用 URL、XX.XX.XX.XX 访问应用程序时，反应应用程序工作。但是，我想使用 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 开始。

编辑：

我已经指定了 "homepage"：“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 应用程序寻找未被访问的静态文件

React Application looking for static files which are not being accessed

javascript

production

nginx

reactjs