• Post last modified:June 15, 2020
  • Post Comments:12 Comments

Reverse Proxy With NGINX Proxy Manager, Cloudflare, and a Custom Domain

Introduction

Reverse proxies are important for any application owner who’d like the ability to securely access content outside of their home network securely while minimizing the risk of exposing their home network via port forwarding.

In this guide, I’ll cover how to securely access an application installed on Unraid through a custom domain utilizing Cloudflare’s free DNS service and a Docker application called NGINX Proxy Manager.

While the guide will be catered towards configuration on Unraid, NGINX Proxy Manager can be installed on most Linux-based operating systems and the process should be fairly similar across distributions.

What We’ll Need

Below is a list of the services and applications I’ll be referencing in this guide. By default, I’ll assume you already have Unraid installed and the basics configured (user shares, hard drives, etc.).

The only service below that will require a purchase is the custom domain you decide to use, which typically costs $5 to $10 on an annual subscription basis.

  • A custom domain (I’ll use Namecheap in this example, but you can use any host you’d like)
  • A Cloudflare account (the free account is fine for what we’ll need)
  • An Unraid application you’d like to access externally* (I’ll be using code-server in this guide, a browser-based instance of Visual Studio Code)
  • Access to the Community Applications plug-in in Unraid (to install NGINX Proxy Manager)
  • Access to your router’s settings

Note: This guide outlines the process of accessing applications through your custom domain’s subdomains, not base domain or subfolders.

Registering a Domain and Connecting It to Cloudflare’s DNS Service

This portion of the guide is going to outline purchasing a domain and connecting it to Cloudflare’s DNS services. Cloudflare is going to allow us to connect the IP address of your server to your domain so that when navigating to the application through a browser, you’ll only need to remember the subdomain and not a string of numbers that make up your IP address.

If you haven’t already, go ahead and purchase a custom domain name. It can be anything you’d like that hasn’t already been claimed. As mentioned previously, I typically use NameCheap, but there are a variety of other good options to choose from.

Once you have a domain, register for a Cloudflare account and select the option to “Add site” after logging in. Cloudflare will ask which account type you’d like to sign up for – choose the “Free” option.

You’ll be asked to enter a domain – enter the domain you just purchased. Once you do so, it will direct you to the page below with a set of instructions on updating the nameservers on your domain host’s website with two of Cloudflare’s own nameservers.

The steps to do so will vary based on which domain host you chose, but below is a screenshot of my nameserver configuration in Namecheap after updating them to Cloudflare’s nameservers.

If you’ve purchased your domain through a host other than NameCheap and aren’t sure how to update your domain’s nameservers, go ahead and Google “<domain host> nameserver update Cloudflare” or something similar and one of the top search results should include a link to instructions.

After you’ve updated your domain’s nameservers, click the “Re-check now” button in Cloudflare (at the bottom of the Cloudflare screenshot above). Cloudflare will perform a check to ensure your domain’s resources are pointed towards its DNS service.

You may receive a message from Cloudflare that these changes can take anywhere from a few minutes up to 24 hours to take effect – while that may be true, I’ve never experienced it taking longer than a few minutes.

Keep checking as often as it lets you and eventually Cloudflare will notify you that your domain has been set up and is ready to go.

Adding DNS Records to Cloudflare

Now that your domain is connected to Cloudflare, we can begin setting up your domain’s DNS records, which will tell users how to find your application when typing your subdomain into their browser’s address bar.

From the Cloudflare homepage, select your domain from your account page:

Cloudflare will redirect you to an overview page with various statistics for your domain. From there, select “DNS” in the top row of menu items – this is where we will create/remove/manage our domain and subdomains.

By default, you’ll notice five or six DNS records have already been created for you. Any MX records can be deleted – they are “Mail Exchange” records that are required for e-mail delivery to the domain, but that isn’t something I’ll cover in this guide (and I’ve personally never used them myself under these pretenses).

Before we create the subdomain for our application, we need to ensure we have an A record for our base domain that points to our server’s IP address. This may be a default row for you – regardless, make sure it is set up as follows:

  • Type: A record (this record type points a domain to an IP address)
  • Name: Your base domain name (without the “www.”)
  • Content: Your server network’s public IP address
  • TTL: Auto
  • Proxy status: Click the cloud until it is gray and says “DNS only” (we’ll come back and change this later)

Here’s what it looks like for me (I’ve obfuscated my IP address for obvious reasons):

Now when anyone types a web address that uses your base domain, Cloudflare will know the IP address of your server to direct the request to.

Important note: Your home network’s public IP address will occasionally change. See this guide on how to automatically update Cloudflare’s DNS records when this happens.

The next record we need to create is the record for the subdomain – this will be the record used to access the application from your web browser.

Because Cloudflare already knows our IP address from the A record we just set up, we’ll set up any subsequent subdomain records as CNAME and point them to our base domain. The benefit of doing is that when our server’s network IP address changes, we’ll only need to update one record – our A record – and every other record pointing to it (our CNAME records) will be automatically updated as well.

