Easy HTTPS for your HomeLab web applications

Setup architecture

Introduction

This blog will show you how to set up HTTPS for your web application with Docker and NGINX Proxy Manager. This tutorial may be helpful to individuals working on side projects or even startups looking forward to securing their web applications.

HTTPS a.k.a. Hypertext Transfer Protocol Secure encrypts communications over a network using TLS (What is TLS ?).

Prerequisites

• Two home servers/computers with a Unix-based OS (recommended)
• Docker on both
• The domain name (ex: hieveryone.com)
• Administrator rights on your router

Our web application

For testing purposes, we will use OneDev as our web application. OneDev is a Self-hosted Git Server with CI/CD and Kanban.

• Run this command on your first home server

• Access the application on your browser at `http://<home-server-ip>:6610`
• Complete the registration form and keep the server URL with the default value for now

Now that the application has been set up, let us get started with our reverse proxy.

NGINX Proxy Manager

NGINX Proxy Manager allows you to create NGINX Proxy Hosts and, provides free SSL support via Let’s Encrypt easily with a powerful user interface.

Let us setup NGINX Proxy Manager on our second server by following the instructions down below :

• Create a docker-compose.yaml on the second server with the following content:

• Run the application with the following command: `docker-compose up -d`
• Access the NGINX Proxy Manager admin panel on your browser at http://<second-home-server-ip>:81
• Connect as admin@example.com with this password: changeme
  Please change your credentials for security purposes :)
• Open up ports 80 and 443 on your second server running NGINX Proxy Manager

Now that the NGINX Proxy Manager has been set up, let us finish this hands-on by :

• Defining A/CNAME records for our domain/subdomains
• Link and, securitize your subdomain to your application with NGINX Proxy Manager

Domain setup

Personally, for my domains, I use Namecheap but the following instructions should be compatible with any kind of domain name registry.

⚠️ Please make sure you own or, buy a domain name before proceeding to the next steps.

In our example, we own the domain name: jobcore.info

Let us create the following records on your domain name registry :

ℹ️ For more detail on DNS records, please read this documentation: https://constellix.com/news/dns-record-types-cheat-sheet

Open your browser at the NGINX Proxy Manager UI and, go to Proxy Hosts under the Hosts section :

On the new page, click on the Add Proxy Host button located on the right.

A form will appear in order for you to set up the proxy behind your application and server. Here is an example of how I filled it :

Once done, click on the SSL tab, this will allow you to set up the HTTPS behind your web application.

Here is an example of how I filled it to match my needs.

Once done you should see your Proxy Host in the list as follows :

Good! Everything is ready so the only thing you will need to do is to check at your subdomain if the application is accessible through HTTPS. For our example, we check the application at https://onedev.jobcore.info

Here is what we get :

As you can see on a Chrome-like browser, you have the lock right next to the URL proving that the HTTPS is present.

This hands-on is now finished! I hope you enjoyed this walkthrough setting up HTTPS with NGINX Proxy Manager.