【问题标题】：Deploy Webpack on Nginx Subpath在 Nginx 子路径上部署 Webpack
【发布时间】：2017-11-30 14:39:06
【问题描述】：

解释我的疑惑

我在 Docker 容器上运行并持有一个应用程序：

网页包
反应路由器 4
Express.js
GraphQL

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

快递

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

我的第一次体验很糟糕......每个请求都试图挂载我的应用程序、供应商和清单（webpack 的东西，只需要挂载在 root 上）。所以我最终这样做了：

Webpack 配置

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

现在只有根目录会加载资产，但是...当我转到 www.mycoolrul.com/coolsubpath 时，只找到我的 index.html 并且 ...

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

我的期望

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

我尝试了什么...

我尝试重写 request url 但没有运气，我知道代码有误...但我不知道该怎么做

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

【问题讨论】：

我的临时解决方案是将/subpath 添加到我所有的东西中......比如RR4...... Express...... Webpack......也许这就是方式？感觉不太好。

标签： node.js nginx webpack webpack-2

【解决方案1】：

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

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

【讨论】：