As mentioned, the application I’m going to set up for external web access in this guide is Visual Studio Code. Because I use it for various development projects, I’m going to create a CNAME record for the subdomain development.shiftfourteen.com that I’ll be able to use to access the application at the end of the guide.

Here’s what the DNS records for my domain now shows:

With the exception of a small step at the very end, we’re finished with the Cloudflare portion of the setup.

Configuring NGINX Proxy Manager in Unraid

Now that our domain and DNS is set up correctly, navigate to the Community Applications plug-in in Unraid and install the Docker application “NGINX Proxy Manager”. Take note of the following settings:

  • Web UI Port: Ensure this is not conflicting with any existing port assignments. I manually chose 7818 because the default port conflicted with another popular application I have installed (Tautulli).
  • HTTP Port: ’80’ is already being used by Unraid so we need to assign a different port. I’ve used ‘280’ instead.
  • HTTPS Port: ‘443’ is already being used by Unraid so we need to assign a different port. I’ve used ‘2443’ instead.
  • Leave everything else as is and click “Apply”

If you’re installing this on a Linux-based operating system other than Unraid, refer to the application’s GitHub page for additional installation instructions.

Before we can begin setting up subdomains within the NGINX Proxy Manager web interface, we need to make two quick changes in our router settings.

Forwarding HTTP/HTTPS To NGINX Proxy Manager In Your Router

NGINX Proxy Manager is now installed and listening for external web requests on port 280 (HTTP) and 2443 (HTTPS). However, by default, your home network’s router is configured to send external requests to port 80 and 443 (which we were unable to assign to NGINX Proxy Manager above due to Unraid already using them for its own internal purposes).

So let’s go into our home network’s router settings and configure them to reroute HTTP traffic from port 80 to 280 and port 443 to 2443 (or whichever custom ports you assigned in your own installation above).

The tricky part about this step is that every router’s configuration tools look different, so I can’t provide exact steps on how to do this. However, the concept should be the same regardless of the router you have – we want to log into our router’s settings and find the port forwarding section. From there, we should be able to forward HTTP and HTTPS traffic to our custom ports.

For this guide, I’m using the Verizon Fios router I have installed in my house as an example. Here’s what the configuration looks like after updating the settings:

My router is now configured to take any HTTP traffic from port 80 and forward it to port 280 on my server (which has an internal IP address of 192.168.1.155), and then the same for HTTPS traffic (443 –> port 2443 on my server).

On the server (192.168.1.155), NGINX Proxy Manager is listening for traffic on those same ports and after completing the next section, will redirect it to the application being requested.

Save and exit your router’s settings.

Configuring the Subdomain In the NGINX Proxy Manager Web Interface

Navigating back to Unraid, access NGINX Proxy Manager’s web interface using your server’s IP address and the web UI port you assigned during installation (mine defaulted to 7818, so I can access it from 192.168.1.155:7818).

Follow the prompts, create an account, and log in to the web interface.

There are quite a few options to choose from after logging in, but we’ll only need one or two to configure our reverse proxies. If you’re interested in learning more about the functionality not covered in this guide, please reference the project’s online documentation (or stay tuned for a future guide covering additional functionality).

From the main page, select “Proxy Hosts” and then click the “Add Proxy Host” button in the top-right corner.

In the window that appears, populate the following fields in the following tabs:

Details

  • Domain Names: Subdomain name of the application you’re trying to configure
  • Scheme: Leave as “http”
  • Forward Hostname / IP: Enter the internal IP address of your server
  • Forward Port: Port of application assigned in Unraid at installation (Visual Studio Code for me is port 8085)
  • Check “Block Common Exploits”
  • Access List: I usually leave this as “Publicly Accessible” and make sure all of my applications are password-protected within their settings. If desired, you can set up a user with a username and password in NGINX Proxy Manager and change the setting to allow you to use that to log in to your application instead.

SSL

NGINX Proxy Manager will manage Let’s Encrypt and SSL for you if you complete these settings (including automatically renewing your certificates every 90 days).

  • SSL Certificate: Request a new SSL certificate
  • Toggle the “Force SSL” button on
  • Enter the e-mail address to register the Let’s Encrypt certificate under
  • Toggle the “I Agree to the Let’s Encrypt Terms of Service” button on
  • Hit the “Save” button

Your new subdomain should now show as a new row under Proxy Hosts and – if set up correctly – will display as “Online” under the “Status” column.

Confirm it works by navigating to the subdomain you configured in your web browser!

Repeat the steps to add a Proxy Host in NGINX Proxy Manager for every subdomain you’d like to set up.

Reconfiguring the Proxy Status In Cloudflare’s DNS Settings

