[英]Socket.io error with NGINX when deploying a MERN app with Docker
我在 digitalocean 上部署了一個 MERN 應用程序,編號為 docker。后端和前端看起來不錯,但由於某種原因,部署的應用程序上的 Websocket、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;
}
}
解決方案:
將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 };
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.