Nginx for Front-end Developers - Beyond the Basics
Tags: nginx, showdev, webdev, beginners
Published: 2019-06-01 15:18:17

---
title: Nginx for Front-end Developers - Beyond the Basics
published: true
description: Nginx for Front-end Developers - Beyond the Basics
tags: Nginx,showdev, webdev, beginners
canonical_url: https://cloudnweb.dev/2019/06/nginx-for-front-end-developers-beyond-the-basics/
series: nginx
---
<!-- wp:paragraph -->
<p>This article is a follow up of <a href="https://cloudnweb.dev/2019/05/nginx-for-front-end-developers/"> Nginx for Front-end Developers</a> .Now, we will see Nginx for Front-end Developers which is beyond the basics</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>In the<a href="https://cloudnweb.dev/2019/05/nginx-for-front-end-developers/"> previous article</a>, we set up a basic nginx configuration for a web application. In this article, we will see how we can setup some important features of nginx -  <strong>Proxy Pass</strong> which is <strong>Reverse Proxy</strong> .</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>What is Proxy ?</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Before going into the topic of reverse proxy, we will see what  proxy means. proxy is nothing but handling the request and forwarding it to the appropriate source/destination back and forth</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>there are two way to proxy the server, <strong>Forward Proxy</strong> and <strong>Reverse Proxy</strong></p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Forward Proxy Server</h3>
<!-- /wp:heading -->

<!-- wp:gallery {"ids":[555]} -->
<ul class="wp-block-gallery columns-1 is-cropped"><li class="blocks-gallery-item"><figure><img src="https://cloudnweb.dev/wp-content/uploads/2019/06/forward_proxy-1.png" alt="" data-id="555" data-link="https://cloudnweb.dev/?attachment_id=555#main" class="wp-image-555"/></figure></li></ul>
<!-- /wp:gallery -->

<!-- wp:paragraph -->
<p>Forward proxy provides proxy services to client or group of clients. when a client request a server. forward proxy server takes the request and sends it to the app server. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>From the point of app server, it is the proxy server that requests a file. it does not know which client request the files. it is the advantage of forward proxy server.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p> As you can see, the proxy can serve as a single point of access and control, making it easier for you to enforce security policies </p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Reverse Proxy Server</h3>
<!-- /wp:heading -->

<!-- wp:gallery {"ids":[560]} -->
<ul class="wp-block-gallery columns-1 is-cropped"><li class="blocks-gallery-item"><figure><img src="https://cloudnweb.dev/wp-content/uploads/2019/06/nginx_reverse_proxy.gif" alt="" data-id="560" data-link="https://cloudnweb.dev/?attachment_id=560#main" class="wp-image-560"/></figure></li></ul>
<!-- /wp:gallery -->

<!-- wp:paragraph -->
<p>Reverse proxy is the exact opposite of forward proxy.  while a forward proxy proxies in behalf of clients (or requesting hosts), a reverse proxy proxies in behalf of servers. A reverse proxy accepts requests from external clients on behalf of servers stationed behind it&nbsp; </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>From the client side, it is the reverse proxy that serves the file. it does not know which server serves the file.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Reverse Proxy Setup in Nginx</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>we will see how we can setup a proxy pass which is a reverse proxy in nginx.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Above all, make sure nginx installed on your machine .  To Learn how to install nginx , <a href="https://www.digitalocean.com/community/tutorials/how-to-install-nginx-on-ubuntu-18-04">Nginx Installation</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>After that, you can find the nginx configuration in the following directory. there are two directories important for nginx configuration.</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li><strong>sites-available</strong> - folder is for storing <em>all</em> of your vhost configurations, whether or not they're currently enabled.</li><li><strong>sites-enabled</strong> - folder contains symlinks to files in the sites-available folder. This allows you to selectively disable vhosts by removing the symlink.</li></ul>
<!-- /wp:list -->

<!-- wp:gallery {"ids":[565]} -->
<ul class="wp-block-gallery columns-1 is-cropped"><li class="blocks-gallery-item"><figure><img src="https://cloudnweb.dev/wp-content/uploads/2019/06/Screenshot-from-2019-06-01-07-17-15.png" alt="" data-id="565" data-link="https://cloudnweb.dev/?attachment_id=565#main" class="wp-image-565"/></figure></li></ul>
<!-- /wp:gallery -->

