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/continuous-integration-docker
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_templateapp = 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> <div> <h1>Welcome to Flask Web Server</h1> <p>This is a simple web server running in Docker.</p> <a href="https://aitechnav.com/">Learn Flask</a> </div> </div></body></html>- Define the dependencies (requirements.txt):
flaskStep 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 imageFROM python:3.9# Set working directoryWORKDIR /app# Copy the app filesCOPY . /app# Install dependenciesRUN pip install --no-cache-dir -r requirements.txt# Expose Flask portEXPOSE 5000# Run the Flask appCMD ["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-webserverNow, visithttp://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 Imageon: push: branches: - main # Trigger workflow on main branch pushjobs: 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/continuous-integration-docker
Top comments(0)
For further actions, you may consider blocking this person and/orreporting abuse
