Socket.io error with NGINX when deploying a MERN app with Docker-CodePudding

The

I use http-proxy-middleware, my setupProxy.js file: (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 };

...here i tried these but none worked:

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

part of 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 config file:

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

CodePudding user response：

Solution:

add WDS_SOCKET_PORT=0 to the React frontend .env file. (so it will not add an unnecessary additional port)

edit the nginx default.conf config file to this (it's not the whole file):

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 file:

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