Month: November 2020

This article helps you to deploy a React application using docker containers. To know about docker and docker containers refer this article. This involves creating a react app using npx, then we use the docker file to deploy the docker containers using nginx images.

Create a React application

First, we need to create a React application. For this we can use npx create-react-app tool.

npx create-react-app react-docker-example
cd react-docker-example && npm install
npm start

Run the app in the localhost at http://localhost:3000/ or if any cloud such as AWS or Azure VMs with the 3000 port to check the app is running.

Create dockerfile

First, create a dockerfile in the React app folder with the following lines of dockerfile code.

# build stage
FROM node:lts-alpine as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build     

# production stage
FROM nginx:stable-alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

• The FROM is the base image in which React app needed to run here. Here we use node:lts-alpine image to first build the artifacts for the React app, that it set as build-stage.
• The WORKDIR is the dir where the app is build and run.
• Then we copy package.json to the workdir /app.
• Then run npm install to install dependencies and run npm run build to build the dependencies.
• In production-stage we run the react application using nginx:stable-alpine image.
  For this we need to copy the files to nginx/html folder, then we expose the port 80.

Build the docker image

Next step is to build the docker image using the docker file using the following command

docker build -t dockertutorial/react-example .

The -t is used for tag command here we named as react-example and we need to mention the folder here . used for selecting all. It take some time to build it and shows following result.

Run the container

The last step is to run the container. docker run command is used to run the container from the image we created as following

$docker run -d -it -p 80:80 --name reactapp dockertutorial/react-example:latest 
fd2285a0a2e37afc9d0317ce6c668d2c2bf23a71d75a9df8b8d7134c8d223573

• -d runs the command in detached mode.
• -p refers to port which expose container to local system, here it expose port 80 of container to port 80 of local machine.
• -it runs in interactive mode with the tag name and --name refers to name of the container.

Then go to http://localhost:80 or if you use cloud VM use the public IP address and select the port 80. It gives the following results

This react application can also be run with multiple containers using docker compose. This will be our next article.

• For my docker archive -> go.
• My programming archives -> go.
• Any docker reference -> go.

If any suggestion and queries please comment it, so I can improve my self.

 1,133 total views