使用Docker部署MERN应用程序时NGINX的Socket.io错误
使用Docker部署MERN应用程序时NGINX的Socket.io错误
提问于 2022-04-22 19:31:49
我有一个MERN应用程序部署在数字海洋与码头。后端和前端看起来不错，但是由于某种原因，socket.io连接在部署的应用程序上失败了。
错误信息：
我使用http-代理中间件，我的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/axos.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 };...here，我试过这些，但都没有用：
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;
}
}回答 1
Stack Overflow用户
回答已采纳
发布于 2022-04-25 22:52:12
解决方案：
- 将
WDS_SOCKET_PORT=0添加到React前端.env文件。(因此它不会添加不必要的额外端口)
- 编辑nginx default.conf配置文件(它不是整个文件)：
位置/socket.io { proxy_pass http://api；proxy_http_version 1.1；proxy_set_header升级$http_upgrade；proxy_set_header连接“升级”；proxy_set_header主机$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/axos.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 };页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71973771
复制相关文章
相似问题
腾讯云开发者
