Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Cover image for Automating Flask App Deployment with Docker & GitHub Actions
Anuj Tyagi
Anuj Tyagi

Posted on • Edited on

     

Automating Flask App Deployment with Docker & GitHub Actions

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! 🚀

Image description

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)
Enter fullscreen modeExit fullscreen mode
  1. 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>
Enter fullscreen modeExit fullscreen mode
  1. Define the dependencies (requirements.txt):
flask
Enter fullscreen modeExit fullscreen mode

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 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"]
Enter fullscreen modeExit fullscreen mode
  1. Build the Docker Image:
docker build -t flask-webserver .
Enter fullscreen modeExit fullscreen mode
  1. Run the Flask App in a Docker Container:
docker run -p 5000:5000 flask-webserver
Enter fullscreen modeExit fullscreen mode

Now, 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 }}
Enter fullscreen modeExit fullscreen mode

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)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

Passionate about cloud, software architecture, SRE practices
  • Location
    United States
  • Pronouns
    He/Him
  • Joined

More fromAnuj Tyagi

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp