In part1 , we have created the Docker Image using docker file and run the React Application, tested the result in the browser, In part2 we a...
In part1, we have created the Docker Image using docker file and run the React Application, tested the result in the browser, In part2 we are going to do and create a docker container with Nginx web server for a production build.
Production build:
In the production build, we are using a web server used to serve the react application, Here using the Nginx webserver.
Nginx is one of the popular webservers used in real-time applications.
Now create the Another Dockerfile for production as Dockerfile.pro, For a production build, make the production build file using the npm run build.
For production build dockerfile look like below
Here until the command “ copy . . “, copying the whole files to the app is the same as development.
Now build the npm using the command RUN npm run build.
Once now build file has been created after that we are using Nginx to run the React application.
Use the command “FROM nginx” to use the Nginx web server as the webserver here.
Next step already we have build file, Copy the build file /app/build to Nginx path /usr/share/nginx/html
Final step webserver default http running port to be 80, define the port as “EXPOSE 80”.
Once the Docker file gets ready, build that Dockerfile using the docker build command
Command: docker build -f Dockerfile.pro -t techiev/react-nginx .
Where -f -- > force
Here we are using the Dockerfile as Dockerfile.pro so mentions as Dockerfile.pro for build purposes.
Once the build is finished check our docker image name “techiev/react-nginx” in docker images.
Running production build:
Once the react application gets ready make the application run on the Nginx server using their default port.
Command: docker run -it -p 8080:80 techiev/react-nginx
Here I have mentioned the port 8080 to run the react application using the Nginx web server, so it was running in the port 8080.
Now I am setting the port as 5000,
Command: docker run -it -p 5000:80 techiev/react-nginx
Here the browser output
Now successfully create and run the Docker container of reacting application with Nginx webserver.
We can crosscheck using the command “docker ps”
It showed the container name, id, created date, the status of the container, and ports used in the container. Our container name is “techiev/react-nginx”
Now, we have successfully Dockerized the react application for development and production uses cases.
