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

Question

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

我尝试了不同的Webpack设置，但似乎无济于事。这是[webpack.config.js的app1：

  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。

<script type="text/javascript" src="main.js"></script></body>

我曾尝试在webpack中更改output.publicPath，但是该脚本不再可用。有没有一种方法可以更改script标记内的路径而又不会弄乱其他所有内容？或者当应用程序在子文件夹中运行时，我将如何进行这项工作？

Answer 1

找到了解决方案，不用了webpack文档。 historyApiFallback.index需要指向与publicPath相同的位置。另外，为了使热重装工作正常并避免控制台错误，您需要添加disableHostCheck: true。这是我对其中一个应用程序的最终webpack配置：

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