In this blog, we will demonstrate how to containerize a simple web server application using Docker. We will use Nginx as our web server and create a Docker image that runs the server inside a container. We'll then make changes to the application code and update the running container with the new image without interrupting its operation.
Clone this repository
https://github.com/eddzaa/WebApp.git
Step 1: Creating the Dockerfile
Let's start by creating a Dockerfile. This file specifies the steps to build the Docker image. Open a text editor and paste the following content:
# Use an official web server image as the base image
FROM nginx:alpine
# Set the working directory inside the container
WORKDIR /usr/share/nginx/html
# Copy the HTML, CSS, and JS files from your local directory to the container
COPY index.html .
COPY assets ./assets
# Expose the port that Nginx will be running on (default is 80)
EXPOSE 80
# Command to start the Nginx server when the container runs
CMD ["nginx", "-g", "daemon off;"]
Step 2: Building the Docker Image
With the Dockerfile ready, it's time to build the Docker image. Open your terminal or command prompt, navigate to the directory where you saved the Dockerfile and execute the following command:
docker build -t simple-web-server .
This command tells Docker to build an image with the tag simple-web-server based on the instructions in the Dockerfile present in the current directory.
Step 3: Running the Container
After the image is built, we can run a container based on that image. Use the following command to run the container and map the container's port 80 to your host's port 80:
docker run -d -p 80:80 --name my-web-server simple-web-server
The -d flag runs the container in detached mode, so it runs in the background. The -p flag maps the host's port 80 to the container's port 80. The --name flag sets a name for the container for easier management.
Step 4: Testing the Application
Now that the container is running, open your web browser and navigate to http://localhost. You should see your portfolio website displayed, confirming that the application functions correctly
.
Step 5: Making Changes and Updating the Container
Let's make a simple change to the application's CSS styling. Open the style.css file in the assets/css/ directory and modify some styling (e.g., change the color of background ).
After making the changes, it's time to update the Docker image and the running container. Follow these steps:
5.1: Rebuild the Docker Image
Open your terminal and execute the following command:
docker build -t simple-web-server .
5.2: Update the Running Container
Now that the updated image is built, update the running container with the new image using the following command:
docker stop my-web-server
docker rm my-web-server
docker run -d -p 80:80 --name my-web-server simple-web-server
This command rebuilds the Docker image with the updated application files.
The first two commands stop and remove the existing container (named my-web-server), and the third command starts a new container with the updated image.
The updated container should now reflect the changes made to the style.css file. Open your web browser and navigate to http://localhost to see the updated colors or other styling changes applied to your portfolio website.
By following these revised steps, the updated Docker image should contain the latest changes to your application code and styling, and the running container should now display the changes correctly.
Conclusion ✨🎉
Congratulations on successfully containerizing your simple web server application with Docker! 🚀 Docker provides a fantastic way to manage and deploy applications efficiently. By following the steps in this blog, you've learned how to create a Docker image, run a container, and update it with changes without interruption. Containerization simplifies development and deployment, making it easier to maintain and scale your applications. Happy containerizing! 😊🐳