node.js - 在 Nginx 子路径上部署 Webpack

Question

我的疑问的解释

我让一个应用程序运行并保持在 Docker 容器上:

• 网页包
• react 路由器 4
• Express.js
• 图形语言

我的应用程序在根文件夹 www.mycoolurl.com/ 下运行完美。但是我让其他应用程序在我的根目录上运行，所以我创建了 www.mycoolrul.com/coolsubpath

express

app.use(express.static(__dirname + "/dist"));

app.get("/*", function(req, res) {
    res.sendFile(__dirname + "/dist/index.html");
});

Nginx 配置

upstream coolapp{
    server       1.1.1.1:8000;
}



location /coolsubpath {
    # Upstream
    proxy_pass         http://coolapp/;
    proxy_redirect     off;
    proxy_set_header   Host $host;
    proxy_set_header   X-Real-IP $remote_addr;
    proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header   X-Forwarded-Host $server_name;
    client_max_body_size 3M;
}

我的第一次体验很糟糕……每个请求都试图挂载我的应用程序、 vendor 和 list (webpack 的东西，只需要挂载在 root 上)。所以我最终这样做了:

Webpack 配置

output: {
    filename: "[name].[chunkhash].js",
    path: resolve(__dirname, "../dist"),
    chunkFilename: "[chunkhash].js",
    publicPath: "/"
},

现在只有 root 会加载 Assets 但是...当我转到 www.mycoolrul.com/coolsubpath 时只找到我的 index.html 并且...

Assets 正在寻找我的前任。 www.mycoolurl.com/app.761c16f76fcba6601577.js/ 而不是 www.mycoolrul.com/coolsubpath/app.761c16f76fcba6601577.js/。

我期待什么

我测试了添加 React Router 4 子路径...和我的 Express.js 子路径名称到 .get 和 .use 方法。是的，它有效。但是现在我希望我的子路径不是像 ex 那样的 coolsubpath。 mynewsupercoolsubpath。我必须重新构建和部署应用程序吗？

我试过的...

我尝试重写 request url 但没有成功，我知道代码是错误的...但我不知道该怎么做

if ($http_referer ~* ^www.mycoolrul.com/coolsubpath ) {
   set $request_url /coolsubpath/$1;
}

Answer 1

您必须在您的 webpack 配置中指定 publicPath 设置 - https://webpack.js.org/guides/public-path/并重建你的脚本。这样您的 index.html 文件将通过适当的子路径引用脚本和其他资源。

如果您只使用 express 来提供静态服务，那么 nginx 可以为您做到这一点。注意你的 dist 文件夹是如何提供的，你可能想把它放在一个/subpath 中，就像它被提供一样，但这取决于代理设置，它是否重写路径。