Deploying web applications efficiently is a crucial part of modern software development. Docker simplifies application packaging, ensuring consistency across environments, while GitHub Actions automates workflows, enabling seamless CI/CD (Continuous Integration and Continuous Deployment).
In this tutorial, we will dockerize a Flask web application and set up a GitHub Actions pipeline to automate the build and deployment process. By the end of this guide, you’ll be able to:
Create a Flask web application with a user-friendly homepage.
Containerize the application using Docker.
Automate Docker builds and push images to GitHub Container Registry (GHCR.io) using GitHub Actions.
Verify and pull the Docker image from GHCR for deployment.
Before you start, star this repo: https://github.com/aitechnav/Dockerize_Flask_Github_Actions
Let’s get started! 🚀
To begin, we need a simple Flask application that serves a modern homepage.
Step 1: Create a Flask Web Application
Create a new project folder and navigate into it
mkdir flask-docker-ghactions && cd flask-docker-ghactions
2. Create the Flask application file (app.py)
from flask import Flask, render_template
app = Flask(__name__)
@app.route("/")
def home():
return render_template("index.html")
if __name__ == "__main__":
app.run(host="0.0.0.0", port=5000, debug=True)
- Create an HTML template (templates/index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<title>Flask Web Server</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body { text-align: center; padding: 50px; background-color: #f8f9fa; }
.card { border-radius: 15px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }
</style>
</head>
<body>
<div class="container">
<div class="card p-4">
<h1 class="text-primary">Welcome to Flask Web Server</h1>
<p class="text-muted">This is a simple web server running in Docker.</p>
<a href="https://aitechnav.com/" class="btn btn-primary">Learn Flask</a>
</div>
</div>
</body>
</html>
- Define the dependencies (requirements.txt):
flask
Step 2: Create a Dockerfile
Docker allows us to package the Flask app into a container for consistent deployment.
Create a Dockerfile in the project root:
# Use an official Python image
FROM python:3.9
# Set working directory
WORKDIR /app
# Copy the app files
COPY . /app
# Install dependencies
RUN pip install --no-cache-dir -r requirements.txt
# Expose Flask port
EXPOSE 5000
# Run the Flask app
CMD ["python", "app.py"]
- Build the Docker Image:
docker build -t flask-webserver .
- Run the Flask App in a Docker Container:
docker run -p 5000:5000 flask-webserver
Now, visit http://localhost:5000 in your browser to see the app in action! 🎉
Step 3: Automate Deployment Using GitHub Actions
Now, let’s set up GitHub Actions to automate the build and push process to GitHub Container Registry (GHCR.io).
1. Set Up GitHub Actions Workflow
Create the following folder and file inside your repo:
mkdir -p .github/workflows
touch .github/workflows/docker-build.yml
Open .github/workflows/docker-build.yml
and add
name: Build and Push Docker Image
on:
push:
branches:
- main # Trigger workflow on main branch push
jobs:
build-and-push:
runs-on: ubuntu-latest
steps:
- name: Checkout code
uses: actions/checkout@v4
- name: Log in to GitHub Container Registry
run: echo "${{ secrets.GHCR_TOKEN }}" | docker login ghcr.io -u ${{ github.actor }} --password-stdin
- name: Build Docker Image
run: |
docker build -t ghcr.io/${{ github.repository_owner }}/flask-webserver:latest .
docker tag ghcr.io/${{ github.repository_owner }}/flask-webserver:latest ghcr.io/${{ github.repository_owner }}/flask-webserver:${{ github.sha }}
- name: Push Docker Image
run: |
docker push ghcr.io/${{ github.repository_owner }}/flask-webserver:latest
docker push ghcr.io/${{ github.repository_owner }}/flask-webserver:${{ github.sha }}
Step 4: Set Up GitHub Secrets
Go to your GitHub repository → Settings → Secrets and variables → Actions.
Click New repository secret and
add:Name: GHCR_TOKENValue: A GitHub Personal Access Token (PAT) with read:packages, write:packages, and delete:packages scopes.
Step 5: Verify the Deployment
Check the Image on GitHub
Go to GitHub Repository → Packages tab.
Click on your flask-webserver package.
You’ll see the image tags and latest version pushed.
Pull and Run the Image Locally
Once the image is pushed to GHCR, you can pull and run it with:
docker pull ghcr.io//flask-webserver:latest
docker run -p 5000:5000 ghcr.io//flask-webserver:latest
Conclusion
In this guide, we created a Flask web application with a simple UI.
✅ Dockerized the app to ensure consistent deployment.
✅ Set up GitHub Actions to automate Docker builds and push to GHCR.io.
✅ Verified our image on GitHub Container Registry and pulled it for deployment.
With this setup, every push to the main branch will automatically update your Docker container, making deployments effortless! 🚀
Code in this repository (star this repo): https://github.com/aitechnav/Dockerize_Flask_Github_Actions
Top comments (0)