我和docker在digitalocean上部署了一个MERN应用程序.后端和前端看起来不错,但出于某种原因,Websocket,socket.已部署应用程序上的io连接失败.

error message: enter image description here

我使用http-proxy-middleware,我的setupProxy.js文件:(main-be is the name of container)

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

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

frontend/src/utils/axios.js:

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

frontend/src/utils/constants.js:

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

...在这里,我try 了这些方法,但都没有奏效:

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;
    }
}

推荐答案

解决方案:

  • WDS_SOCKET_PORT=0添加到React frontend .env文件中.(so it will not add an unnecessary additional port)

  • 编辑nginx默认值.conf-config文件(不是整个文件):

    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,
    })
  );
};

frontend/src/utils/axios.js:

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

frontend/src/utils/constants.js:

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

Javascript相关问答推荐

JSDoc创建并从另一个文件导入类型

优化Google Sheet脚本以将下拉菜单和公式添加到多行

Html文件和客户端存储的相关问题,有没有可能?

我在Django中的视图中遇到多值键错误

Next.js服务器端组件请求,如何发送我的cookie token?

React.Development.js和未捕获的ReferenceError:未定义useState

如何在ASP.NET项目中使用Google Chart API JavaScript将二次轴线值格式化为百分比

使用js构造一个html<;ath&>元素并不能使其正确呈现

第三方包不需要NODE_MODULES文件夹就可以工作吗?

try 使用PM2在AWS ubuntu服务器上运行 node 进程时出错

未捕获的运行时错误:调度程序为空

使用RxJS from Event和@ViewChild vs KeyUp事件和RxJS主题更改输入字段值

ReferenceError:无法在初始化之前访问setData

JQuery使用选项填充HTMLSELECT并设置默认结果,默认结果显示为空

JS:inline date子串.

如何将.jsx转换为.tsx

制表机表宽度在第一次加载时缩小,拖动后正在调整

RXJS相依可观量

如何 Select 名称正在更改的DOM元素

如何改变Extra Reducers内部另一个减速器的状态?