You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
tait.tech/_site/2020/05/01/nginx-socket-io-projects.html

101 lines
3.7 KiB

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>How to use NGINX as a reverse-proxy server for a Node.js application using socket.io | tait.tech</title>
<link rel="stylesheet" href="/assets/css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="wrapper">
<nav>
<input type="checkbox" id="menu">
<label for="menu">&#9776;</label>
<div class="menu-content">
<a href="/" class="nav-link" >Home</a>
<a href="/tutoring/" class="nav-link" >Tutoring</a>
<a href="/blog/" class="nav-link" >Blog</a>
<a href="/links/" class="nav-link" >Links</a>
<a href="https://github.com/TTWNO/" class="nav-link" target="_blank" rel="noopener noreferrer" >Code</a>
</div>
</nav>
<h1>How to use NGINX as a reverse-proxy server for a Node.js application using socket.io</h1>
<h4 class="post-date line-under">Friday, May 01 2020</h4>
<div class="article">
<p>Despite the long name of the article, I have a feeling this may apply to more people than I might think.
If you have a Node.js application which needs socket.io connections that you want to pass throgh nginxs <code class="highlighter-rouge">reverse_proxy</code> directive then this is the article for you!</p>
<p>You <em>must</em> seperate the socket.io sockets and the static resources.</p>
<ul>
<li>The socket connections can be routed through the default <code class="highlighter-rouge">$host/socket.io</code> if you want to ease modifications to the source code.</li>
<li>The connections to your main npm Node.js application can be routed through the relevant directory.</li>
</ul>
<p>Here is the relevant part of my <code class="highlighter-rouge">projects.tait.tech.conf</code> file:</p>
<pre class="terminal">
location /socket.io {
proxy_pass http://localhost:8080/socket.io/;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_http_version 1.1;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $host;
}
location /ttrpg {
proxy_pass http://localhost:8080/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
</pre>
<h3 id="explaination">Explaination:</h3>
<p>For this application,
I needed the <code class="highlighter-rouge">/ttrpg</code> directory to connect to my main Node.js instance. This was going to be the root of a ttrpg project.
It was to have static files served form my Node.js application.</p>
<p>I also needed <code class="highlighter-rouge">/socket.io</code> to conenct to my running <code class="highlighter-rouge">npm</code> instance.
When I tried to route all the traffic through the <code class="highlighter-rouge">/trrpg</code> location directive
I had no luck whatsoever;
<code class="highlighter-rouge">$host/ttrpg/socket.io/*</code> calls <em>always</em> failed with a 404.</p>
<p>Having two seperate blocks forwarding in different ways seems to fix this.
I am not knowledgable enough to understand how.</p>
<p>For now, the project is alive!!!</p>
<p>Happy hacking!</p>
<p><em>P.S. I forgot to mention I also symbolically linked the <code class="highlighter-rouge">socket.io.js</code> file (that node is supposed to serve automatically) to the static client dir.
For some reson the node instance would not serve this file without that.</em></p>
<pre class="terminal">
$ pwd
/home/user/ttrpg.co/client
$ ln -s ../server/node_modules/socket.io-client/dist/socket.io.js .
</pre>
<p><em>Happy hacking 2.0!</em></p>
</div>
<footer>
This page is mirrored on <a href="https://beta.tait.tech/2020/05/01/nginx-socket-io-projects.html">beta.tait.tech</a>.
</footer>
</div>
</body>
</html>