由Nginx代理的Webpack开发服务器单独的子域 [英] Webpack development server seperate subdomain proxied by nginx

问题描述

im当前卡在webpack-dev-server的探针上，该服务器使用错误的端口侦听错误的域.我已经将3个容器，节点，php和nginx的Symfony应用程序进行了docker化.在Node容器上，webpack-dev-server使用以下(缩短的)配置运行

im currently stuck on a probem with the webpack-dev-server which listen on a wrong domain with a wromng port. I've dockerized my Symfony application having 3 container, node, php and nginx. On the Node container the webpack-dev-server is running with the following (shortened) configuration

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上找到php应用程序(docker端口映射80 => 80) 可以在static.application.box(端口80到8089的代理端口)上访问webpack-dev-server，并在端口8080上运行.端口8080也映射到主机.

The nginx is configured to find the php application on www.application.box (docker port mapping 80 => 80) The webpack-dev-server is reachable on static.application.box (proxied port 80 to 8089) and running on port 8080. also port 8080 is mapped to the host.

虽然从static.application.box/static/some-assets.css/js socketjs-node/info请求正确解析的所有资产以及它本身的websocket都在www.application.box:8080/socketjs-node/info?t=上运行(由于端口已映射到节点容器，所以这是有效的)

While all assets correctly resolved from static.application.box/static/some-assets.css/js the socketjs-node/info request as well as the websocket it self are running on www.application.box:8080/socketjs-node/info?t= (which is working since the port is mapped to the node container)

我尝试了几件事，但没有成功.那么我如何修改webpack-dev-server/nginx配置以在static.application.box/socketjs-node/info?t上获取js和websocket?

I've tried several things, but without success. So how can i modify the webpack-dev-server/nginx configuration to get the js and websocket on static.application.box/socketjs-node/info?t ?

推荐答案

一周前，我遇到了与webpack-dev-server相同的问题，但应注意，我对/etc/hosts进行了修改，使其具有单独的project.local域，并且我使用了https.

I ran into the same problem with webpack-dev-server a week ago, but it should be noted that I modified /etc/hosts to have seperate project.local domains and that I used https.

在这种情况下，webpack-dev-server在docker容器client:8080上运行，并通过nginx代理到client.project.local:80

In this case the webpack-dev-server ran on a docker container client:8080 and was proxied to client.project.local:80 via nginx

像您一样，我没有找到一种配置webpack-dev-server来使用主机和端口的方法，因此我创建了另一个专门用于:8080/sockjs-node的nginx代理. [1]

Like you I didnt find a way to configure webpack-dev-server to use my host and port so I created another nginx proxy especially for that :8080/sockjs-node. [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/和...voilà: https://client.project.local/sockjs-node/info?t=1234567890. 就像魅力一样.

But then I had the problem, that the dev-server tried to access https://client.project.local:8080/sockjs-node/info?t=1234567890 Which is a port too much for nginx, since client.project.local is already a proxy to client:8080. So I added in the webpack.conf.js config.output.publicPath = '//client.project.local/ and ... voilà: https://client.project.local/sockjs-node/info?t=1234567890. works like a charm.

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.为了完成起见，我添加了一个简化的版本

Remember to expose port 8080 for nginx container aswell in for example in docker-compose.yml. I added a shortend version for the sake completion

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

[1] :我不知道它是否被认为是肮脏的.至少感觉上是这样，但是它确实起作用，并且顾名思义:它是一个 dev 服务器，一旦您npm build获得生产力，它就会消失-永远

[1]: I dont know if its considered to be dirty. At least it feels a bit like it is, but it works and as the name suggests: Its a dev-server and once you npm build for productive, its gone - for ever

这篇关于由Nginx代理的Webpack开发服务器单独的子域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！