React应用的反向代理部署

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

当我导航到http://localhost:8081/app1时，代理似乎可以正常工作，虽然已构建的React应用程序的index.html加载，但所有捆绑的js文件均为404。我尝试设置"homepage": "/app1"在应用程序做出反应的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

更新：

如果您在“内部版本”下有一个“静态”文件夹，请使用：

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