My Apache setup is like this:
## MAIN WEBSITE ##
<VirtualHost *:443>
ServerAdmin admin@mywebsite.com
ServerName www.mywebsite.com
ServerAlias mywebsite.com
DocumentRoot /home/username/mywebsite.com
ProxyRequests Off
## SOCKET SETUP FOR MY EXISTING NODE.JS APP THAT RUNS ON PORT 3000
#####################################################################
RewriteCond %{QUERY_STRING} transport=polling [NC]
RewriteRule /(.*) http://127.0.0.1:3000/$1 [P]
RewriteCond %{HTTP:Upgrade} websocket [NC]
RewriteRule /(.*) ws://127.0.0.1:3000/$1 [P]
<Location /cnode2/>
ProxyPass http://127.0.0.1:3000/
ProxyPassReverse http://127.0.0.1:3000/
</Location>
</VirtualHost>
## SUB-DOMAIN DEDICATED SOLELY FOR PHOENIX PROJECT - PORT 4000
<VirtualHost *:80>
ServerAdmin admin@mywebsite.com
ServerName ex.mywebsite.com
RewriteEngine on
RewriteCond %{SERVER_NAME} =ex.mywebsite.com
RewriteRule ^ https://%{SERVER_NAME}%{REQUEST_URI} [END,NE,R=permanent]
</VirtualHost>
<VirtualHost *:443>
ServerAdmin admin@mywebsite.com
ServerName ex.mywebsite.com
DocumentRoot /home/username/mywebsite.com
ErrorLog ${APACHE_LOG_DIR}/error.log
CustomLog ${APACHE_LOG_DIR}/access.log combined
RewriteEngine on
RewriteCond %{HTTP:Upgrade} websocket [NC]
RewriteCond %{HTTP:Connection} upgrade [NC]
RewriteRule ^/?(.*) "ws://127.0.0.1:4000/$1" [P,L]
ProxyRequests Off
ProxyPass / http://127.0.0.1:4000/
ProxyPassReverse / http://127.0.0.1:4000/
ProxyPass /socket/ ws://127.0.0.1:4000/socket/
ProxyPassReverse /socket/ ws://127.0.0.1:4000/socket/
</VirtualHost>
Here is the HTML Source Code for my simple test page at https://www.mywebsite.com/test.php:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Exchat · Phoenix Framework</title>
<link rel="stylesheet" href="https://ex.mywebsite.com/css/app.css"/>
<script defer type="text/javascript" src="https://ex.mywebsite.com/js/app.js"></script>
</head>
<body>
<header>
<section class="container">
<nav role="navigation">
<ul>
<li><a href="https://hexdocs.pm/phoenix/overview.html">Get Started</a></li>
<li><a href="https://ex.mywebsite.com/dashboard">LiveDashboard</a></li>
</ul>
</nav>
<a href="https://phoenixframework.org/" class="phx-logo">
<img src="https://ex.mywebsite.com/images/phoenix.png" alt="Phoenix Framework Logo"/>
</a>
</section>
</header>
<main role="main" class="container">
<p class="alert alert-info" role="alert"></p>
<p class="alert alert-danger" role="alert"></p>
<section class="phx-hero">
<h1>Welcome to Phoenix!</h1>
<p>Peace of mind from prototype to production</p>
</section>
<section class="row">
<article class="column">
<h2>Resources</h2>
<ul>
<li>
<a href="https://hexdocs.pm/phoenix/overview.html">Guides & Docs</a>
</li>
<li>
<a href="https://github.com/phoenixframework/phoenix">Source</a>
</li>
<li>
<a href="https://github.com/phoenixframework/phoenix/blob/v1.5/CHANGELOG.md">v1.5 Changelog</a>
</li>
</ul>
</article>
<article class="column">
<h2>Help</h2>
<ul>
<li>
<a href="https://elixirforum.com/c/phoenix-forum">Forum</a>
</li>
<li>
<a href="https://webchat.freenode.net/?channels=elixir-lang">#elixir-lang on Freenode IRC</a>
</li>
<li>
<a href="https://twitter.com/elixirphoenix">Twitter @elixirphoenix</a>
</li>
<li>
<a href="https://elixir-slackin.herokuapp.com/">Elixir on Slack</a>
</li>
</ul>
</article>
</section>
</main>
<iframe hidden height="0" width="0" src="https://ex.mywebsite.com/phoenix/live_reload/frame"></iframe></body>
</html>
Basically, on a page on my main domain name “mywebsite.com”, I’m loading up the css, js and images externally from the phoenix project set up on my subdomain “ex.mywebsite.com”. Everything appears to load up fine, but there are still issues with the web sockets not working.
In the developer console, I am getting errors like:
WebSocket connection to 'wss://www.mywebsite.com/socket/websocket?token=undefined&vsn=2.0.0' failed: Error during WebSocket handshake: Invalid status line
In the network “waterfall”, I am seeing these socket requests/responses:
(this one shows up only once for the proper sub-domain "ex.mywebsite.com", the initiator is "frame", which is probably the iframe url in the HTML source code.)
GENERAL:
Request URL: wss://ex.mywebsite.com/phoenix/live_reload/socket/websocket?vsn=2.0.0
Request Method: GET
Status Code: 101 Switching Protocols
RESPONSE:
cache-control: max-age=0, private, must-revalidate
connection: Upgrade
date: Tue, 24 Aug 2021 04:39:43 GMT
sec-websocket-accept: ikc2MBZrO94E7m7sVm0KO6fJEW4=
server: Cowboy
upgrade: websocket
REQUEST:
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Cache-Control: no-cache
Connection: Upgrade
Host: ex.mywebsite.com
Origin: https://ex.mywebsite.com
Pragma: no-cache
Sec-WebSocket-Extensions: permessage-deflate; client_max_window_bits
Sec-WebSocket-Key: n18b2ofXGa0LGw5y08m+IA==
Sec-WebSocket-Version: 13
Upgrade: websocket
User-Agent: Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.159 Mobile Safari/537.36 Edg/92.0.902.78
and:
(this is a repeating error, and is NOT using the "ex.mywebsite.com" subdomain either. The initiator is "phoenix.js?31bb:1", which I'm assuming is the main app.js file.)
GENERAL:
Request URL: wss://www.mywebsite.com/socket/websocket?token=undefined&vsn=2.0.0
REQUEST:
Provisional headers are shown
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Cache-Control: no-cache
Connection: Upgrade
Host: www.mywebsite.com
Origin: https://www.mywebsite.com
Pragma: no-cache
Sec-WebSocket-Extensions: permessage-deflate; client_max_window_bits
Sec-WebSocket-Key: ikzQ6SHJAzRMQWczj+mLug==
Sec-WebSocket-Version: 13
Upgrade: websocket
User-Agent: Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.159 Mobile Safari/537.36 Edg/92.0.902.78
Reminder: in the apache config above for the main site “mywebsite.com”, I have a web socket setup for an existing node app on port 3000. I’m not sure if this makes a difference or not, if my phoenix app and phoenix socket script is loaded on the “ex.mywebsite.com” subdomain on port 4000. Hopefully it won’t matter. As a test, I commented out the node config in apache anyways, but made no difference at all with my web socket errors, still getting them. There is something else causing the issue.
An explanation and fix would be greatly appreciated. It seems like I’m so close to finally getting my website “desktop” all prepared so I can actually start developing actual apps!