使用Docker和NGINX将两个独立的Webpack dev服务器应用程序添加到子文件夹中

我有

app1

和

app2

，它们都在不同的端口上运行

webpack dev server

。客户端希望同一域下的应用位于不同的子文件夹中

• domain.com/app/app1
• domain.com/app/app2

我设置了一个docker compose.yml文件：

version: '3'

services:
  proxy:
    image: nginx:alpine
    ports:
      - '80:80'
    volumes:
      - './nginx.conf:/etc/nginx/conf.d/nginx.conf:ro'

这是nginx.conf文件

upstream app1 {
  server host.docker.internal:5000;
}

upstream app2 {
  server host.docker.internal:5001;
}

server {
    listen              80;
    server_name         myapp;
    proxy_http_version  1.1;
    proxy_redirect      off;
    proxy_set_header    Upgrade $http_upgrade;
    proxy_set_header    Connection "Upgrade";
    proxy_set_header    Host localhost;
    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;

   location /app/app1 {
      proxy_pass http://app1;
    }

    location /app/app2 {
      proxy_pass http://app2;
    }
}

我尝试了不同的网页设置，但似乎没有任何效果。以下是

app1

的

webpack.config.js

：

  output: {
    filename: 'main.js',
  },
  devServer: {
    historyApiFallback: true,
    host: '0.0.0.0',
    port: 5000,
  },

当我访问

http://myapp/app/app1

，index.html加载很好，但我在

main.js

脚本上得到了404。可在

http://myapp/app/app1/main.js

，但在

index.html

中，脚本指向

main.js

，而不是

app/app1/main.js

---

我尝试在webpack中更改

output.publicPath

，但是脚本不再可用。有没有一种方法可以更改脚本标记内的路径，而不会弄乱其他所有内容？或者，当应用程序在子文件夹中运行时，我该如何使其正常工作？

找到了解决方案，这要感谢webpack文档<代码>历史APIfallback。索引需要指向与公共路径相同的位置。另外，要使热重新加载工作并避免控制台错误，您需要添加

disableHostCheck:true

。以下是其中一个应用程序的最终网页配置：

output: {
  filename: 'main.js',
  publicPath: '/app/app1',
},
devServer: {
  disableHostCheck: true,
  historyApiFallback: {
    index: '/app/app1',
  },
  port: 5000,
  publicPath: '/app/app1',
},

---

output.publicPath

应该是一个正确的解决方案，它有什么错？