使用浏览器WebSocket和docker-compose配置NGINX反向代理 [英] Configure NGINX reverse proxy with browser WebSocket and docker-compose

问题描述

我正在尝试让Nginx将Websocket连接代理到后端服务器.通过docker-compose链接的所有服务.

I am trying to get nginx to proxy a websocket connection to a backend server. All services linked via docker-compose.

当我在前端react应用程序中创建WebSocket对象时:

When i create the WebSocket object in my frontend react app:

让socket = new WebSocket(`ws://engine/socket`)

我收到以下错误:

与'ws://engine/socket'的WebSocket连接失败:连接建立错误:net :: ERR_NAME_NOT_RESOLVED

我认为问题出在将 ws://转换为 http://，而我的nginx配置似乎无法正确获取匹配位置.

I believe the problem comes from converting ws:// to http:// and that my nginx configuration does not seem to be pick up the match location correctly.

这是我的nginx配置:

Here is my nginx configuration:

server {
    # listen on port 80
    listen 80;

    root   /usr/share/nginx/html;
    index  index.html index.htm;

    location ^~ /engine {
      proxy_pass http://matching-engine:8081/;
      proxy_http_version 1.1;
      proxy_redirect     off;
      proxy_set_header Host $host;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection "upgrade";
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

    location / {
        try_files $uri $uri/ /index.html;
    }

    # Media: images, icons, video, audio, HTC
    location ~* \.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|htc)$ {
      expires 1M;
      access_log off;
      add_header Cache-Control "public";
    }

    # Javascript and CSS files
    location ~* \.(?:css|js)$ {
        try_files $uri =404;
        expires 1y;
        access_log off;
        add_header Cache-Control "public";
    }

    # Any route containing a file extension (e.g. /devicesfile.js)
    location ~ ^.+\..+$ {
        try_files $uri =404;
    }
}

这是我的docker-compose配置的一部分:

Here is part of my docker-compose configuration:

  matching-engine:
    image: amp-engine
    ports:
      - "8081:8081"
    depends_on:
      - mongodb
      - rabbitmq
      - redis
    deploy:
      restart_policy:
        condition: on-failure
        max_attempts: 3
        window: 120s

  client:
    image: amp-client:latest
    container_name: "client"
    ports:
      - "80:80"
    depends_on:
      - matching-engine
    deploy:
      restart_policy:
        condition: on-failure
        max_attempts: 3
        window: 120s

docker-compose自动解析匹配引擎"(我可以发出正常的http获取/发布请求，nginx可以正确解析，并且nslookup可以正确找到匹配引擎，因此我相信基本网络对于HTTP请求而言是正常工作的这使我认为问题出在nginx配置中的匹配位置.

docker-compose resolves the 'matching-engine' automatically (i can make normal http get/post requests that nginx resolves correctly, and nslookup finds the matching-engine correctly, so i believe the basic networking is working correctly for HTTP requests which leads me to think that the problem comes from the match location in the nginx configuration.

如何在位置指令中接收来自`new WebSocket('ws://engine/socket')的请求.我尝试了以下方法:

How can one pick up a request that originates from `new WebSocket('ws://engine/socket') in a location directive. I have tried the following ones:

• 位置^〜引擎
• 位置/引擎
• 位置/engine/socket
• 位置ws://engine

没有成功.

我还尝试将 new Websocket('ws://engine/socket')更改为 new Websocket('/engine/socket')，但这失败了(仅接受 ws://或 wss://前缀)

I have also tried changing new Websocket('ws://engine/socket') to new Websocket('/engine/socket') but this fails (only ws:// or wss:// prefixes are accepted)

使该配置工作的方式是什么?

What's the way to make this configuration work ?

推荐答案

由于您已经通过docker-compose将客户端容器的端口80暴露给主机，因此您可以通过localhost连接到websocket-proxy:

As you are already exposing port 80 of your client container to your host via docker-compose, you could just connect to your websocket-proxy via localhost:

new Websocket('ws://localhost:80/engine')

这篇关于使用浏览器WebSocket和docker-compose配置NGINX反向代理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！