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:
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.
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
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.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.