在 Docker 中通过 nginx 转发热模块请求

Question

我正在 Dockerizing 一个支持热模块替换的 webpack 应用程序。由于我添加了 nginx 前端，因此无法连接热模块替换。 Nginx 为页面提供服务，但是 js 包无法连接到在另一个 Docker 容器中运行的webpack-dev-server。

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

这个项目的源代码is here。

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

• app-webpack - 为网站服务的webpack-dev-server
• app-nginx - 反向代理

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

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

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

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

Answer 1

花了一些时间修修补补，但事实证明我错误地升级了标头。对于将来引用此内容的任何人，请查看链接的 repo 以获取完整的源代码。

这是我的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;
    }
}