时间戳

首页 > 解决方案 > sockjs-node 路径被 webpack-dev-server baseUrl 覆盖

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

问题描述

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' : '/'
}

在浏览器中转到：

本地主机：8900/服务

页面服务很好，但是，webpack-dev-server HMR 不起作用，因为对 sockjs 的调用现在/serve不是/serve/sockjs-node：

POST http://localhost:8900/serve/908/3so2cyjm/xhr_streaming?t=1548885104223 404（未找到）

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

我需要的是： /->应该去http://localhost:8900/serve

/api-> 应该去http://localhost:8900/api

/sockjs-node-> 应该去http://localhost:8900/serve/sockjs-node

标签： dockernginxvue.jswebpack-dev-serversockjs

解决方案

我们可以使用 sockPath 选项更改默认套接字路径：

module.exports = {
    //...
        devServer: {
        sockPath: 'path/to/socket',
    }
};

这里将是：

sockPath: '/serve/sockjs-node',

推荐阅读