CloudPanel is a light hosting panel that can help you host various websites. It is using NginX and I thought it would be a good idea to have it configured as a reverse proxy for some of the applications I am hosting in docker.

With this config, I can host a WordPress website and docker applications like Plausible or Uptime Kuma. With CloudPanel you can easily edit Nginx configs, generate certificates view access logs block IPs to the docker container, or add basic authentication easily.

In this article, we will see the basic steps that you can follow to have CloudPanel configured as a reverse proxy for docker, there is also a video with all the details below:

How To Use CloudPanel As A Reverse Proxy For Docker

1. Install CloudPanel

The first step is to have a VPS created and install CloudPanel, the VPS is on Hetzner and you can check Hetzner Review for more details. CloudPanel Install has all the details to install the panel properly.

2. Install Docker

Below are the commands you need to run to have docker installed on your VPS:

curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg
echo "deb [arch=amd64 signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] https://download.docker.com/linux/ubuntu focal stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
sudo apt update
sudo apt-get install docker-ce docker-ce-cli docker-compose containerd.io

3. Prepare the Docker App

We will install Uptime Kuma in this example, but you can use it for anything you like.

Create a directory where to store your docker volume:

mkdir /docker-vol
mkdir /docker-vol/uptime-kuma
mkdir /opt/uptime-kuma

Create the docker-compose file with the block volume created and 8001 to 3001 port map as below:

---
# Simple docker-compose.yml
# You can change your port or volume location

version: '3.3'

services:
  uptime-kuma:
    image: louislam/uptime-kuma
    container_name: uptime-kuma
    volumes:
      - /docker-vol/uptime-kuma:/app/data
    ports:
      - 8001:3001
    restart: unless-stopped
    security_opt:
      - no-new-privileges:true 

Run Docker compose to create the container:

docker-compose up -d

And that’s about it with configuring the docker app, next we will move to CloudPanel to make the rest.

4. CloudPanel Setup For Reverse Proxy

4.1 Create a static website

For this, you need to go and add a static website, you don’t need more to make CloudPanel act as a reverse proxy.

4.2 Add A Record in DNS

The next step will be to do into your DNS manager and add an A record to the website added to the VPS server where we have CloudPanel installed.

4.3 Generate A SSL Cerificate

Now the domain is pointing to our server in DNS and we have it added in CloudPanel, next step is to generate a Let’s Encrypt certificate for if from Website – SSL/TLS – Actions

4.4 Add the NginX Reverse Proxy Config

In the vHost area, you just need to add instead of :

  location ~* ^.+\.(css|js|jpg|jpeg|gif|png|ico|gz|svg|svgz|ttf|otf|woff|woff2|eot|mp4|ogg|ogv|webm|webp|zip|swf)$ {
    add_header Access-Control-Allow-Origin "*";
    expires max;
    access_log off;
  }

The :

 location / {
        proxy_pass         http://localhost:8001;
        proxy_http_version 1.1;
        proxy_set_header   Upgrade $http_upgrade;
        proxy_set_header   Connection "upgrade";
        proxy_set_header   Host $host;
    }

This will tell Nginx to send the traffic for this website to localhost and 8001 port where we have docker listening.

And that’s about all you need to do configure CloudPanel to work as a reverse proxy. Now you can allow access based on IPs from CloudPanel or you can add a basic authentication in case your app doesn’t have any protection.