使用Docker部署MERN應用程式時NGINX出現Socket.io錯誤

我使用http-proxy-middleware，我的setupProxy.js檔案：（main-be 是容器的名稱）

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function (app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://main-be:5001',
      changeOrigin: true,
    })
  );
};

前端/src/utils/axios.js：

import axios from 'axios';
export const baseURL = 'https://example.com';
export default axios.create({ baseURL });

前端/src/utils/constants.js：

const API_BASE_ORIGIN = 'wss://46.111.119.161';
export { API_BASE_ORIGIN };

...在這里我嘗試了這些但沒有奏效：

const API_BASE_ORIGIN = 'https://example.com';
const API_BASE_ORIGIN = 'ws://46.111.119.161:5001';
const API_BASE_ORIGIN = 'ws://46.111.119.161'; 
const API_BASE_ORIGIN = 'wss://46.111.119.161'; 
const API_BASE_ORIGIN = 'wss://46.111.119.161:5001';

socketContext.js的一部分：

  //* socket connection
  useEffect(() => {

    const newSocket = socketIo.connect(API_BASE_ORIGIN, {
      transports: ['websocket'],
    });
    setSocket(newSocket);
    if (!newSocket) return;
    newSocket.on('connect', () => {
      console.log(`Hurrah Socket ${newSocket.id} Connected`);
    });
  }, []);

NGINX default.conf組態檔：

upstream api {
    server main-be:5001;
}

upstream client {
    server main-fe:3000;
}



server {
  listen 80;
  listen [::]:80;
  server_name _;
  return 301 https://$host$request_uri;
}

# main server block
server {
  listen 443 ssl http2 default_server;
  listen [::]:443 ssl http2 default_server;

  server_name _;

  # enable subfolder method reverse proxy confs
  include /config/nginx/proxy-confs/*.subfolder.conf;

  # all ssl related config moved to ssl.conf
  include /config/nginx/ssl.conf;

  client_max_body_size 0;


   
     location / {
        proxy_pass http://client;

        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }


     location /api {
        proxy_pass http://api;

        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;

    }
      location /ws/ {
        proxy_pass http://client;
            
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
        proxy_set_header Host $host;
    }
}

uj5u.com熱心網友回復：

解決方案：

• 添加WDS_SOCKET_PORT=0到 React 前端.env檔案。（所以它不會添加不必要的額外埠）

• 編輯 nginx default.conf 組態檔到這個（它不是整個檔案）：

  location /socket.io {
    proxy_pass http://api;
  
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "Upgrade";
    proxy_set_header Host $host; }
  

setupProxy.js檔案：

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function (app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://main-be:5001',
      changeOrigin: true,
    })
  );
};

前端/src/utils/axios.js：

import axios from 'axios';
export const baseURL = 'https://example.com';
export default axios.create({ baseURL });

前端/src/utils/constants.js：

const API_BASE_ORIGIN = 'https://example.com';
export { API_BASE_ORIGIN };

標籤：javascript 节点.js 码头工人 nginx 数字海洋

上一篇：跨站點共享nginx指令

下一篇：從javascript更改標簽樣式