<!-- wp:paragraph -->
<p>we will be deploying a node.js application and proxy pass the request to that application which has the speicific port.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p> Complete Source Code : <a href="https://github.com/ganeshmani/nginx-demo">Nginx Demo</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Firstly, we need to run the application without nginx (proxy pass) and then we will see how we can run the application with nginx(where we don't need to mention the <strong>PORT</strong> everytime)</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Download the source code of the application and run in it local with the following command.</p>
<!-- /wp:paragraph -->

<!-- wp:gallery {"ids":[568]} -->
<ul class="wp-block-gallery columns-1 is-cropped"><li class="blocks-gallery-item"><figure><img src="https://cloudnweb.dev/wp-content/uploads/2019/06/Screenshot-from-2019-06-01-07-30-24.png" alt="" data-id="568" data-link="https://cloudnweb.dev/?attachment_id=568#main" class="wp-image-568"/></figure></li></ul>
<!-- /wp:gallery -->

<!-- wp:paragraph -->
<p>Meanwhile, if you run the <strong>http://localhost:3000</strong> in the browser .you will see the application running successfully.</p>
<!-- /wp:paragraph -->

<!-- wp:gallery {"ids":[569]} -->
<ul class="wp-block-gallery columns-1 is-cropped"><li class="blocks-gallery-item"><figure><img src="https://cloudnweb.dev/wp-content/uploads/2019/06/Screenshot-from-2019-06-01-07-32-31-1024x632.png" alt="" data-id="569" data-link="https://cloudnweb.dev/?attachment_id=569#main" class="wp-image-569"/></figure></li></ul>
<!-- /wp:gallery -->

<!-- wp:paragraph -->
<p> The application is now running successfully. Now, you need to configure the nginx which makes the application to run without mentioning the port(Proxy Pass)</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Mainly, we need to add the application configuration in <strong>sites-available</strong> and symlink to <strong>sites-enabled</strong></p>
<!-- /wp:paragraph -->

<!-- wp:gallery {"ids":[573]} -->
<ul class="wp-block-gallery columns-1 is-cropped"><li class="blocks-gallery-item"><figure><img src="https://cloudnweb.dev/wp-content/uploads/2019/06/Screenshot-from-2019-06-01-07-43-38.png" alt="" data-id="573" data-link="https://cloudnweb.dev/?attachment_id=573#main" class="wp-image-573"/></figure></li></ul>
<!-- /wp:gallery -->

<!-- wp:paragraph -->
<p>In the node-app configuration file, add the following code</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>server {

     listen 80;

      location / {

          proxy_pass "http://127.0.0.1:3000";

       }
}</code></pre>
<!-- /wp:code -->

<!-- wp:gallery {"ids":[574]} -->
<ul class="wp-block-gallery columns-1 is-cropped"><li class="blocks-gallery-item"><figure><img src="https://cloudnweb.dev/wp-content/uploads/2019/06/Screenshot-from-2019-06-01-07-45-15.png" alt="" data-id="574" data-link="https://cloudnweb.dev/?attachment_id=574#main" class="wp-image-574"/></figure></li></ul>
<!-- /wp:gallery -->

<!-- wp:paragraph -->
<p>After that, run the following command in the terminal</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code> $ sudo ln -s /etc/nginx/sites-available/node-app /etc/nginx/sites-enabled/
</code></pre>
<!-- /wp:code -->

<!-- wp:gallery {"ids":[576]} -->
<ul class="wp-block-gallery columns-1 is-cropped"><li class="blocks-gallery-item"><figure><img src="https://cloudnweb.dev/wp-content/uploads/2019/06/Screenshot-from-2019-06-01-07-47-32.png" alt="" data-id="576" data-link="https://cloudnweb.dev/?attachment_id=576#main" class="wp-image-576"/></figure></li></ul>
<!-- /wp:gallery -->

<!-- wp:paragraph -->
<p>After that, you need to start the nginx service. run the following command to start the server.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>$  sudo /etc/init.d/nginx start </code></pre>
<!-- /wp:code -->

<!-- wp:gallery {"ids":[578]} -->
<ul class="wp-block-gallery columns-1 is-cropped"><li class="blocks-gallery-item"><figure><img src="https://cloudnweb.dev/wp-content/uploads/2019/06/Screenshot-from-2019-06-01-07-49-42.png" alt="" data-id="578" data-link="https://cloudnweb.dev/?attachment_id=578#main" class="wp-image-578"/></figure></li></ul>
<!-- /wp:gallery -->

<!-- wp:paragraph -->
<p>Finally, you can run the application in <strong>http://localhost</strong> .. Yayy!!!!</p>
<!-- /wp:paragraph -->

<!-- wp:gallery {"ids":[579]} -->
<ul class="wp-block-gallery columns-1 is-cropped"><li class="blocks-gallery-item"><figure><img src="https://cloudnweb.dev/wp-content/uploads/2019/06/Screenshot-from-2019-06-01-07-50-54-1024x602.png" alt="" data-id="579" data-link="https://cloudnweb.dev/?attachment_id=579#main" class="wp-image-579"/></figure></li></ul>
<!-- /wp:gallery -->

<!-- wp:paragraph -->
<p>In the next article, we will see how to implement the Load Balancing in Nginx. until then, <strong>Happy Coding!!!</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>To Read Part One, <a href="https://cloudnweb.dev/2019/05/nginx-for-front-end-developers/">Nginx for Front-end Developers</a></p>
<!-- /wp:paragraph -->