<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Viral Patel</title>
    <description>The latest articles on DEV Community by Viral Patel (@patelviral_12).</description>
    <link>https://dev.to/patelviral_12</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F158867%2Fad15e1da-d403-4379-a5e5-c8c1a11077c0.jpg</url>
      <title>DEV Community: Viral Patel</title>
      <link>https://dev.to/patelviral_12</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/patelviral_12"/>
    <language>en</language>
    <item>
      <title>Proxying Nodejs Requests using Nginx</title>
      <dc:creator>Viral Patel</dc:creator>
      <pubDate>Sat, 01 Jun 2019 07:21:24 +0000</pubDate>
      <link>https://dev.to/patelviral_12/proxying-nodejs-requests-using-nginx-56h0</link>
      <guid>https://dev.to/patelviral_12/proxying-nodejs-requests-using-nginx-56h0</guid>
      <description>&lt;p&gt;Hey guys, I am viral. I am a Full Stack Developer mainly working with Vuejs, Laravel, Nodejs and AWS. Today we will be learning how we can proxy requests on port 80 to a different port using Nginx Reverse Proxy so that we deploy a intermediate web-server to load-balance or use a single ssl for all our small servers or just as a POC for my company. Cheers!&lt;/p&gt;

&lt;p&gt;This is a very basic tutorial and emphasizes understanding the reverse proxy feature of Nginx.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Let's begin,&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;We will use Nginx's Reverse Proxy since it is like something out of this world and blows my mind. What I am trying to achieve here is to understand how we can run an Nginx Server and proxy incoming requests from port 80 (Default port on most webservers) to a different port that is running a Nodejs server (Maybe port 3000). Let's assume port we are running our test Nodejs app on port 4040 for now.&lt;/p&gt;

&lt;p&gt;We will start by setting up a Nodejs application using Express and socket so that we can see it in working and a Nginx server.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Nginx&lt;/strong&gt; &lt;/p&gt;

&lt;p&gt;To Perform this, you will need to have Nginx Setup. Once it is done, open up the default sites-available file located mostly at &lt;code&gt;/etc/nginx/sites-available/&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Use this package URL for the latest version of nginx :&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;sudo &lt;/span&gt;add-apt-repository &lt;span class="nt"&gt;-y&lt;/span&gt; ppa:nginx/development
&lt;span class="nb"&gt;sudo &lt;/span&gt;apt-get update
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;If you installed nginx properly then you will see a screen like this when you visit the server URL. I am using AWS for this tutorial so it should look like this.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgo38vb947fvjexvf84vu.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgo38vb947fvjexvf84vu.png" width="678" height="315"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;If you are seeing the above image for your setup, then it is all perfectly done and we can proceed further.&lt;/p&gt;

&lt;p&gt;Open the default config file of Nginx.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;sudo &lt;/span&gt;vim /etc/nginx/sites-available/default
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Faisdv6hkdamegpiegpio.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Faisdv6hkdamegpiegpio.png" width="573" height="388"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This is a bare basic nginx default config file and just has one listener which listens on port 80. So when a request comes in, it loads the file at &lt;code&gt;/var/www/html&lt;/code&gt; as you can see in the root parameter above.&lt;/p&gt;

&lt;p&gt;Our Nginx setup is done, we will come back to this in later part of this post. Let us move on to set up our Nodejs App. I will assume you have Nodejs and npm set up on your server.&lt;/p&gt;

&lt;h1&gt;
  
  
  Nodejs
&lt;/h1&gt;

&lt;h4&gt;
  
  
  Dependencies
&lt;/h4&gt;

&lt;p&gt;In your project root&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;mkdir nodetestapp
cd nodetestapp
npm init
npm install express
touch index.js
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Open index.js and paste the following code&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;express&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;express&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;app&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;express&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;port&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;4040&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;


&lt;span class="nx"&gt;app&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;get&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;/&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,(&lt;/span&gt;&lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;send&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Hello world&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;

&lt;span class="nx"&gt;app&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;listen&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;port&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;server running on port&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;port&lt;/span&gt;&lt;span class="p"&gt;)});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now run in the terminal&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;node index.js
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;and navigate to your SERVER_URL:4040 (Since my AWS security group is set to this). For me it is &lt;code&gt;&lt;a href="http://3.95.169.170:4040/" rel="noopener noreferrer"&gt;http://3.95.169.170:4040/&lt;/a&gt;&lt;/code&gt;. Replace the IP address with your server address. You should see a screen like this.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ff389hpjubk73i8ivqsvg.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ff389hpjubk73i8ivqsvg.png" width="449" height="209"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;As you can see we are running a nodejs server on port 4040 and this is where everything gets weird. Some weird questions would be, why do I have to type 4040 after the URL with ":", why can it not be just port 80 so that I do not have to type it every time. We are going to solve this problem using Nginx Reverse Proxy. Since our setup is complete let us head back to the Nginx file and make some changes.&lt;/p&gt;

&lt;p&gt;What we need to do:&lt;br&gt;
1.) When we get a request on port 80, we will configure nginx to proxy it to port 4040 on our localhost since our nodejs is running there.&lt;br&gt;
2.) Retrieve a successful response and display in the browser.&lt;/p&gt;

&lt;p&gt;Open the Nginx Config file&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;sudo vim /etc/nginx/sites-available/default
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Paste the following code in the location / {} block&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;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;
proxy_pass http://localhost:4040;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In the above code block we are instructing Nginx to replace the request headers with some of our custom requirements like above and sending it to &lt;code&gt;localhost:4040&lt;/code&gt; since we are running our nodejs server on port &lt;code&gt;:4040&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;Save the file by pressing &lt;code&gt;ESC&lt;/code&gt; key and then typing &lt;code&gt;:wq&lt;/code&gt; and press &lt;code&gt;ENTER&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Restart Nginx&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;sudo service nginx reload
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Start the nodejs server using&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;cd nodetestapp
node index.js
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Open the browser and go to your server URL without the port and you would see your nodejs application running on port 80. However, we are still using port 4040 internally to run the Nodejs server.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fe01ule21e920zyxegbzc.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fe01ule21e920zyxegbzc.png" width="454" height="241"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;If you understood everything and set up the way as above you should be able to see Nodejs output instead of the root that we set up in the Nginx default file.&lt;/p&gt;

&lt;h1&gt;
  
  
  My Case
&lt;/h1&gt;

&lt;p&gt;This is a really bare bone understanding of how Nginx Reverse Proxy works behind the scenes. However, it is far more powerful than this. One of the best cases that I have come across using it is to set up a PHP and Nodejs Application on the same server running on port 80.&lt;/p&gt;

&lt;p&gt;I certainly hope this helps you. Let me know if you have any questions in the comments below.&lt;/p&gt;

&lt;p&gt;P.S: I am going to kill the server in demo. So do not bother hitting the URL.&lt;/p&gt;

&lt;p&gt;Coverimage Credit : &lt;a href="https://www.journaldev.com/" rel="noopener noreferrer"&gt;https://www.journaldev.com/&lt;/a&gt;&lt;/p&gt;

</description>
      <category>nginx</category>
      <category>node</category>
    </item>
  </channel>
</rss>