Once you’ve confirmed your subdomain has been set up correctly and is working, head back to the DNS settings in Cloudflare and change the cloud icon under “Proxy status” to the orange cloud icon that says “Proxied” for each record that you’ve confirmed is working.

I’m not sure why, but the initial NGINX Proxy Manager subdomain setup will not work if you have the DNS record set to “Proxied” instead of “DNS Only”. After the proxy host is configured and the Let’s Encrypt certificate is generated, it is then safe to change the record back to “Proxied”.

Configuring Additional Subdomains

Now that NGINX Proxy Manager has been set up properly, the process of adding additional subdomains in the future is simple:

  • Add a new subdomain DNS record in Cloudflare
  • Add the subdomain as a Proxy Host in NGINX Proxy Manager using the steps above
  • Go back to Cloudflare’s settings and mark it as “Proxied” instead of “DNS Only”
  • Enjoy external access to your application!

Additional Configuration

If you’re configuring a reverse proxy for Nextcloud, please reference this post for an additional step required for it to work properly.

Conclusion

While the steps in this guide may seem like a lot, NGINX Proxy Manager has really streamlined the process of configuring a reverse proxy after the initial setup. Additional subdomains can now be figured in a matter of minutes.

Enjoy!

If you’ve found this or any of the other posts on SHIFT14 helpful, please consider supporting the site through a one-time PayPal donation or ongoing support through Patreon. My goal is to continue providing in-depth guides for the technical community and the support helps justify the time and resources spent doing so.

This Post Has 12 Comments

  1. Dallas

    Where do you want me to post my input to this write up. I have many other proxies for other popular containers to contribute.

    1. Griffin

      Would you mind sending me a summary of what you have on reddit? My username is reddit.com/u/TastierSub. We can take a look at what you have and figure out where to go from there. Thanks for your willingness to contribute!

  2. MandalorePatriot

    Nice write-up, but using a Let’sEncrypt cert defeats half of the purpose of Cloudflare. To get the full Cloudflare encrypted communication, you have to use the internal cert they provide which verifies the secure connection from their systems to yours.

    I don’t know if Nginx Proxy Manager allows using a different cert (I imagine it does but never used it), so it would be better to use that instead.

    https://support.cloudflare.com/hc/en-us/articles/115000479507-Managing-Cloudflare-Origin-CA-certificates

    1. Griffin

      Interesting. I usually default to enabling Let’s Encrypt because I’ve come across a few posts online of people experiencing DNS leaks and other issues with Cloudflare. Admittedly, I don’t know enough about the back end to understand what might be happening when leveraging both at the same time…

  3. Daniel

    Awesome write up man. Got it spun up in no time. Way easier than using the LE container I think. Quick question: So I can setup all of the individual docker containers and access them no problem, but how do I set it up so I can access the Unraid Gui with an SSL cert? I tried the same thing and made a server.mydomain.com with port 80. It accesses the Unraid gui, but there is no SSL cert. Anyways, thanks for the awesome write up.

    1. Griffin

      Although I highly recommend not exposing your Unraid GUI to the internet because of the implications of someone maliciously gaining access – I tried setting up a proxy host in NPM using the steps I outlined above but this time referencing port 80 and it seems to work – SSL certificate and all.

      Trying deleting the proxy host record, ensuring the server.mydomain.com CNAME record in Cloudflare is set to DNS only, and trying again – not sure what else you might be missing but can help troubleshoot further if it doesn’t work after a second attempt.

  4. Daniel

    Yeah, I actually realized that last night that I shouldn’t have the server facing the open internet like that. I will just continue to access the GUI over openvpn when I am away from home.

  5. Dade

    Can the sub domains utilized a login/pass as a second layer to the user interface login/pass — which would differ?

    1. Griffin

      Yep! In NGINX Proxy Manager, click on the “Access Lists” tab and click the button to add an access list. Give it a name on the “Details” tab, and then on the “Authorization” tab add usernames and passwords for users you want to grant access for.

      Save the new access list and close it. Navigate to your Proxy Hosts list and edit the subdomain you want to secure – in the “Details” tab, instead of selecting “Publicly Accessible” as my tutorial recommends, click the dropdown and select the access list you just created.

      Now any time anyone tries to access the subdomain, they’ll need to enter one of the usernames/passwords you added to the access list as well as any credentials you have set up for the actual application.

      1. Dade

        Big thanks

  6. Chris

    Followed your guide nicely to setup reverse proxy for the first time, Thanks.

    When I set toggle force ssl on in Nginx proxy manager, it errors on webpage load with redirect error. Any suggestions to fix this? I can get it to go ssl without force ssl on in the settings and using https:// in the website address. However, if I use just plain http or type the address in without http/https it does not load the page encrypted. Thanks again.

  7. Dave

    Many, many thanks for this. Been meaning to switch but could never figure it out. This was a real life saver.

    The only service I cannot get to work is ubooquity. Thanks for taking the time to do this!!

Leave a Reply