通过 nginx 转发 hot-module-requests，在 Docker

Question

我正在 Docker 化一个支持 hot-module 替换的 webpack 应用程序。因为我添加了一个 nginx front-end，所以我无法连接 hot-module-replacement。 Nginx 提供页面，但 js 包无法连接到另一个 Docker 容器中的 webpack-dev-server 运行。

我认为问题可能源于域解析问题（在 Docker 容器和 nginx 之间）或请求缺少正确的升级/主机 headers。

此项目的源代码is here。

我在这个项目中有两个 docker 容器：

app-webpack - 为网站提供服务的 webpack-dev-server
app-nginx - reverse-proxy

我的 nginx 配置文件在 docker/nginx.

理想情况下，用户会转到 localhost，nginx 会选择并重定向到 app-webapp:3000。 webpack-dev-server 然后通过 socketjs-node 套接字地址发送 hot-module 替换代码，页面在本地更新。

我已确认 app-webpack 容器可以提供支持 HMR 的页面。

在此先感谢您的帮助，如果我可以提供其他信息，请告诉我！

Answer 1

花了一点时间修改，但结果是我错误地升级了 headers。对于将来引用此内容的任何人，请查看链接的存储库以获取完整的源代码。

这是我的 etc/nginx/nginx.conf

user  nginx;
worker_processes  auto;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;


events {
    worker_connections  1024;
}

http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile on;
    keepalive_timeout 65;

    # The server settings
    include /etc/nginx/conf.d/*.conf;
}

还有 etc/nginx/conf.d/default.conf/

# If we receive X-Forwarded-Proto, pass it through; otherwise, pass along the
# scheme used to connect to this server
map $http_x_forwarded_proto $proxy_x_forwarded_proto {
  default $http_x_forwarded_proto;
  ''      $scheme;
}

# If we receive X-Forwarded-Port, pass it through; otherwise, pass along the
# server port the client connected to
map $http_x_forwarded_port $proxy_x_forwarded_port {
  default $http_x_forwarded_port;
  ''      $server_port;
}

# If we receive Upgrade, set Connection to "upgrade"; otherwise, delete any
# Connection header that may have been passed to this server
map $http_upgrade $proxy_connection {
  default upgrade;
  '' close;
}

# Apply fix for very long server names
server_names_hash_bucket_size 128;

# Set appropriate X-Forwarded-Ssl header
map $scheme $proxy_x_forwarded_ssl {
  default off;
  https off;
}

gzip_types text/plain text/css application/javascript application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;
log_format vhost '$host $remote_addr - $remote_user [$time_local] '
                 '"$request" $status $body_bytes_sent '
                 '"$http_referer" "$http_user_agent"';

# HTTP 1.1 support
proxy_http_version 1.1;
proxy_buffering off;
proxy_set_header Host $http_host;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection $proxy_connection;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $proxy_x_forwarded_proto;
proxy_set_header X-Forwarded-Ssl $proxy_x_forwarded_ssl;
proxy_set_header X-Forwarded-Port $proxy_x_forwarded_port;

# Mitigate httpoxy attack (see README for details)
proxy_set_header Proxy "";

server {
    server_name _; # This is just an invalid value which will never trigger on a real hostname.
    listen 80;
}

server {
    server_name localhost;
    listen 80;

    location /sockjs-node/ {
        proxy_pass https://app-webapp:3000/sockjs-node/;
    }

    location / {
        proxy_pass http://app-webapp:3000;
    }
}

通过 nginx 转发 hot-module-requests，在 Docker

Forwarding hot-module-requests through nginx, in Docker

nginx

webpack

docker-compose

hot-module-replacement

nginx-reverse-proxy