Cấu hình Nginx và Cloudflare làm Reverse Proxy cho WebSocket

Cấu hình Nginx và Cloudflare làm Reverse Proxy cho WebSocket | Shanverse

Codeplain text

1Browser / Mobile App2        │  wss://realtime.example.com3        ▼4Cloudflare Edge5        │  HTTPS/WSS tới origin6        ▼7Nginx Reverse Proxy / Load Balancer8        │  HTTP/WS hoặc HTTPS/WSS nội bộ9        ├────────► WebSocket Node A10        ├────────► WebSocket Node B11        └────────► WebSocket Node C

Codejavascript

1http {2    map $http_upgrade $connection_upgrade {3        default upgrade;4        ''      close;5    }67    upstream websocket_backend {8        least_conn;9        server ws-node-a:3000 max_fails=3 fail_timeout=10s;10        server ws-node-b:3000 max_fails=3 fail_timeout=10s;11        server ws-node-c:3000 max_fails=3 fail_timeout=10s;12        keepalive 64;13    }1415    server {16        listen 443 ssl;17        http2 on;18        server_name realtime.example.com;1920        ssl_certificate     /etc/nginx/certs/origin-fullchain.pem;21        ssl_certificate_key /etc/nginx/certs/origin-private-key.pem;22        ssl_protocols TLSv1.2 TLSv1.3;2324        location /ws/ {25            proxy_pass http://websocket_backend;26            proxy_http_version 1.1;2728            proxy_set_header Upgrade $http_upgrade;29            proxy_set_header Connection $connection_upgrade;30            proxy_set_header Host $host;31            proxy_set_header X-Forwarded-Proto $scheme;32            proxy_set_header X-Forwarded-Host $host;33            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;3435            proxy_connect_timeout 10s;36            proxy_send_timeout 75s;37            proxy_read_timeout 75s;3839            proxy_buffering off;40            proxy_request_buffering off;41        }42    }43}

Codejavascript

1import { WebSocketServer } from "ws";23const wss = new WebSocketServer({ port: 3000, path: "/ws/" });45wss.on("connection", (socket) => {6  socket.isAlive = true;7  socket.on("pong", () => {8    socket.isAlive = true;9  });10});1112const timer = setInterval(() => {13  for (const socket of wss.clients) {14    if (!socket.isAlive) {15      socket.terminate();16      continue;17    }1819    socket.isAlive = false;20    socket.ping();21  }22}, 30_000);2324wss.on("close", () => clearInterval(timer));

Codejavascript

1const socket = new WebSocket("wss://realtime.example.com/ws/");23const heartbeat = setInterval(() => {4  if (socket.readyState === WebSocket.OPEN) {5    socket.send(JSON.stringify({ type: "ping", at: Date.now() }));6  }7}, 30_000);89socket.addEventListener("close", () => clearInterval(heartbeat));

Codejavascript

1let attempt = 0;2let socket;34function connect() {5  socket = new WebSocket("wss://realtime.example.com/ws/");67  socket.addEventListener("open", () => {8    attempt = 0;9    socket.send(JSON.stringify({10      type: "resume",11      lastSeenEventId: loadLastSeenEventId(),12    }));13  });1415  socket.addEventListener("close", () => {16    const base = Math.min(30_000, 1_000 * 2 ** attempt++);17    const delay = base * (0.5 + Math.random());18    setTimeout(connect, delay);19  });20}2122connect();

Codejavascript

1# File này phải chứa các dòng set_real_ip_from từ danh sách IP Cloudflare chính thức.2include /etc/nginx/cloudflare-ips.conf;34real_ip_header CF-Connecting-IP;5real_ip_recursive on;

Codejavascript

1http {2    limit_req_zone $binary_remote_addr zone=ws_handshake:10m rate=5r/s;3    limit_conn_zone $binary_remote_addr zone=ws_conn:10m;45    server {6        location /ws/ {7            limit_req zone=ws_handshake burst=10 nodelay;8            limit_conn ws_conn 20;910            proxy_pass http://websocket_backend;11            proxy_http_version 1.1;12            proxy_set_header Upgrade $http_upgrade;13            proxy_set_header Connection $connection_upgrade;14        }15    }16}

Codeyaml

1services:2  nginx:3    image: nginx:alpine4    ports:5      - "443:443"6    volumes:7      - ./nginx.conf:/etc/nginx/nginx.conf:ro8      - ./certs:/etc/nginx/certs:ro9    depends_on:10      - ws-a11      - ws-b1213  ws-a:14    image: my-websocket-app:latest15    environment:16      NODE_ID: ws-a17      PORT: 30001819  ws-b:20    image: my-websocket-app:latest21    environment:22      NODE_ID: ws-b23      PORT: 3000

Cấu hình Nginx và Cloudflare làm Reverse Proxy cho WebSocket

Kiến trúc cần hình dung đúng

Vì sao reverse proxy WebSocket hay lỗi?

Bình luận

Cấu hình Nginx nền tảng

Connection Timeout: đừng chỉ đặt một con số cực lớn

Cloudflare và WebSocket timeout

Sticky session: khi nào thực sự cần?

Sticky session tại Nginx

Session Affinity tại Cloudflare Load Balancing

SSL/TLS Termination đúng cách

Mô hình 1: Nginx trực tiếp terminate TLS

Mô hình 2: Cloudflare và Nginx đều dùng TLS

Bảo vệ origin sau Cloudflare

Khôi phục IP client thật

Rate limit handshake, không giới hạn frame một cách mù quáng

Docker Compose minh họa

Chẩn đoán theo triệu chứng

Kiểm thử trước production

Observability cần có

Checklist production

Kết luận

Tài liệu chính thức

Cấu hình Nginx Reverse Proxy và SSL (HTTPS) bằng Docker cho trang web

High Availability và Multi-Region Active-Active: Failover Banking trong vài giây

Zero-Downtime Deployment cho Banking: Nâng cấp ứng dụng và Database an toàn

Kiến trúc cần hình dung đúng

Vì sao reverse proxy WebSocket hay lỗi?

Bình luận

Cấu hình Nginx nền tảng

Connection Timeout: đừng chỉ đặt một con số cực lớn

Cloudflare và WebSocket timeout

Sticky session: khi nào thực sự cần?

Sticky session tại Nginx

Session Affinity tại Cloudflare Load Balancing

SSL/TLS Termination đúng cách

Mô hình 1: Nginx trực tiếp terminate TLS

Mô hình 2: Cloudflare và Nginx đều dùng TLS

Bảo vệ origin sau Cloudflare

Khôi phục IP client thật

Rate limit handshake, không giới hạn frame một cách mù quáng

Docker Compose minh họa

Chẩn đoán theo triệu chứng

Kiểm thử trước production

Observability cần có

Checklist production

Kết luận

Tài liệu chính thức

Bài viết liên quan

Cấu hình Nginx Reverse Proxy và SSL (HTTPS) bằng Docker cho trang web

High Availability và Multi-Region Active-Active: Failover Banking trong vài giây

Zero-Downtime Deployment cho Banking: Nâng cấp ứng dụng và Database an toàn