docker - sockjs-node路径被webpack-dev-server baseUrl覆盖

Question

nginx.conf(在docker-compose的端口8900上公开)

upstream app_api {
    server api:8888;
}
upstream app_dashboard {
    server dashboard:8080;
}

server {

    listen 80;
    server_name api_server;
    index index.html;

    # Needed for Django API testing
    location /static {
        alias /var/www/static;
        try_files $uri /$uri /index.html;
    }

    #Django API
    location /api/ {
        proxy_pass http://app_api/;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $host;
        proxy_redirect off;
    }

    # Dashboard static served from nginx
    location / {
        root /var/www/dist/;
        try_files $uri /$uri /index.html;
    }

    # Dashboard served from webpack-dev-server in container
    location /serve {
        proxy_pass http://app_dashboard;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $host;
        proxy_redirect off;
    }
    # still testing - this will fix the HMR for webpack
    location /serve/sockjs-node {
        proxy_set_header X-Real-IP  $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $host;

        proxy_pass http://app_dashboard;

        proxy_redirect off;

        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }

}

vue.config.js

module.exports = {
  baseUrl: process.env.NODE_ENV === 'docker' ? '/serve' : '/'
}

在浏览器中，转到:

localhost:8900/serve

页面可以很好地服务，但是，webpack-dev-server HMR无法正常工作，因为对sockjs的调用现在是 /serve而不是 /serve/sockjs-node:

POST http://localhost:8900/serve/908/3so2cyjm/xhr_streaming?t=1548885104223 404 (Not Found)

我假设可以通过设置 devServer.proxy 而不是baseUrl来解决此问题，但是我找不到正确的配置。

我需要的是: /->应该转到 http://localhost:8900/serve /api->应该转到 http://localhost:8900/api /sockjs-node->应该转到 http://localhost:8900/serve/sockjs-node

Answer 1

设法通过以下方法解决该问题:

devServer: {
    proxy: {
        "/serve": {
            target: "http://localhost:8900",
            pathRewrite: { "^/serve": "/sockjs-node" },
        },
    }
}