由nginx代理的Webpack开发服务器分离的子域

Question

我现在被困在一个问题上，用一个错误的端口监听了一个错误的域名，名为webpack-dev-server。我已经将Symfony应用程序停靠在了3个容器、node、php和nginx上。在Node容器上，webpack-dev-server正在使用以下(缩短的)配置运行

output: {
    filename: '[name].[hash].js',
    chunkFilename: '[name].[chunkhash].js',
    path: Path.resolve(__dirname, 'web/static'),
    publicPath: '/static/'
},
devServer: {
    contentBase: Path.join(__dirname, 'web'),
    host: '0.0.0.0',
    port: 8080,
    headers: {
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
        "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
    },
    disableHostCheck: true,
    open: false,
    overlay: true,
    compress: true
},

nginx被配置为在www.application.box (对接端口映射80到80)上找到php应用程序。在static.application.box (代理端口80到8089)上可以到达-dev-server，并且在端口8080上运行。端口8080也映射到主机。

虽然从static.application.box/static/some-assets.css/js正确解析了所有资产，但socketjs- node /info请求及其自身的websocket都在www.application.box:8080/socketjs-node/info?t=上运行(由于端口映射到节点容器，因此可以正常工作)。

我尝试了几种方法，但都没有成功。那么如何修改webpack-dev-server/nginx配置来获取static.application.box/socketjs-node/info?t上的js和websocket呢？

Answer 1

一周前，我在webpack-dev-server上遇到了同样的问题，但应该注意的是，我修改了/etc/hosts，使其具有独立的https域，并且我使用了project.local。

描述：

在本例中，webpack-dev-server在停靠容器client:8080上运行，并通过nginx代理到client.project.local:80

像你一样，我没有找到一种方法来配置webpack开发服务器来使用我的主机和端口，所以我专门为那个:8080/sockjs-node创建了另一个nginx代理。1

但随后我遇到了问题，开发服务器试图访问https://client.project.local:8080/sockjs-node/info?t=1234567890，这对于nginx来说是一个太多的端口，因为client.project.local已经是client:8080的代理。所以我添加了webpack.conf.js config.output.publicPath = '//client.project.local/和...瞧：https://client.project.local/sockjs-node/info?t=1234567890。就像一种护身符。

配置

webpack.conf.js：

const fs = require('fs')
const sslCrt = fs.readFileSync('/path/to/ssl/ca.crt')
const sslKey = fs.readFileSync('/path/to/ssl/ca.key')
// ...
{
  // ...
  devServer: {
    hot: true, // <- responsible for all of this, but still dont wanna miss it ;)
    inline: true,
    compress: true,
    host: process.env.HOST, // set in Dockerfile for client container
    port: process.env.PORT, // set in Dockerfile for client container
    disableHostCheck: true, // when manipulating /etc/hosts
    headers: { 'Access-Control-Allow-Origin': '*' },
    https: {
      cert: sslCrt,
      key: sslKey
    },
    // ...
  }
  output: {
    publicPath: '//client.project.local/' // host from /etc/hosts (note // at beginning)
  },
}

nginx客户端配置：

# http
server {
    listen              80 default;
    listen              [::]:80 default ipv6only=on;
    server_name         www.client.project.local client.project.local www.project.local project.local;
    # your other config like root, access_log, charset ..
    location / {
        proxy_pass https://client:8080/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection $connection_upgrade;
    }
}

# https
server {
    listen              443 ssl default;
    listen              [::]:443 ssl default ipv6only=on;
    ssl_certificate     project.local.crt;
    ssl_certificate_key project.local.key;
    ssl_protocols       TLSv1 TLSv1.1 TLSv1.2;
    ssl_ciphers         HIGH:!aNULL:!MD5;
    ssl on;
    server_name         www.client.project.local client.project.local www.project.local project.local;
    # your other config like root, access_log, charset ..
    location / {
        proxy_pass https://client:8080/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection $connection_upgrade;
    }
}

# http/s websocket for webpack-dev-server 
server {
    listen              8080 default;
    listen              [::]:8080 default ipv6only=on;
    ssl_certificate     project.local.crt;
    ssl_certificate_key project.local.key;
    ssl_protocols       TLSv1 TLSv1.1 TLSv1.2;
    ssl_ciphers         HIGH:!aNULL:!MD5;
    ssl on;
    server_name         www.client.project.local client.project.local www.project.local project.local;
    # your other config like root, access_log, charset ..
    location /sockjs-node/ {
        proxy_pass https://client:8080/sockjs-node/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection $connection_upgrade;
    }
}

记住在docker-compose.yml中也要公开nginx容器的8080端口。为了完成，我添加了一个缩写版本。

docker-compose.yml

version: "3"

networks:
  project-net-ext:
  project-net:
    internal: true
    driver: bridge

services:

  client:
    hostname: client
    build: ./container/client
    volumes:
     - ./path/to/code:/code:ro # read-only
       # write needed only for initial package download
    ports:
     - "8080:8080"
    networks:
     - project-net
     # project-net-ext only needed for initial package download

  nginx:
    hostname: nginx
    build: ./container/nginx
    volumes:
     - ./path/to/code:/code:ro # read-only
       # write needed only for initial package download
    ports:
     - "80:80"     # http
     - "443:443"   # https
     - "8080:8080" # webpack-dev-server :8080/sockjs-node/info
    links:
     - client
    networks:
     - project-net  # needed for nginx to connect to client container,
       # even though you've linked them
     - project-net-ext # nginx of course needs to be public

他说:我不知道它是不是被认为是脏的。至少它看起来有点像，但它是有效的，正如它的名字所暗示的:它是一个开发服务器，一旦你npm build为了生产，它就一去不复返了。

Answer 2

这可以通过设置devServer.sockPort: 'location'来解决

webpack.config.js：

devServer {
  sockPort: 'location'
  // ...
}

这是一个完整的服务器，它将允许您代理webpack-dev- nginx.conf，而不需要除sockPort之外的任何更改

nginx.conf：

events {}

http {
  map $http_upgrade $connection_upgrade {
    default upgrade;
    '' close;
  }

  server {


    listen 8081;

    # uncomment if you need ssl
    # listen 4443 ssl;
    # ssl_certificate cert.pem;
    # ssl_certificate_key privkey.pem;


    location / {
        # webpack-dev-server port
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Host localhost;
        proxy_cache_bypass $http_upgrade;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection $connection_upgrade;
    }
  }
}