Table of contents
Overview
In my previous two blogs. I have discussed docker basics and docker-compose.
Docker (Part - 1): Introduction and Basic Commands
Docker (Part - 2): Write a docker-compose to setup Postgres and Pgadmin
In this tutorial, We will see how to create our own docker image and build it. We will also setup a MERN stack application with docker.
Docker for React
To dockerize a react application we need to create a react app or we can use our existing react app. you can also dockerize your vue, angular, svelte or any other application you want with the same steps
create react app
npx create-react-app my-app
now we need to create Dockerfile in the root directory of our react application and paste below code.
Dockerfile
FROM node:lts-alpine
WORKDIR /usr/app
COPY package.json ./
RUN npm install
COPY . .
EXPOSE 8000
CMD ["npm", "start"]
Let's see what we have written
FROM - instruction specifies the base image that the image will be built on. In this case, the base image is node:lts-alpine.
WORKDIR - instruction specifies the working directory inside the image. This is the directory where the commands in the RUN instruction will be executed and the files in the COPY instructions will be copied to.
COPY instruction copies files from the host machine to the image. In this case, the package.json file is copied to the working directory. This file is used by npm to install the dependencies for the Node.js application.
RUN instruction runs a command in the image build process. In this case, the npm install command is run to install the dependencies for the Node.js application.
COPY instruction copies all the files from the current directory to the working directory in the image. This includes the Node.js application code.
EXPOSE instruction exposes a port on the container so that it can be accessed from the outside. In this case, the port 8000 is exposed.
CMD instruction specifies the command that will be run when the container is created from the image. In this case, the npm start command is run, which starts our applications.
Now we need to build our application
docker build -t <image_name> .
Replace <image_name> with the name of the image that you want to create. The . at the end of the command tells Docker to build the image from the current directory.
Our docker image is ready to run. Let's run our image
docker run <image_name>
yeahhh! our application is running.
Docker for Node server
Again create a node application and in the root file we need to create Dockerfile for our image
Dockerfile
FROM node:lts-alpine
WORKDIR /usr/app
COPY package.json ./
RUN npm install
COPY . .
EXPOSE 8000
CMD ["npm", "start"]
docker build -t <image_name> .
docker run <image_name>
Steps are almost same as both are running on node server.
Create docker-compose
In our previous blog, we saw how to create a Postgres database using docker-compose we will use the same concept to create a Mongo database to connect with our server. Also, we will build and run our client and server application from the docker-compose.
docker-compose.yml
version: '3'
services:
server:
build:
dockerfile: Dockerfile
context: "./server"
depends_on:
- mongo
ports:
- "8000:8000"
client:
stdin_open: true
build:
dockerfile: Dockerfile
context: ./client-react
ports:
- "8082:8082"
mongo:
image: mongo
restart: always
ports:
- "27017:27017"
environment:
- MONGO_INITDB_ROOT_USERNAME=admin
- MONGO_INITDB_ROOT_PASSWORD=password
mongo-express:
image: mongo-express
restart: always
depends_on:
- mongo
ports:
- "8081:8081"
environment:
- ME_CONFIG_MONGODB_ADMINUSERNAME=admin
- ME_CONFIG_MONGODB_ADMINPASSWORD=password
- ME_CONFIG_MONGODB_SERVER=mongo
version: '3' - line specifies the version of the Docker Compose file. The current version is 3.
services: - section defines the services that will be created. Each service has a name, a build configuration, and a set of ports that will be exposed.
server: - service defines a server that will be built from the Dockerfile in the server directory. The server will depend on the mongo service, which means that the mongo service will be started before the server service. The server will expose the port 8000.
client: - service defines a client that will be built from the Dockerfile in the client-react directory. The client will expose the port 8082.
mongo: - service defines a MongoDB database that will be used by the other services. The database will be restarted always, which means that it will be restarted if it crashes. The database will expose the port 27017.
mongo-express: - service defines a MongoDB management tool that will be used to interact with the MongoDB database. The tool will depend on the mongo service, which means that the mongo service will be started before the mongo-express service. The tool will expose the port 8081.
Other commands we have discussed in our previous blogs.
Now, If we run our MERN application
docker-compose up
See our application is running after building or pulling all the images! It may take some time and our application will run on the port we have mentioned.
###