In this blog, I would like to write about docker image and docker container. Recently, I tried to make some docker containers and images and I also researched about how docker works and why it is better than the Virtual Machine. Basically, docker containers are lightweight. They only include the necessary dependencies and libraries required to run a specific application, while VMs need to run an entire guest OS, which consumes more resources.
Docker can be described as an open-source platform which allows to automate the deployment, scaling by using the concept of containerization. It simplifies the process of packaging applications and the dependencies into containers, making it easier to develop, deploy and scale applications across different environments.
Now, let's learn about some of the components of the Docker!
A docker image works like a read only blueprint which is used to create Docker containers. The image is build using the instructions specified in the Dockerfile which is a simple text document.
A docker container is a running instance of the docker image. Containers are isolated and lightweight, sharing the host machine's kernel but having their own isolated filesystem and network. They can be created, started, stopped, and deleted using Docker commands.
- Download and install Docker
- https://docs.docker.com/get-docker/ - Refer to this link for installing and setting up the Docker on the appropriate platform
Let's containerize a React application!
For this blog, I am going to create a simple react application and then containerize the react application.
Create a Dockerfile
Add a Dockerfile in the root directory and the add the following contents
FROM node:18-alpine WORKDIR /sample-app COPY ./package*.json . RUN npm install COPY . . RUN npm run build EXPOSE 3000 CMD ["npm", "start"]
Dockerfile, we use the official Node.js runtime as the base image, copy the
package-lock.json to the container, install the dependencies, copy the entire React app into the container, build the app for production, expose the port
3000 and then start the application with the
npm start command.
Build the docker image
Dockerfile is ready, we can build our Docker image. In the terminal or command prompt, navigate to the directory which contains Dockerfile and run the command given below.
$ docker build -t sample-react-image .
-t flag tags our image with a name, allowing to reference it.
Run the docker container
Since, we have built our docker image, we can run a container by using the following command
$ docker run -p 3000:3000 sample-react-image
-p flag maps port
3000 from the container to port
3000 on our local machine
Access the React Application:
You can access the react application from http://localhost:3000/
As you can see that our application is running on the port 3000!
You can also check docker desktop to see that the container is running successfully on the port 3000.
In this blog post, we explored the process of Dockerizing a React application. We started by setting up a basic
Dockerfile, which serves as a blueprint of the environment and instructions to build our container. Dockerizing our React application provided numerous benefits. Docker's containerization allowed for better resource utilization, enabling multiple applications to run on the same machine without conflicts. Scalability became more manageable, and deploying updates became a matter of swapping out containers rather than complex server configurations. I hope this blog post has been a helpful guide for Dockerizing your React application.