Docker Tutorial: Push, Pull, Zero Downtime Deployment for a Simple Profile Website
This tutorial demonstrates how to use Docker to deploy and maintain a simple profile website with zero downtime during updates. We'll cover building a Docker image, running it, and deploying updates without interrupting service.
1. Prerequisites:
- Install Docker Desktop (for Windows/macOS) or Docker Engine (for Linux).
- Create a Docker Hub account (optional, for pushing images).
- Basic understanding of HTML, CSS, and JavaScript.
- VS code with extensions docker, sass compiler, live
2. Project Structure:
profile-website/
├── index.html
├── styles.css
├── styles.scss
├── script.js
├── Dockerfile
└── package.json (optional)
3. Website Code (index.html):
<!DOCTYPE html>
<html>
<head>
<title>My Profile</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Welcome to My Profile</h1>
<p>This is a simple profile website.</p>
<script src="script.js"></script>
</body>
</html>
4. CSS (styles.css):
body {
font-family: sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh; /* Ensure full viewport height */
}
h1 {
color: #333;
}
p {
color: #666;
}
5. SCSS (styles.scss):
$primary-color: #333;
$secondary-color: #666;
$background-color: #f0f0f0;
body {
font-family: sans-serif;
margin: 0;
padding: 0;
background-color: $background-color;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
h1 {
color: $primary-color;
}
p {
color: $secondary-color;
}
}
Compile SCSS to CSS: You'll need an SCSS compiler (like Sass or Dart Sass). A simple way is to use an online compiler or install Sass:
npm install -g sass # If you have Node.js and npm
sass styles.scss styles.css
6. JavaScript (script.js - Optional):
console.log("Hello from script.js!");
7. Dockerfile:
FROM nginx:latest # Use Nginx as the web server
COPY . /usr/share/nginx/html # Copy website files into the container
EXPOSE 80 # Expose port 80
8. package.json (optional):
{
"name": "profile-website",
"version": "1.0.0",
"scripts": {
"build-css": "sass styles.scss styles.css"
},
"devDependencies": {
"sass": "^1.62.1"
}
}
9. Docker Commands:
(a) Verify Docker Engine:
docker version
(b) Build the Docker Image:
Navigate to the profile-website directory in your terminal.
docker build -t my-profile-website . # Build the image, tag it as my-profile-website
(c) Run the Docker Container (First Time):
docker run nginx
docker run -p 80:80 my-profile-website # Run the container, map port 80 on host to 80 in container
Open your browser and go to http://localhost:80 to see your website.
(d) List Containers:
docker ps # List running containers
docker ps -a # List all containers (running and stopped)
(e) Stop and Remove Container:
docker stop <container_id_or_name>
docker rm <container_id_or_name>
(f) Tag Container Name:
docker tag my-profile-website your-dockerhub-username/my-profile-website:v1 # Tag the image for Docker Hub
(g) Push Image to Docker Hub (Optional):
docker login # Enter your Docker Hub credentials
docker push chandra65/my-profile-website:v1 # my docker hub username -> chandra65
mkdir trydemo # to show docker pull demo - in your drive root cd trydemo # gog to that directory code . #to invoke vs code editor w;; will open in vs docker pull chandra65/my-website:v1 # in Terminal prompt & click docker icon in the side panel docker login # login with credentials - docker run -p 80:3001 docker.io/chandra65/my-website:v1 # assigned different ports to avoid conflict docker pull chandra65/my-website:v1 # in Terminal prompt & click docker icon in the side panel
docker run docker.io/chandra65/my-website:v1 # once create in container name keep cursor and right click to open in browser as shown below
(h) Zero Downtime Deployment:
-
Update Website Files: Make changes to
index.html,styles.css, etc. -
Rebuild the Image:
Bashdocker build -t my-profile-website:v2 . # Build a new image with a new tag -
Run a New Container on a Different Port (e.g., 8080):
Bashdocker run -p 8080:80 my-profile-website:v2 -
Test the New Container: Visit
http://localhost:8080to verify the changes. -
Stop the Old Container:
Bashdocker stop <old_container_id_or_name> docker rm <old_container_id_or_name> -
Rename and Run the New Container on the Original Port (80):
Bashdocker stop <new_container_id_or_name> # Stop the container running on 8080 docker rm <new_container_id_or_name> # Remove the container running on 8080 docker run -p 80:80 my-profile-website:v2 # Run the new container on port 80.
By following these steps, you effectively deploy the updated website on a different port, test it, and then switch traffic to the new version by stopping the old container and starting the new one on the original port, ensuring zero downtime.
Important Considerations:
- For production environments, use a more robust approach with a load balancer or orchestration tools like Docker Swarm or Kubernetes for true zero downtime.
- Consider using a reverse proxy (like Nginx or Traefik) to handle traffic switching smoothly.
- For more complex applications, use a database and manage migrations carefully.
This tutorial provides a basic understanding of using Docker for zero-downtime deployments. Remember to adapt these steps to your specific needs and environment.
No comments:
Post a Comment