I am tring to make client server communication using socket.io on a server with https and reverse proxy as nginx.But on client side its giving following errors :
1) GET https://example.com/socket.io/socket.io.js 404 not found
2) Reference Error: io is not defined
This is my nginx server block
server {
listen 80 default_server;
listen [::]:80 default_server ipv6only=on;
root /usr/share/nginx/html;
index index.html index.htm;
# Make site accessible from http://localhost/
server_name example.com www.example.com;
location / {
proxy_pass http://127.0.0.1:8080;
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;
try_files $uri $uri/ =404;
}
listen 443 ssl;
ssl_certificate /etc/letsencrypt/live/myreactnative.com/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/myreactnative.com/privkey.pem;
include /etc/letsencrypt/options-ssl-nginx.conf;
if ($scheme != "https") {
return 301 https://$host$request_uri;
}
}
This is my node server file
var express = require('express');
var app = express();
var serverPort = 8080;
var http = require('http');
var server = http.createServer(app);
var io = require('socket.io')(server);
app.get('/', function(req, res){
console.log('get /');
res.sendFile(__dirname + '/index.html');
});
server.listen(serverPort, function(){
console.log('server up and running at %s port', serverPort);
});
io.on('connection', function(socket){
console.log('connection');
socket.on('disconnect', function(){
console.log('disconnect');
})
})
my client side is like this :
<html>
<head>
<title>socket client</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
</body>
<script src="/socket.io/socket.io.js"></script>
<script type="text/javascript">
var socket = io();
</script>
</html>
This is the website url https://example.com
my node application is in directory /usr/share/nginx/html and not in root( but i dont think this can make any difference )
Finally It was fixed. I made changes to nginx server block.
This is my new nginx server block
server {
listen 80;
root /usr/share/nginx/html;
index index.html index.htm;
# Make site accessible from http://localhost/
server_name example.com www.example.com;
location / {
proxy_pass http://127.0.0.1:8080;
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;
}
listen 443 ssl;
ssl_certificate /etc/letsencrypt/live/myreactnative.com/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/myreactnative.com/privkey.pem;
include /etc/letsencrypt/options-ssl-nginx.conf;
if ($scheme != "https") {
return 301 https://$host$request_uri;
}
}
Related
I'm trying to pass through all the directories in my app through to express, and in some cases directories that contain a dynamic 'key' which I'll :capture.
I can't get even a defined sub-directory, /pretest, to pass through to express. Despite copying the the same options for Location /, it serves me an Ngxin 404
Ideally, I want domain.com/prepop/{lookup_key} to pass to localhost:8080/prepop/{lookup_key}
Where {lookup_key} is a different value each time
Any ideas what I'm doing wrong here? Any/all help is much appreciated.
Code-
server.js
const path = require('path');
const express = require("express");
const mysql = require('mysql2');
const cors = require("cors")
const port = process.env.PORT || 8080;
const app = express();
app.use(cors())
app.get('/', (req, res) => {
res.send('hello');
});
app.get('/pretest', (req, res) => {
res.send('test');
});
app.get('/prepop/:lookup_key', (req, res) => {
let connection = mysql.createConnection({
//commented out for stackoverflow
});
connection.connect();
connection.query('SELECT * FROM table_incoming_leads WHERE leadid = '+req.params.send_key, (err, response, fields) => {
if (err) console.log(err);
res.json({
email: response[0].email,
first_name: response[0].first_name,
last_name: response[0].last_name
})
});
connection.end();
})
app.listen(port, () => console.log(`Server listening on port ${port}`));
/etc/nginx/sites-available/default
server {
root /var/www/html;
location / {
proxy_pass http://localhost:8080/;
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;
try_files $uri $uri/ =404;
}
location /pretest {
proxy_pass http://localhost:8080;
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;
try_files $uri $uri/ =404;
}
location /prepop {
proxy_pass http://localhost:8080/;
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;
try_files $uri $uri/ =404;
}
listen [::]:443 ssl ipv6only=on; # managed by Certbot
listen 443 ssl; # managed by Certbot
ssl_certificate /etc/letsencrypt/live/subdomain.mydomain.com/fullchain.pem; # managed by Certbot
ssl_certificate_key /etc/letsencrypt/live/subdomain.mydomain.com/privkey.pem; # managed by Certbot
include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
}
server {
if ($host = subdomain.mydomain.com) {
return 301 https://$host$request_uri;
} # managed by Certbot
listen 80 ;
listen [::]:80 ;
server_name subdomain.mydomain.com;
return 404; # managed by Certbot
}
You need to remove try_files directive from /prepop location because when nginx receives a request for let's say /prepop/somekey it looks for a file with that name (somekey) in your root directory. Since there is no such file it returns 404.
Please help,
Getting following error in production
WebSocket connection to 'wss://subdomain.example.com/socket.io/?EIO=3&transport=websocket' failed: Error during WebSocket handshake: Unexpected response code: 404
Here is my Configuration and code for Nginx - React Js & Node Express
Nginx Config
http {
map $http_upgrade $connection_upgrade {
default upgrade;
'' close;
}
upstream node-js-myapp {
server 127.0.0.1:5000;
}
tcp_nopush on;
tcp_nodelay on;
keepalive_timeout 65;
types_hash_max_size 2048;
server {
root /var/www/html;
# Add index.php to the list if you are using PHP
index index.html index.htm index.nginx-debian.html;
server_name subdomain.example.com;
location / {
# First attempt to serve request as file, then
# as directory, then fall back to displaying a 404.
# try_files $uri $uri/ =404;
try_files $uri $uri/ /index.html;
}
# Media: images, icons, video, audio, HTC
location ~* \.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|htc)$ {
expires 1M;
access_log off;
add_header Cache-Control "public";
}
# Javascript and CSS files
location ~* \.(?:css|js)$ {
try_files $uri =404;
expires 1y;
access_log off;
add_header Cache-Control "public";
}
# Any route containing a file extension (e.g. /devicesfile.js)
location ~ ^.+\..+$ {
try_files $uri =404;
}
location /app2/ {
proxy_pass http://localhost:5000/;
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 ^~ /socket.io/ {
try_files $uri #node-js-myapp;
}
location #node-js-myapp {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_pass http://node-js-myapp;
}
listen [::]:443 ssl ipv6only=on; # managed by Certbot
listen 443 ssl; # managed by Certbot
ssl_certificate /etc/letsencrypt/live/subdomain.example.com/fullchain.pem; # managed by Certbot
ssl_certificate_key /etc/letsencrypt/live/subdomain.example.com/privkey.pem; # managed by Certbot
include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
}
}
React Js
import socketIOClient from 'socket.io-client';
const socket = socketIOClient(
'wss://subdomain.example.com',
{ transports: ['websocket'] }
);
socket.on('socketToMe', function (data) {
console.log(data);
socket.emit('ABC', "abcdef");
});
Node Express
var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var app = express();
var server = require('http').Server(app);
var io = require('socket.io')(server);
io.on('connection', function(socket) {
console.log("Con");
socket.on("ABC", (data) => {
console.log(data);
io.sockets.emit('socketToMe', "test test");
})
socket.on('disconnect', () => {
console.log('user disconnected')
})
})
Socket.io is not meant for connecting to a Websocket client. Read more here. You will need to use Websocket client, together with Socket.io client to broadcast data.
Socket.IO is NOT a WebSocket implementation. Although Socket.IO indeed uses WebSocket as a transport when possible, it adds some metadata to each packet: the packet type, the namespace and the packet id when a message acknowledgement is needed. That is why a WebSocket client will not be able to successfully connect to a Socket.IO server, and a Socket.IO client will not be able to connect to a WebSocket server either.
I am currently trying to set up nginx virtual server blocks, which I have me absolutely ripping my hair out.
Essentially, I have a NodeJS instance running on a droplet at DigitalOcean. The point of this application, is to host both a website as well as an api. I want both of these to run on the same droplet.
I have set up my NodeJS app with express to create the routing and so on, and then create an http server with the express app. As my explanation might cause confusion, I have included the essentials of the code below:
const API_PORT = 8080;
const WEB_PORT = 8081;
const api = express();
const web = express();
web.use(express.static(path.join(__dirname, '../build')));
web.get('//', (req, res) => {
res.sendFile(path.join(__dirname, '../build', 'index.html'));
})
api.use((req, res, next) => {
const ip = (req. headers['x-forwarded-for'] || '').split(',').pop()
|| req.connection.remoteAddress
|| req.socket.remoteAddress
|| req.connection.socket.remoteAddress
if (req.headers.auth !== AUTHCODE) {
httpError(400, 'Validation failed');
console.warn('Bad Auth Code');
console.warn(req.headers.auth);
console.warn(ip);
return (res.json('Validation failed'));
}
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', '*');
res.setHeader('Access-Control-Allow-Headers', '*');
next();
});
Graph.route(api);
const apiServer = http.createServer(api);
const webServer = http.createServer(web);
apiServer.listen(WEB_PORT, '127.0.0.1', () => {
console.log(`API Server is running on port ${API_PORT}`);
});
webServer.listen(API_PORT, '127.0.0.1', () => {
console.log(`WEB Server is running on port ${WEB_PORT}`);
});
What I want to achieve is shown in the code above, but essentially I am trying to have a my api server listening to port 8080, and my website server to listen on port 8081.
I was told that I could use nginx to create a proxy_pass for this although I have not managed to make it work as intended. Below you see two examples of what I tried to do !
Anyone able to help me out would forever be my hero !
server {
listen lace.guide:443 ssl;
server_name lace.guide www.lace.guide;
ssl_certificate /var/my-server/ssl/myapp.crt;
ssl_certificate_key /var/my-server/ssl/myapp.key;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
location / {
proxy_pass http://127.0.0.1:8080/$request_uri;
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;
}
}
server {
listen api.lace.guide:443 ssl default_server;
server_name api.lace.guide www.api.lace.guide;
ssl_certificate /var/my-server/ssl/myapp.crt;
ssl_certificate_key /var/my-server/ssl/myapp.key;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
location / {
proxy_pass http://127.0.0.1:8081/$request_uri;
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;
}
}
I am also having another quite peculiar error which means that if I access my api.lace.url/something/somethingElse it actually hits //something/somethingElse on my server (console.log from req.url)
Here is an example of how server and client live on one server and are being managed with nginx (ssl setup omitted for simplicity). All request prefixed with /api get routed to the server and the rest - to the client.
upstream client {
server client:3000;
}
upstream api {
server api:5000;
}
server {
listen 80;
location / {
proxy_pass http://client;
}
location /api {
proxy_set_header X-Forwarded-For $remote_addr;
rewrite /api/(.*) /$1 break;
proxy_pass http://api;
}
}
I am trying to set up my node server that uses express to serve files on port 3000 and the net library to serve a TCP server on port 5052, so:
const express = require('express');
const app = express();
const httpServer = require('http').Server(app);
const io = require('socket.io').listen(httpServer);
const path = require('path');
const net = require('net');
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, './public/index.html'))
});
let server = net.createServer(function(socket) {
// Left out for brevity
}
server.listen(5052, 'localhost');
httpServer.listen(3000, () => {
console.log('Ready on port 3000');
});
Locally, this all works very well. I can load up localhost:3000 and I get my HTML served and it connects to socket.io fine. I can also connect to the server on port 5052 perfectly and life is good. I just can't get nginx to serve it all correctly. Here's what I have:
server {
listen 80 default_server;
listen [::]:80 default_server;
server_name mycoolproject.com www.mycoolproject.com;
location / {
proxy_pass http://localhost:3000;
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;
}
listen 443 ssl;
ssl_certificate /etc/letsencrypt/live/mycoolproject.com/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/mycoolproject.com/privkey.pem;
include /etc/letsencrypt/options-ssl-nginx.conf;
ssl_dhparam /etc/ssl/certs/dhparam.pem;
if ($scheme != "https") {
return 301 https://$host$request_uri;
}
}
server {
listen 5053;
server_name mycoolproject.com www.mycoolproject.com;
location /{
proxy_pass http://localhost:5052;
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;
}
}
When I navigate to mycoolproject.com I get the site loaded fine, so the express side is working fine. I just can't connect to my server on 5053. Any ideas?
You need to configure a different port for Nginx, 5052 is busy by Node.js.
server {
listen 5053;
server_name mycoolproject.com www.mycoolproject.com;
location /{
proxy_pass http://localhost:5052;
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;
}
}
Then you can connect to mycoolproject.com:5053
I have been struggling trying to deploy a NodeJS server as SocketIO server on Linode. I have deployed my Django projects that works fine and I have redirected a subdomain to talk to the node server listening on port 8002 of local host.
I get a 404 error in my nginx log.
"GET /socket.io/?EIO=3&transport=polling HTTP/1.1" 404 72 "-" "Dalvik/2.1.0 (Linux; U; Android 5.0.1; LG-D850 Build/LRX21Y)"
Here is my nginx config
server {
listen 80;
server_name www.domain.com;
location / {
proxy_pass http://127.0.0.1:8000;
}
location /static {
alias /home/exampledir/staticfiles;
}
access_log /home/exampledir/nginx-access.log;
error_log /home/exampledir/nginx-error.log info;
}
server {
listen 80;
server subdomain.domain.com;
location / {
proxy_pass http://127.0.0.1:8002;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection $connection_upgrade;
}
}
Here is my nodejs server file
var socket = require('socket.io');
var express = require('express');
var http = require('http');
var app = express();
var server = http.createServer(app);
server.listen(8002, '127.0.0.1');
var io = socket.listen(server);
var redis = require('redis');
var sub = redis.createClient();
sub.subscribe('notify');
io.on('connection', function(socket){
socket.on('join', function (data) {
...
});
});
//Grab message from Redis and send to client
sub.on('message', function(channel, message){
...
});
I have tried using CORS and stuff but it does not work just keeps giving me a 404. I have verified the node server is running at 127.0.0.1:8002
My android socket is connecting to
mSocket = IO.socket("http://subdomain.domain.com/);
Please help.
Try this config
server {
listen 80;
# Make site accessible from http://localhost/
server_name domain.com;
location / {
proxy_pass http://127.0.0.1:8000;
}
location / {
proxy_pass http://127.0.0.1:8000;
}
location /static {
alias /home/example-dir/staticfiles;
}
access_log /home/example-dir/nginx-access.log;
error_log /home/example-dir/nginx-error.log info;
}
server {
listen 80;
server_name subdomain.domain.com;
location / {
proxy_pass http://127.0.0.1:8002;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header Host $host;
}
access_log /home/example-dir/socketnginx-access.log;
error_log /home/example-dir/socketnginx-error.log info;
}