在 Nginx 子路径上部署 Webpack

Question

Explanation of my Doubt

I got an app running and holded on a Docker Container usign:

• Webpack
• React Router 4
• Express.js
• GraphQL

My app works perfect under a Root Folder www.mycoolurl.com/ . But i got other app running on my root so i created www.mycoolrul.com/coolsubpath

Express

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

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

Nginx Config

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

My first experience with this was awful ... every request tried to mount my App, Vendor and Manifest (webpack stuff, that only need to be mounted on root). So i end up doing this:

Webpack Config

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

Now only the root will load the assets but... when i go to www.mycoolrul.com/coolsubpath only my index.html is found and ...

The assets are looking for my ex. www.mycoolurl.com/app.761c16f76fcba6601577.js/ instead of www.mycoolrul.com/coolsubpath/app.761c16f76fcba6601577.js/ .

What i Expect

I tested adding React Router 4 subpath... and my Express.js the subpath name to the .get and .use methods. Yes, it works. But now i want my subpath to be instead of coolsubpath like ex. mynewsupercoolsubpath . I have to rebuild and deploy the app again ?.

What i tried...

I tried rewriting the request url but had no luck, i know the code is wrong... but i dont know how to do it

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

Answer 1

您必须在 webpack 配置中指定 publicPath 设置 - https://webpack.js.org/guides/public-path/