|
|
|
|
|
<!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">
|
|
|
|
|
|
<meta name="author" content="Tait Hoyem">
|
|
|
|
|
|
<meta name="keywords" content="">
|
|
|
|
|
|
<meta name="description" content="">
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
|
|
<div id="wrapper">
|
|
|
|
|
|
<header>
|
|
|
|
|
|
<h1>tait.tech</h1>
|
|
|
|
|
|
|
|
|
|
|
|
<nav>
|
|
|
|
|
|
|
|
|
|
|
|
<a href="/" class="nav-link" >Home</a>
|
|
|
|
|
|
|
|
|
|
|
|
<a href="/blog/" class="nav-link" >Blog</a>
|
|
|
|
|
|
|
|
|
|
|
|
<a href="/ideas/" class="nav-link" >Ideas</a>
|
|
|
|
|
|
|
|
|
|
|
|
<a href="/links/" class="nav-link" >Links</a>
|
|
|
|
|
|
|
|
|
|
|
|
<a href="https://github.com/TTWNO/" class="nav-link" target="_blank" rel="noopener noreferrer" >Github</a>
|
|
|
|
|
|
|
|
|
|
|
|
</nav>
|
|
|
|
|
|
|
|
|
|
|
|
</header>
|
|
|
|
|
|
<main>
|
|
|
|
|
|
<article>
|
|
|
|
|
|
<header>
|
|
|
|
|
|
<h1 class="post-title">How to use NGINX as a reverse-proxy server for a Node.js application using socket.io</h1>
|
|
|
|
|
|
<time datetime="20-05-01" class="post-date">Friday, May 01 2020</time>
|
|
|
|
|
|
</header>
|
|
|
|
|
|
<hr>
|
|
|
|
|
|
|
|
|
|
|
|
<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 nginx’s <code class="language-plaintext 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="language-plaintext 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="language-plaintext 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="language-plaintext 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="language-plaintext highlighter-rouge">/socket.io</code> to conenct to my running <code class="language-plaintext highlighter-rouge">npm</code> instance.
|
|
|
|
|
|
When I tried to route all the traffic through the <code class="language-plaintext highlighter-rouge">/trrpg</code> location directive
|
|
|
|
|
|
I had no luck whatsoever;
|
|
|
|
|
|
<code class="language-plaintext 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="language-plaintext 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>
|
|
|
|
|
|
|
|
|
|
|
|
</article>
|
|
|
|
|
|
|
|
|
|
|
|
</main>
|
|
|
|
|
|
<hr>
|
|
|
|
|
|
<footer>
|
|
|
|
|
|
This page will be mirrored on <a href="https://beta.tait.tech/2020/05/01/nginx-socket-io-projects/">beta.tait.tech</a>.
|
|
|
|
|
|
|
|
|
|
|
|
</footer>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
