EP03: Docker container Project
Building a Simple Python-based Flask Web App with Docker
Welcome, aspiring developers! In this article, we’ll head towards the journey to create a Python-based Flask web app with Docker. Our goal is to build a straightforward login page that interacts seamlessly with a Flask backend, all neatly packaged in a Docker container.
Step 1: Setting up the Dockerfile
# Use the official Python 3.8 image
FROM python:3.8-slim
# Set the working directory to /app
WORKDIR /app
# Copy the current directory contents into the container at /app
COPY . /app
# Install the dependencies specified in requirements.txt
RUN pip install -r requirements.txt
# Expose port 3000 for the Flask app
EXPOSE 3000
# Command to run the Flask application
CMD python ./app.pyLet’s make our concise understanding of each Dockerfile instruction:
1. FROM:
Sets the base image for our Docker image, using the official Python 3.8 slim variant.
2. WORKDIR:
Establishes the working directory within the container as /app for subsequent commands.
3. COPY:
Transfers all files from the host’s current directory to /app in the container.
4. RUN:
Installs Python dependencies specified in requirements.txt during the image build.
5. EXPOSE:
Informs Docker that the Flask app inside the container will use port 3000.
6. CMD:
Specifies the default command to run on container start, initiating the Flask app.
These instructions collectively form the blueprint for our Docker image, ensuring a smooth and standardized environment for our Flask web application.
Step 2: Creating a Flask Python App
The Flask application serves as a simple login page (‘login.html’) and welcomes users with a personalized message based on the provided name. It handles both form submissions and URL parameters for flexibility in user input. The application is set up to run on port 3000, accessible externally, with the development server listening on all network interfaces.
from flask import Flask, render_template, redirect, url_for, request
app = Flask(__name__)
@app.route('/')
def index():
return render_template('login.html')
@app.route('/success/<name>')
def success(name):
return 'Welcome, {}'.format(name)
@app.route('/login', methods=['POST', 'GET'])
def login():
if request.method == 'POST':
user = request.form['nm']
return redirect(url_for('success', name=user))
else:
user = request.args.get('nm')
return redirect(url_for('success', name=user))
if __name__ == '__main__':
app.run(host='0.0.0.0', port=3000, debug=False)Make sure to create the below directory structure for this project in your local.
Step 3: Crafting the HTML Login Page
Understand the role of HTML:
- HTML Structure: Create a simple form for user input.
2. Form Action: Point the form to the ‘/login’ route in the Flask app.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Page</title>
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #f4f4f4;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
form {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: #333;
}
label {
font-size: 18px;
color: #555;
}
input {
width: 100%;
padding: 10px;
margin: 8px 0;
box-sizing: border-box;
}
input[type="submit"] {
background-color: #4caf50;
color: white;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<form action="/login" method="post">
<h1>Login Page</h1>
<label for="nm">Enter Name:</label>
<input type="text" id="nm" name="nm" required>
<input type="submit" value="Submit">
</form>
</body>
</html>Step 4: Requirements.txt File
Flask
Explaining the requirements file:
- Flask Dependency: Specify Flask in requirements.txt.
2. Purpose: This file lists project dependencies for easy installation.
Step 5: Running the App
Below are the docker commands to be used for building a docker image from a co0ntainer, running the container to test applications, logging into docker, tagging the image and pushing the tagged image to Dockerhub.
# Build Docker image
docker build -t login-app .
# Run Docker container, mapping port 3000
docker run -p 3000:3000 login-app
Executing the Docker commands:
Build Image: Use Docker to build an image from the Dockerfile.
Run Container: Start a container based on the created image, mapping ports.
Here, I’m giving my name as an input for login page
Finally, it’s welcoming me as we expected
Bonus Step:
Docker Login and Push to Docker Hub
It prompts for your username and Password, provide it
# Log in to Docker Hub
docker login
Note: In my case, I already have configured my docker hub credentials. Hence, it appearedas above for authentication.
NOTE: In the initial login, it would prompt you to provide username and Password credentials for docker login.
Image Tagging:
# Tag your image
docker tag login-app pravallika1015/login-app:latest# Push the image to Docker Hub
docker push pravallika1015/login-app:latest
- Docker Login: Authenticate with your Docker Hub account.
2. Tag Image: Associate your local image with your Docker Hub repository.
3. Push Image: Upload your image to Docker Hub for sharing.
You will see the same image in the docker hub repository after pushing.
Conclusion
In conclusion, we’ve successfully built a simple Flask web app and encapsulated it within a Docker container named python-login app This approach ensures portability and scalability, making it easier for others to replicate and deploy the application.
Stay tuned, folks! In our upcoming sessions, we’ll be taking this project to the next level by deploying it using Kubernetes. Let’s deep dive into container orchestration and have a seamless deployment experience using Kubernetes.