Frontend on rootdomain (Apache) Backend on subdomain (Node) -> Websocket connection failed - node.js

Here is my tricky problem:
I want to make my frontend and backend working on same VPS dedicated server.
Frontend is an angular built app compiled to HTML, served by Apache with virtualhost on port 443 so that SSL is working on domain.com
Backend is a node app using websockets (socket.io) running on port 3000, so I made another virtualhost with ProxyPass to redirect port 443 to port 3000, working on api.domain.com
Here is the result config:
<IfModule mod_ssl.c>
<VirtualHost *:443>
ServerName domain.com
ServerAlias www.domain.com
DocumentRoot /var/www/html/
SSLEngine on
SSLCertificateFile /etc/letsencrypt/live/domain.com/fullchain.pem
SSLCertificateKeyFile /etc/letsencrypt/live/domain.com/privkey.pem
</VirtualHost>
<VirtualHost *:443>
ServerName api.domain.com
ServerAlias www.api.domain.com
SSLCertificateFile /etc/letsencrypt/live/domain.com/fullchain.pem
SSLCertificateKeyFile /etc/letsencrypt/live/domain.com/privkey.pem
Include /etc/letsencrypt/options-ssl-apache.conf
ProxyRequests off
ProxyPass / http://127.0.0.1:3000/
ProxyPassReverse / http://127.0.0.1:3000/
</VirtualHost>
</IfModule>
Everything works fine, except Websocket that shows error:
WebSocket connection on wss://domain.com failed
By searching the web I found following config but it didnt worked either.
RewriteEngine On
RewriteCond %{HTTP:Connection} Upgrade [NC]
RewriteCond %{HTTP:Upgrade} websocket [NC]
RewriteRule /(.*) ws://127.0.0.1:3000/$1 [P,L]
Making further researches, I came up to the conclusion that websocket needs to be running on port 443 to work correctly. Am I correct ? or is there any solution to make it work on port 3000 ?
In the case where port 443 is required, how would I do to serve frontend and backend on both port 443 ? I sounds like just impossible, so I will probabely have to install frontend on another server...
Can someone can give me any advices about how to fix this problem ?
Thank you

Related

Proxyreverse in Apache2 with wordpress

I have installed and configured Wordpress on my server using also apach2 virtualhosts.
I made a virtualhost with this config
<VirtualHost *:80 *:443>
ServerAdmin yourluxuryroad#gmail.com
ServerName yourluxuryroad.com
ServerAlias www.yourluxuryroad.com
DocumentRoot /var/www/yourluxuryroad
ErrorLog ${APACHE_LOG_DIR}/error.log
CustomLog ${APACHE_LOG_DIR}/access.log combined
RewriteEngine on
RewriteCond %{SERVER_NAME} =www.yourluxuryroad.com [OR]
RewriteCond %{SERVER_NAME} =yourluxuryroad.com
RewriteRule ^ https://%{SERVER_NAME}%{REQUEST_URI} [END,NE,R=permanent]
ProxyPreserveHost On
ProxyRequests Off
ProxyPass /node-yrl-book http://localhost:5000
ProxyPassReverse /node-yrl-book http://localhost:5000
</VirtualHost>
<Directory /var/www/yourluxuryroad/>
AllowOverride All
</Directory>
As you can see from the config i'm trying to set the ProxyPass directive for redirect the requests recived on the path /node-yrl-book to a nodejs service ( made using expressjs ) at port 5000 but this is not working, instead of getting a redirect to that service i get the 404 Page not found wordpress page.
If I make a request at my_ip/node-yrl-book instead it works correctly and i am redirected to the service at port :5000
I suppose that i'm missing something in my configuration but i'm not understanding what..
Maybe is something in wordpress that has to be changed?
You have way too much going on.
ProxyPass -or- DocumentRoot, not both.
You can either serve the page from apache (by using DocumentRoot), or you can serve the page from nodejs (by using ProxyPass).
Finally i solved this, I made an SSL certificate for my website using let's encrypt certbot, This script created a new virtualhost in another file for the https requests ( called /etc/apache2/sites-available/myDomain-le-ssl.conf ) That virtualhost was overriding my proxypass directive, editing also this virtualhost made all work

Node.js app works via HTTP but doesn't work via HTTPS

I'm trying to make a Node.js + Express + Vue.js + Apache + MySQL application work on my server via HTTPS protocol. (works fine locally or via HTTP on the server).
There is a URL (subdomain) for API which returns a JSON result, let's say "api.mysite.com".
I tried different approaches, right now I use port 443 in my app.js (it doesn't help):
const PORT = process.env.PORT || 443
app.listen(PORT, () => {
console.log(`Server stated on port ${PORT}`)
})
On my local machine I use port 5000 and access the app by "http://locahost:5000" (and it works fine).
"/etc/apache2/sites-available/my-site-api.conf":
<VirtualHost *:80>
ServerName api.mysite.com
ServerAlias api.mysite.com
DocumentRoot /var/www/mysite/api
RewriteEngine on
RewriteCond %{SERVER_NAME} =api.mysite.com
RewriteRule ^ https://%{SERVER_NAME}%{REQUEST_URI} [END,NE,R=permanent]
</VirtualHost>
"/etc/apache2/sites-available/my-site-api-le-ssl.conf":
<IfModule mod_ssl.c>
<VirtualHost *:443>
ServerName api.mysite.com
ServerAlias api.mysite.com
DocumentRoot /var/www/mysite/api
ErrorLog ${APACHE_LOG_DIR}/error.log
CustomLog ${APACHE_LOG_DIR}/access.log combined
RewriteEngine on
# Some rewrite rules in this file were disabled on your HTTPS site,
# because they have the potential to create redirection loops.
# RewriteCond %{SERVER_NAME} =api.mysite.com [OR]
# RewriteCond %{SERVER_NAME} =api.mysite.com
# RewriteRule ^ https://%{SERVER_NAME}%{REQUEST_URI} [END,NE,R=permanent]
Include /etc/letsencrypt/options-ssl-apache.conf
SSLCertificateFile /etc/letsencrypt/live/api.mysite.com/fullchain.pem
SSLCertificateKeyFile /etc/letsencrypt/live/api.mysite.com/privkey.pem
</VirtualHost>
</IfModule>
Let me know if you need any other info.
Thanks a lot in advance!
Looks like both Apache and your app are configured to listen at port 443.
I assume the essence error you're getting is that there should be only one listener per port, and it tells you that 443 is already busy by apache.
I can see 2 ways to go, if you want to expose your app under HTTPS/443
set up Apache as a proxy, so that it listens to 443 and forwards requests to your app (which should continue to listen to 5000).
That would require adding into Apache config something like this:
ProxyPass "/" "http://localhost:5000"
Avoid using Apache and expose your app under https directly.
In this case you'd have to supply your app initialization with params telling where to find the certificates, and you will have to run your app as a super user.
More details here: Enabling HTTPS on express.js

Apache2 Websocket Proxy for Mattermost from dynamic dns host

i'm using mattermost locally at home in a Vagrant Virtual Machine. With Port Forwarding on my DSL Router, i map the web frontend on a subomain on my WAN vHost with fixed IP.
<VirtualHost *:80>
ServerName chat.domain.tld
ServerSignature Off
ProxyPreserveHost On
<Location />
Order deny,allow
Allow from all
ProxyPassReverse http://chat.domain.tld/
</Location>
RewriteEngine on
RewriteCond %{DOCUMENT_ROOT}/%{REQUEST_FILENAME} !-f
RewriteRule .* http://mappedsubdomain.somedyndns.tld:8090%{REQUEST_URI} [P,QSA]
DocumentRoot /somewhere/on/my/disk
</VirtualHost>
And that works fine! In this case i'm mapped the Web Frontend from Port 8090 to the port 80 on the vHost Subdomain. And the Web-Frontend is reachable.
But.
mattermost is using another Port to communicate with the Web-Frontend over Websockets. For that i also forwarded the Websocket Port from my local Machine. If i'm accessing the Dynamic DNS Host Url: http://mappedsubdomain.somedyndns.tld:8090 the Web-Fontend works well WITH the second opened Port for Websockets. Mattermost is usable on the Dynamic DNS Host Url.
As Default Mattermost is using Port 80 for the Websockets. But in my case, i'm using port 890 for the Websockets in Mattermost. It works locally, inside the LAN and over the Dynamic DNS Host.
Now, i want to make a ProxyReverse withe the Websocket Protocol.
The WAN-Host is a Debian with Apache2.2 and the loaded mod_proxy_wstunnel Module.
At first, i tried simply to map the second Port:
Listen 890
<VirtualHost *:890>
ServerName chat.domain.tld
ServerSignature off
ProxyRequests off
RewriteEngine on
RewriteCond %{HTTP:Upgrade} =websocket [NC]
RewriteRule /(.*) ws://mappedsubdomain.somedyndns.tld:890/$1 [P,L]
RewriteCond %{HTTP:Upgrade} !=websocket [NC]
RewriteRule /(.*) http://mappedsubdomain.somedyndns.tld:890/$1 [P,L]
<Location />
Order deny,allow
Allow from all
ProxyPassReverse http://mappedsubdomain.somedyndns.tld:890/
ProxyPassReverse ws://mappedsubdomain.somedyndns.tld:890/
</Location>
DocumentRoot /somewhere/on/my/disk
</VirtualHost>
But nothing. Websockets not working.
Then i tried it from a on the WAN vHost running NodeJS Websocket Tunnel:
https://www.npmjs.com/package/wstunnel
With this call:
wstunnel -t 8091 ws://mappedsubdomain.somedyndns.tld:890/
and with changed Virtual Host Config:
RewriteRule /(.*) ws://localhost:8091/$1
RewriteRule /(.*) http://localhost:8091/$1 [P,L]
ProxyPassReverse ws://localhost:8091/
ProxyPassReverse http://localhost:8091/
When wstunnel is running, a http Request on chat.domain.tld:890 ends with a timeout. Without wstunnel, i've got a 503.
Have anyone a helpful hint for me?
#seekwhencer Would this guide help? https://docs.mattermost.com/install/config-proxy-apache2.html
For troubleshooting WebSocket connections, this page might help: https://docs.mattermost.com/install/troubleshooting.html#please-check-connection-mattermost-unreachable-if-issue-persists-ask-administrator-to-check-websocket-port

Apache and Node on same IP

I have a single VPS with one IP. I'm using Apache to serve cloud.mysite.com and I have a NodeJS application listening on port 3000.
I'm trying to configure my VPS in a way so that when I visit mysite.com, I get my NodeJS application.
Instead, when I visit mysite.com, I'm forwarded to cloud.mysite.com.
My .conf files are below.
mysite.com.conf
<VirtualHost mysite.com:80>
ServerName mysite.com
ProxyPreserveHost On
ProxyRequests off
ProxyPass / http://localhost:3000/
ProxyPassReverse / http://localhost:3000/
</VirtualHost>
cloud.mysite.com
<VirtualHost cloud.mysite.com:80>
ServerName cloud.mysite.com
RewriteEngine on
RewriteCond %{SERVER_NAME} =cloud.mysite.com
RewriteRule ^ https://%{SERVER_NAME}%{REQUEST_URI} [END,QSA,R=permanent]
</VirtualHost>
<VirtualHost cloud.mysite.com:443>
# Basics
ServerName www.cloud.mysite.com
ServerAlias www.cloud.mysite.com
# Next line puts ownCloud at the domain root instead of a /owncloud/ subdirectory (e.g. example.com vs. example.com/owncloud/)
Alias /owncloud "/var/www/owncloud/"
DocumentRoot /var/www/owncloud
# SSTL STUFF GOES HERE
# ownCloud
<Directory /var/www/owncloud/>
Options +FollowSymlinks
AllowOverride All
<IfModule mod_dav.c>
Dav off
</IfModule>
SetEnv HOME /var/www/owncloud
SetEnv HTTP_HOME /var/www/owncloud
</Directory>
</VirtualHost>
SSLStaplingCache shmcb:/var/run/ocsp(128000)
Edit: I resolved this by clearing my cache.
It seems that it should proxy requests to your Node app if it's running on and listening on port 3000 on the same host, or fail if it isn't - but not to proxy requests to the other virtual host.
Make sure that you restarted Apache or made it reload the configuration after you made those changes and that your new config file is where it should be and is enabled.

WebSockets and Apache proxy: how to configure mod_proxy_wstunnel?

I have :
Apache 2.4 on port 80 of my server, with mod_proxy and mod_proxy_wstunnel enabled
Node.js + socket.io on port 3001 of the same server
Accessing example.com (with port 80) redirects to 2. thanks to this method with the following Apache configuration:
<VirtualHost *:80>
ServerName example.com
ProxyPass / http://localhost:3001/
ProxyPassReverse / http://localhost:3001/
ProxyPass / ws://localhost:3001/
ProxyPassReverse / ws://localhost:3001/
</VirtualHost>
It works for everything, except the websocket part : ws://... are not transmitted like it should by the proxy.
When I access the page on example.com, I have:
Impossible to connect ws://example.com/socket.io/?EIO=3&transport=websocket&sid=n30rqg9AEqZIk5c9AABN.
Question: How to make Apache proxy the WebSockets as well?
I finally managed to do it, thanks to this topic. TODO:
1) Have Apache 2.4 installed (doesn't work with 2.2), and do:
a2enmod proxy
a2enmod proxy_http
a2enmod proxy_wstunnel
2) Have nodejs running on port 3001
3) Do this in the Apache config
<VirtualHost *:80>
ServerName example.com
RewriteEngine On
RewriteCond %{REQUEST_URI} ^/socket.io [NC]
RewriteCond %{QUERY_STRING} transport=websocket [NC]
RewriteRule /(.*) ws://localhost:3001/$1 [P,L]
ProxyPass / http://localhost:3001/
ProxyPassReverse / http://localhost:3001/
</VirtualHost>
Note: if you have more than one service on the same server that uses websockets, you might want to do this to separate them.
Instead of filtering by URL, you can also filter by HTTP header. This configuration will work for any web applications that use websockets, also if they are not using socket.io:
<VirtualHost *:80>
ServerName www.domain2.com
RewriteEngine On
RewriteCond %{HTTP:Upgrade} =websocket [NC]
RewriteRule /(.*) ws://localhost:3001/$1 [P,L]
RewriteCond %{HTTP:Upgrade} !=websocket [NC]
RewriteRule /(.*) http://localhost:3001/$1 [P,L]
ProxyPassReverse / http://localhost:3001/
</VirtualHost>
May be will be useful.
Just all queries send via ws to node
<VirtualHost *:80>
ServerName www.domain2.com
<Location "/">
ProxyPass "ws://localhost:3001/"
</Location>
</VirtualHost>
As of Socket.IO 1.0 (May 2014), all connections begin with an HTTP polling request (more info here). That means that in addition to forwarding WebSocket traffic, you need to forward any transport=polling HTTP requests.
The solution below should redirect all socket traffic correctly, without redirecting any other traffic.
Enable the following Apache2 mods:
sudo a2enmod proxy rewrite proxy_http proxy_wstunnel
Use these settings in your *.conf file (e.g. /etc/apache2/sites-available/mysite.com.conf). I've included comments to explain each piece:
<VirtualHost *:80>
ServerName www.mydomain.com
# Enable the rewrite engine
# Requires: sudo a2enmod proxy rewrite proxy_http proxy_wstunnel
# In the rules/conds, [NC] means case-insensitve, [P] means proxy
RewriteEngine On
# socket.io 1.0+ starts all connections with an HTTP polling request
RewriteCond %{QUERY_STRING} transport=polling [NC]
RewriteRule /(.*) http://localhost:3001/$1 [P]
# When socket.io wants to initiate a WebSocket connection, it sends an
# "upgrade: websocket" request that should be transferred to ws://
RewriteCond %{HTTP:Upgrade} websocket [NC]
RewriteRule /(.*) ws://localhost:3001/$1 [P]
# OPTIONAL: Route all HTTP traffic at /node to port 3001
ProxyRequests Off
ProxyPass /node http://localhost:3001
ProxyPassReverse /node http://localhost:3001
</VirtualHost>
I've included an extra section for routing /node traffic that I find handy, see here for more info.
With help from these answers, I finally got reverse proxy for Node-RED running on a Raspberry Pi with Ubuntu Mate and Apache2 working, using this Apache2 site config:
<VirtualHost *:80>
ServerName nodered.domain.com
RewriteEngine On
RewriteCond %{HTTP:Upgrade} =websocket [NC]
RewriteRule /(.*) ws://localhost:1880/$1 [P,L]
RewriteCond %{HTTP:Upgrade} !=websocket [NC]
RewriteRule /(.*) http://localhost:1880/$1 [P,L]
</VirtualHost>
I also had to enable modules like this:
sudo a2enmod proxy
sudo a2enmod proxy_http
sudo a2enmod proxy_wstunnel
For me it works after adding only one line in httpd.conf as below (bold line).
<VirtualHost *:80>
ServerName: xxxxx
#ProxyPassReverse is not needed
ProxyPass /log4j ws://localhost:4711/logs
<VirtualHost *:80>
Apache version is 2.4.6 on CentOS.
Did the following for a spring application running static, rest and websocket content.
The Apache is used as Proxy and SSL Endpoint for the following URIs:
/app → static content
/api → REST API
/api/ws → websocket
Apache configuration
<VirtualHost *:80>
ServerName xxx.xxx.xxx
ProxyRequests Off
ProxyVia Off
ProxyPreserveHost On
<Proxy *>
Require all granted
</Proxy>
RewriteEngine On
# websocket
RewriteCond %{HTTP:Upgrade} =websocket [NC]
RewriteRule ^/api/ws/(.*) ws://localhost:8080/api/ws/$1 [P,L]
# rest
ProxyPass /api http://localhost:8080/api
ProxyPassReverse /api http://localhost:8080/api
# static content
ProxyPass /app http://localhost:8080/app
ProxyPassReverse /app http://localhost:8080/app
</VirtualHost>
I use the same vHost config for the SSL configuration, no need to change anything proxy related.
Spring configuration
server.use-forward-headers: true
My setup:
Apache 2.4.10 (running off Debian)
Node.js (version 4.1.1) App running on port 3000 that accepts WebSockets at path /api/ws
As mentioned above by #Basj, make sure a2enmod proxy and ws_tunnel are enabled.
This is a screenshot of the Apache config file that solved my problem:
The relevant part as text:
<VirtualHost *:80>
ServerName *******
ServerAlias *******
ProxyPass / http://localhost:3000/
ProxyPassReverse / http://localhost:3000/
<Location "/api/ws">
ProxyPass "ws://localhost:3000/api/ws"
</Location>
</VirtualHost>
Hope that helps.
In addition to the main answer: if you have more than one service on the same server that uses websockets, you might want to do this to separate them, by using a custom path (*):
Node server:
var io = require('socket.io')({ path: '/ws_website1'}).listen(server);
Client HTML:
<script src="/ws_website1/socket.io.js"></script>
...
<script>
var socket = io('', { path: '/ws_website1' });
...
Apache config:
RewriteEngine On
RewriteRule ^/website1(.*)$ http://localhost:3001$1 [P,L]
RewriteCond %{REQUEST_URI} ^/ws_website1 [NC]
RewriteCond %{QUERY_STRING} transport=websocket [NC]
RewriteRule ^(.*)$ ws://localhost:3001$1 [P,L]
RewriteCond %{REQUEST_URI} ^/ws_website1 [NC]
RewriteRule ^(.*)$ http://localhost:3001$1 [P,L]
(*) Note: using the default RewriteCond %{REQUEST_URI} ^/socket.io would not be specific to a website, and websockets requests would be mixed up between different websites!
User this link for perfact solution for ws https://httpd.apache.org/docs/2.4/mod/mod_proxy_wstunnel.html
You have to just do below step..
Go to /etc/apache2/mods-available
Step...1
Enable mode proxy_wstunnel.load by using below command
$a2enmod proxy_wstunnel.load
Step...2
Go to /etc/apache2/sites-available
and add below line in your .conf file inside virtual host
ProxyPass "/ws2/" "ws://localhost:8080/"
ProxyPass "/wss2/" "wss://localhost:8080/"
Note : 8080 mean your that your tomcat running port because we want to connect ws where our War file putted in tomcat and tomcat serve apache for ws.
thank you
My Configuration
ws://localhost/ws2/ALLCAD-Unifiedcommunication-1.0/chatserver?userid=4 =Connected
For "polling" transport.
Apache side:
<VirtualHost *:80>
ServerName mysite.com
DocumentRoot /my/path
ProxyRequests Off
<Proxy *>
Order deny,allow
Allow from all
</Proxy>
ProxyPass /my-connect-3001 http://127.0.0.1:3001/socket.io
ProxyPassReverse /my-connect-3001 http://127.0.0.1:3001/socket.io
</VirtualHost>
Client side:
var my_socket = new io.Manager(null, {
host: 'mysite.com',
path: '/my-connect-3001'
transports: ['polling'],
}).socket('/');
TODO:
Have Apache 2.4 installed (doesn't work with 2.2), a2enmod proxy and a2enmod proxy_wstunnel.load
Do this in the Apache config
just add two line in your file where 8080 is your tomcat running port
<VirtualHost *:80>
ProxyPass "/ws2/" "ws://localhost:8080/"
ProxyPass "/wss2/" "wss://localhost:8080/"
</VirtualHost *:80>
For the same issue on Windows, just uncomment the below line from http.conf:
Then add the below line to your apache config:
LoadModule proxy_module modules/mod_proxy_wstunnel.so

Resources