Question

我正在尝试使用反向代理部署多个容器化SPA，以处理到每个容器的路由。在当前设置中，每个容器都有一个生产构建create-react-app，由快速应用提供服务，该应用实际上仅由以下内容组成：

app.use(express.static(path.join(__dirname, '..', 'build')));

app.use('/*', (req, res) => {
    res.sendFile(path.join(__dirname, '..', 'build', 'index.html'));
});)

我已使用以下配置nginx服务器：

server {
    listen 8081;
    server_name example.domain.com;
    location /app1 {
        rewrite ^/(.*) /$1 break;
        proxy_ignore_client_abort on;
        proxy_pass http://localhost:3100;
        proxy_redirect http://localhost:3100 https://example.domain.com/app1;
        proxy_set_header  X-Real-IP  $remote_addr;
        proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header  Host $http_host;
    }
}

当我导航到构建的React应用程序的http://localhost:8081/app1 index.html加载时，代理似乎可以正常工作，但是所有捆绑的js文件都是404。我尝试在其中设置"homepage": "/app1" React应用的package.json，但这似乎没有任何区别。它仍然在服务器的根目录中寻找捆绑的js文件：Request URL: http://localhost:8081/static/js/bundle.js

对于接下来要尝试的方法，我还是一头雾水，请多多帮助。

最好

P

Answer 1

您需要添加静态中间件，即

app.use(express.static('static'))

或

app.use('static', express.static('static'))

static 是所有静态资产的文件夹名称。参见：https://expressjs.com/en/starter/static-files.html

已更新：

如果在“ build”下有一个“ static”文件夹，请使用：

app.use（'/ static'，express.static（path.join（__ dirname，'..'，'build'，'static'））））;

React应用的反向代理部署

1 个答案: