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.
|
|
|
|
|
<!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> <nav> <input type="checkbox" id="menu"> <label for="menu">☰</label> <div class="menu-content"> <a href="/" class="nav-link">Home</a> <a href="/blog/" class="nav-link">Blog</a> <a href="https://github.com/TTWNO/" class="nav-link" target="_blank" rel="noopener noreferrer">Github</a> </div> </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 is mirrored on <a href="https://beta.tait.tech/2020/05/01/nginx-socket-io-projects/">beta.tait.tech</a>. </footer> </div> </body> </html>
|
