I’m deploying my app version with newly configured websocket . I’m using socket.io library, nodejs in the server backend, react in frontend and nginx as a reverse proxy. However, unfortunately it’s not working when I deploy it to production. There is no error being log and most of the configuration I searched are not working.
NGINX CONFIGURATION:
# API Server
map $http_origin $port {
default 0;
~(https://(www.domain).com) 8080;
~(https://(preprod.domain).com) 8081;
~(https://(dashboard.domain).com) 8082;
}
map $arg_destination $destination {
default 0;
server 1; # dashboard.domain.com @ port 8082
remote 2; # www.domain.com @ port 8080
}
server {
include /etc/nginx/includes/my_folder/port.conf;
server_name api.domain.com;
include /etc/nginx/includes/my_folder/ssl.conf;
if ($blocked_user_ip = 1) {
return 403;
}
if ($port = 0) {
return 403;
}
location / {
include /etc/nginx/includes/my_folder/added_headers.conf;
include /etc/nginx/includes/my_folder/proxy_headers.conf;
if ($destination = 2) {
proxy_pass http://127.0.0.1:8080;
}
if ($destination = 1) {
proxy_pass http://127.0.0.1:8082;
}
if ($destination = 0) {
// PORT 8081 will pass here
proxy_pass http://127.0.0.1:$port;
}
}
error_page 403 @error;
location @error {
root /var/www/my_directory/errors;
try_files /403.html /403.html;
}
}
NODEJS CONFIGURATION:
const express = require('express')
const app = express()
const { createServer } = require('http')
const httpServer = createServer(app)
const io = require('socket.io')(httpServer, {
cors: {
origin: [process.env.CLIENT_URL, process.env.DASHBOARD_CLIENT_URL]
}
})
io.on('connection', (socket) => {
socket.on('test', (data) => {
// THIS MESSAGE IS NOT LOG. BECAUSE THE SERVER IS NOT RECEIVING IT FROM THE CLIENT.
console.log(data?.message) // Hi, Server!
})
// Other codes...
})
const server = httpServer.listen(8081)
module.exports = server
REACT CONFIGURATION:
import { io } from 'socket.io-client'
const socket = io('https://api.domain.com', {})
socket.emit('test', { message: 'Hi Server!'})
// Other codes...
VERSIONS:
NGINX: 1.18.0 (Ubuntu)
NODEJS: v18.12.1
REACT: 18.2.0
EXPRESS: 4.18.2
SUMMARY: The general issue is the backend and frontend are not connected. It happens only in production but in local, its working properly.