Deploy and Update a Docker App with a GitHub Repo and Cloudflare Subdomain

This tutorial covers:

  • Setting up Python and Docker on the VPS.
  • Cloning and updating a GitHub repository for a Dockerized app.
  • Configuring a Cloudflare subdomain to point to the app.
  • Setting up Nginx as a reverse proxy.
  • Doing everything via the shell.

1. Initial Setup on the VPS

Step 1.1: Update System Packages

Ensure the VPS is up-to-date:

apt update && apt upgrade -y

Step 1.2: Install Python

Install Python and pip:

apt install python3 python3-pip -y

Verify installation:

python3 --version
pip3 --version

Step 1.3: Install Docker

Install Docker and enable it to start on boot:

apt install apt-transport-https ca-certificates curl software-properties-common -y
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | apt-key add -
add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable"
apt update
apt install docker-ce -y

Verify Docker installation:

docker --version

Enable Docker to start on boot:

systemctl enable docker
systemctl start docker

2. Clone or Update the GitHub Repository

Step 2.1: SSH into Your VPS

Log in to your VPS:

ssh root@<your-vps-ip>

Step 2.2: Clone the Repository

If the repository isn’t already cloned:

git clone https://<your_personal_access_token>@github.com/<your-username>/<your-repo>.git
cd <your-repo>

Step 2.3: Pull Updates from GitHub

To update the repository:

cd <your-repo>
git pull origin main

3. Build and Run the Docker Image

Step 3.1: Build the Docker Image

Navigate to the repository and build the Docker image:

docker build -t <your-docker-image-name> .

Step 3.2: Stop the Existing Container

If the app is already running, stop it:

docker stop <container-name>
docker rm <container-name>

Step 3.3: Run the New Docker Container

Run the container with the appropriate ports and restart policies:

docker run -d -p 8501:8501 --name <container-name> --restart unless-stopped <your-docker-image-name>

4. Configure Cloudflare Subdomain

Go to the Cloudflare Dashboard and select your domain. Then follow these steps:

  • Go to the DNS tab and add an A record for your subdomain pointing to your VPS IP.
  • Enable Proxied (orange cloud).
  • Set SSL/TLS mode to Flexible or Full.

5. Set Up Nginx for Reverse Proxy

Step 5.1: Install Nginx

apt install nginx -y

Create a new Nginx configuration for your subdomain:

nano /etc/nginx/sites-available/<your-subdomain>.conf

Link the config and restart Nginx:

ln -s /etc/nginx/sites-available/<your-subdomain>.conf /etc/nginx/sites-enabled/
systemctl restart nginx

Appendix: Running a Streamlit App

If your application is a Streamlit app, follow these additional steps to ensure it runs correctly.

1. Update Streamlit Configuration

Streamlit apps often require specific configurations for CORS and proxy headers. Create or update the Streamlit configuration file:

mkdir -p ~/.streamlit
nano ~/.streamlit/config.toml

Add the following content to config.toml:

[server]
headless = true
enableCORS = false
enableXsrfProtection = false
port = 8501

2. Update Nginx Configuration for Your Domain

If you are using a domain, configure Nginx to proxy requests to the Streamlit app:

sudo nano /etc/nginx/sites-available/wa.aifab.xyz

Insert the following configuration:

server {
    listen 80;
    server_name wa.aifab.xyz;

    location / {
        proxy_pass http://localhost:8501;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_read_timeout 300s;
        proxy_connect_timeout 300s;
        proxy_send_timeout 300s;
    }
}

Save and enable the configuration:

sudo ln -s /etc/nginx/sites-available/wa.aifab.xyz /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl reload nginx

3. Run the Streamlit App

Run the Streamlit app directly or via Docker:

Directly on the VPS

streamlit run app.py

Using Docker

docker build -t streamlit-app .
docker run -d -p 8501:8501 --name streamlit-app --restart unless-stopped streamlit-app

4. Verify Accessibility

After starting the app, access it at:

  • Local VPS: http://localhost:8501
  • Public URL: http://<your-vps-ip>:8501
  • With domain: https://wa.aifab.xyz (if using Nginx and Cloudflare)

Previous post

Next post