public/posts/setup-an-nginx-reverse-proxy/index.html

<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Setup an NGINX Reverse Proxy 🥸 | ahmza's ramblings</title>
<meta name=keywords content="HomeLab,Networking,NGINX,ReverseProxy"><meta name=description content="Learn to setup a quick and easy reverse proxy using NGINX"><meta name=author content="ahmza"><link rel=canonical href=https://blog.ahmza.com/Page%28/posts/Setup-an-NGINX-Reverse-Proxy.md%29><link crossorigin=anonymous href=/assets/css/stylesheet.cea311b1d5843eeee9ccb805d4520f69aa5e2843db5d66ace5369ce8f1942c0f.css integrity="sha256-zqMRsdWEPu7pzLgF1FIPaapeKEPbXWas5Tac6PGULA8=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script><link rel=icon href=https://blog.ahmza.com/img/favicon.png><link rel=icon type=image/png sizes=16x16 href=https://blog.ahmza.com/img/favicon.png><link rel=icon type=image/png sizes=32x32 href=https://blog.ahmza.com/img/favicon.png><link rel=apple-touch-icon href=https://blog.ahmza.com/img/favicon.png><link rel=mask-icon href=https://blog.ahmza.com/img/favicon.png><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style></noscript><script async src="https://www.googletagmanager.com/gtag/js?id=G-HSJHLHP8FZ"></script><script>var doNotTrack=!1;if(!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-HSJHLHP8FZ",{anonymize_ip:!1})}</script><meta property="og:title" content="Setup an NGINX Reverse Proxy 🥸"><meta property="og:description" content="Learn to setup a quick and easy reverse proxy using NGINX"><meta property="og:type" content="article"><meta property="og:url" content="https://blog.ahmza.com/posts/setup-an-nginx-reverse-proxy/"><meta property="og:image" content="https://blog.ahmza.com/webp/posts/reverse-proxy/feature-anim.webp"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-12-01T22:59:00+00:00"><meta property="article:modified_time" content="2021-12-01T22:59:00+00:00"><meta property="og:site_name" content="ahmza's ramblings"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://blog.ahmza.com/webp/posts/reverse-proxy/feature-anim.webp"><meta name=twitter:title content="Setup an NGINX Reverse Proxy 🥸"><meta name=twitter:description content="Learn to setup a quick and easy reverse proxy using NGINX"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":2,"name":"Posts","item":"https://blog.ahmza.com/posts/"},{"@type":"ListItem","position":3,"name":"Setup an NGINX Reverse Proxy 🥸","item":"https://blog.ahmza.com/posts/setup-an-nginx-reverse-proxy/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"Setup an NGINX Reverse Proxy 🥸","name":"Setup an NGINX Reverse Proxy 🥸","description":"Learn to setup a quick and easy reverse proxy using NGINX","keywords":["HomeLab","Networking","NGINX","ReverseProxy"],"articleBody":"Introduction In this post we will go over setting up an NGINX reverse proxy to allow different web services to reach the outside world. We will also cover setting up auto renewing SSL certificates.\nWhy not just port forward the services, it does the same thing Right? Reverse proxies are a great way to expose web services to the outside world in a more secure and customisable manner. Some of the features that a reverse proxy provides are as follows:\nHost multiple services using the same HTTP/HTTPS ports Hides the origin server HTTPS TLS encryption Caching Compression Creating a Reverse Proxy Prerequisites a server to act as the reverse proxy a web server a registered domain name Have A records setup for the Domain name Install NGINX I’ll be using the apt package manager as I’m on Ubuntu server, this may differ for you\nUpdate packages, then
<strong>allow different web services to reach the outside world.</strong> We will
also cover setting up <strong>auto renewing SSL certificates.</strong></p><p>Why not just port forward the services, it does the same thing Right?
Reverse proxies are a great way to expose web services to the outside
world in a more secure and customisable manner. <strong>Some of the features
that a reverse proxy provides are as follows:</strong></p><ul><li><strong>Host multiple services using the same HTTP/HTTPS ports</strong></li><li><strong>Hides the origin server</strong></li><li><strong>HTTPS TLS encryption</strong></li><li><strong>Caching</strong></li><li><strong>Compression</strong></li></ul><h1 id=creating-a-reverse-proxy><strong>Creating a Reverse Proxy</strong><a hidden class=anchor aria-hidden=true href=#creating-a-reverse-proxy>#</a></h1><h2 id=prerequisites><strong>Prerequisites</strong><a hidden class=anchor aria-hidden=true href=#prerequisites>#</a></h2><ul><li><strong>a server to act as the reverse proxy</strong></li><li><strong>a web server</strong></li><li><strong>a registered domain name</strong></li><li><strong>Have A records setup for the Domain name</strong></li></ul><h2 id=install-nginx><strong>Install</strong> <em><strong>NGINX</strong></em><a hidden class=anchor aria-hidden=true href=#install-nginx>#</a></h2><p>I&rsquo;ll be using the apt package manager as I&rsquo;m on Ubuntu server,
this may differ for you</p><p>Update packages, then <strong>install</strong> <em><strong>NGINX</strong></em></p><div class=highlight><pre tabindex=0 class=chroma><code class=language-bash data-lang=bash><span class=line><span class=cl>sudo apt update
</span></span><span class=line><span class=cl>sudo apt install nginx
</span></span></code></pre></div><p>Now we want to <strong>enable</strong> <em><strong>NGINX</strong></em> so the program will start when
the server boots</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-bash data-lang=bash><span class=line><span class=cl>sudo systemctl <span class=nb>enable</span> --now nginx
</span></span></code></pre></div><h1 id=firewall><strong>Firewall</strong><a hidden class=anchor aria-hidden=true href=#firewall>#</a></h1><blockquote><p><strong>Quick Note:</strong> now is a good time to port forward ports 80 and 443
from the router to the reverse proxy</p></blockquote><p>Ubuntu server comes with a firewall (ufw), so be sure to allow access
to <em>NGINX</em> and enable it.</p><p>The reverse proxy handles both HTTP and HTTPS so <strong>allow &ldquo;Nginx Full&rdquo;</strong></p><div class=highlight><pre tabindex=0 class=chroma><code class=language-bash data-lang=bash><span class=line><span class=cl>sudo ufw allow <span class=s1>&#39;Nginx full&#39;</span>
</span></span></code></pre></div><p><strong>If you are using SSH allow it through</strong></p><div class=highlight><pre tabindex=0 class=chroma><code class=language-bash data-lang=bash><span class=line><span class=cl>sudo ufw allow <span class=s1>&#39;OpenSSH&#39;</span>
</span></span></code></pre></div><h1 id=configure-nginx><strong>Configure</strong> <em><strong>NGINX</strong></em><a hidden class=anchor aria-hidden=true href=#configure-nginx>#</a></h1><p><strong>Unlink the default <em><strong>NGINX</strong></em> config</strong></p><div class=highlight><pre tabindex=0 class=chroma><code class=language-bash data-lang=bash><span class=line><span class=cl>sudo unlink /etc/nginx/sites-enabled/default
</span></span></code></pre></div><h2 id=create-nginx-config><strong>Create <em><strong>NGINX</strong></em> Config</strong><a hidden class=anchor aria-hidden=true href=#create-nginx-config>#</a></h2><p>Create a config file in <strong>/etc/nginx/site-available</strong></p><blockquote><p><strong>Quick Note:</strong> use whichever text editor you want, I&rsquo;m using vim</p></blockquote><div class=highlight><pre tabindex=0 class=chroma><code class=language-bash data-lang=bash><span class=line><span class=cl>sudo vim /etc/nginx/sites-available/blog.conf
</span></span></code></pre></div><div class=highlight><pre tabindex=0 class=chroma><code class=language-nginx data-lang=nginx><span class=line><span class=cl><span class=k>server</span> <span class=p>{</span>
</span></span><span class=line><span class=cl>    <span class=kn>listen</span> <span class=mi>80</span><span class=p>;</span>
</span></span><span class=line><span class=cl>    <span class=kn>server_name</span> <span class=s>blog.example.com</span><span class=p>;</span>
</span></span><span class=line><span class=cl>    <span class=kn>location</span> <span class=s>/</span> <span class=p>{</span>
</span></span><span class=line><span class=cl>        <span class=kn>proxy_pass</span> <span class=s>http://ip-of-server:port</span><span class=p>;</span>
</span></span><span class=line><span class=cl>    <span class=p>}</span>
</span></span><span class=line><span class=cl><span class=p>}</span>
</span></span></code></pre></div><ul><li><strong>server_name</strong> is the domain name you want use this can include
sub-domains</li><li><strong>proxy_pass is the IP address of the web server</strong></li></ul><h2 id=enable-nginx-config><strong>Enable <em><strong>NGINX</strong></em> Config</strong><a hidden class=anchor aria-hidden=true href=#enable-nginx-config>#</a></h2><p>To activate a config file we need to link the file from the
<strong>sites-available</strong> folder to <strong>sites-enabled</strong>.</p><blockquote><p><strong>Pro Tip:</strong> make sure to use full paths when creating symlinks</p></blockquote><div class=highlight><pre tabindex=0 class=chroma><code class=language-bash data-lang=bash><span class=line><span class=cl>sudo ln -s /etc/nginx/sites-available/blog.conf /etc/nginx/sites-enabled/blog.conf
</span></span></code></pre></div><p><strong>Check the config</strong>, this is an important step as it warns you of any errors before
reloading <em>NGINX</em></p><div class=highlight><pre tabindex=0 class=chroma><code class=language-bash data-lang=bash><span class=line><span class=cl>sudo nginx -t
</span></span></code></pre></div><p>If the output looks simmiler to below then you&rsquo;re good to go !!</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-bash data-lang=bash><span class=line><span class=cl>nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
</span></span><span class=line><span class=cl>nginx: configuration file /etc/nginx/nginx.conf <span class=nb>test</span> is successful
</span></span></code></pre></div><p>Now <strong>restart the <em><strong>NGINX</strong></em> service</strong></p><div class=highlight><pre tabindex=0 class=chroma><code class=language-bash data-lang=bash><span class=line><span class=cl>sudo systemctl restart nginx
</span></span></code></pre></div><p>you should now have a working reverse proxy !!</p><h1 id=setting-up-ssl><strong>Setting up SSL</strong><a hidden class=anchor aria-hidden=true href=#setting-up-ssl>#</a></h1><h2 id=prerequisites-1><strong>Prerequisites</strong><a hidden class=anchor aria-hidden=true href=#prerequisites-1>#</a></h2><ul><li>Make sure HTTP and HTTPS are port forwarded to the reverse proxy</li><li>Make sure <strong>server_name</strong> is set in the config file you created</li></ul><h2 id=installing-certbot><strong>Installing</strong> <em><strong>Certbot</strong></em><a hidden class=anchor aria-hidden=true href=#installing-certbot>#</a></h2><p><em>Certbot</em> is a tool that requests an SSL certificate and makes sure it
is renewed when needed.
<strong>Install</strong> <em><strong>Certbot</strong></em> as well as the <strong>python <em><strong>NGINX</strong></em> plug-in</strong></p><div class=highlight><pre tabindex=0 class=chroma><code class=language-bash data-lang=bash><span class=line><span class=cl>sudo apt install certbot python3-certbot-nginx
</span></span></code></pre></div><blockquote><p><strong>Quick Note:</strong> double check firewall rules</p></blockquote><h2 id=request-ssl-certificate><strong>Request SSL Certificate</strong><a hidden class=anchor aria-hidden=true href=#request-ssl-certificate>#</a></h2><p>Now all we need to do is <strong>request the certificate</strong> !!</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-bash data-lang=bash><span class=line><span class=cl>sudo certbot --nginx -d blog.example.com
</span></span></code></pre></div><ul><li><strong>&ndash;nginx</strong> specifies we are using NGINX, this will update the config
file we created to allow the use of SSL</li><li><strong>-d</strong> is the domain name you want to use</li></ul><p>If this is the first time running <em>Certbot</em> you will be asked to enter
an email as well as agree to terms and services.</p><p>If the certificate request is successful you will be prompted with</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-bash data-lang=bash><span class=line><span class=cl>Please choose whether or not to redirect HTTP traffic to HTTPS, removing HTTP access.
</span></span><span class=line><span class=cl>- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
</span></span><span class=line><span class=cl>1: No redirect - Make no further changes to the webserver configuration.
</span></span><span class=line><span class=cl>2: Redirect - Make all requests redirect to secure HTTPS access. Choose this <span class=k>for</span>
</span></span><span class=line><span class=cl>new sites, or <span class=k>if</span> you<span class=s1>&#39;re confident your site works on HTTPS. You can undo this
</span></span></span><span class=line><span class=cl><span class=s1>change by editing your web server&#39;</span>s configuration.
</span></span><span class=line><span class=cl>- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
</span></span><span class=line><span class=cl>Select the appropriate number <span class=o>[</span>1-2<span class=o>]</span> <span class=k>then</span> <span class=o>[</span>enter<span class=o>]</span> <span class=o>(</span>press <span class=s1>&#39;c&#39;</span> to cancel<span class=o>)</span>:
</span></span></code></pre></div><p><strong>If you want all traffic to be SSL encrypted choose option 2</strong>
That&rsquo;s it we have SSL certificates installed. You will need a new
certificate for each different domain name or subdomain.</p><h2 id=verify-auto-renewal><strong>Verify Auto Renewal</strong><a hidden class=anchor aria-hidden=true href=#verify-auto-renewal>#</a></h2><p>All we need to do now is make sure that Certbot can automatically renew
certificates.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-bash data-lang=bash><span class=line><span class=cl>sudo certbot renew --dry-run
</span></span></code></pre></div><p>If you see no errors then you are ready to go.</p><h1 id=conclusion><strong>Conclusion</strong><a hidden class=anchor aria-hidden=true href=#conclusion>#</a></h1><p>By following this you have hopefully managed to setup an <em>NGINX</em>
Reverse proxy to handle incoming HTTP/HTTPS requests as well as
configured automatically renewing SSL certificates.</p><p>This posts barely scratches the surface of what <em>NGINX</em> can do, I would
highly recommend reading more into this great piece of software !!</p><p>My reverse proxy handling non existent traffic</p><video autoplay loop muted playsinline aria-label=i-know-kung-fu style=display:block;margin-left:auto;margin-right:auto;width:50%;height:auto;padding:10px>
<source src=/webm/i-know-kung-fu.webm type=video/webm></video><p>Give it a few months and this blog will &mldr;</p><video autoplay loop muted playsinline aria-label='this is fine' style=display:block;margin-left:auto;margin-right:auto;width:50%;height:auto;padding:10px>
<source src=/webm/matrix-jump-fail.webm type=video/webm></video></div><footer class=post-footer><ul class=post-tags><li><a href=https://blog.ahmza.com/tags/homelab/>Homelab</a></li><li><a href=https://blog.ahmza.com/tags/networking/>Networking</a></li><li><a href=https://blog.ahmza.com/tags/nginx/>NGINX</a></li><li><a href=https://blog.ahmza.com/tags/reverseproxy/>ReverseProxy</a></li></ul></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://blog.ahmza.com>ahmza's ramblings</a></span>
<span>Powered by
<a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
        <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script src=https://storage.ko-fi.com/cdn/scripts/overlay-widget.js></script><script>kofiWidgetOverlay.draw("ahmza",{type:"floating-chat","floating-chat.donateButton.text":"Tip","floating-chat.donateButton.background-color":"rgb(145, 70, 255)","floating-chat.donateButton.text-color":"#fff"})</script><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>