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
FROMis the base image in which React app needed to run here. Here we usenode:lts-alpineimage to first build the artifacts for the React app, that it set asbuild-stage. - The
WORKDIRis the dir where the app is build and run. - Then we copy
package.jsonto the workdir/app. - Then run
npm installto install dependencies and runnpm run buildto build the dependencies. - In production-stage we run the react application using
nginx:stable-alpineimage.
For this we need to copy the files tonginx/htmlfolder, then we expose the port80.
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
-druns the command in detached mode.-prefers to port which expose container to local system, here it expose port 80 of container to port 80 of local machine.-itruns in interactive mode with the tag name and--namerefers 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.
If any suggestion and queries please comment it, so I can improve my self.
1,142 total views
