Dockerized and run the React Application Part 2

In part1 , we have created the Docker Image using dockerfile and run the React Application, tested the result in the browser, In part2 we ar...

In part1, we have created the Docker Image using dockerfile 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 web server used to serve the react application, Here using the Nginx webserver.

                            Nginx is one of the popular webserver used in real-time application.

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 as same as development.

Now build the npm using the command RUN npm run build.

Now build file has been created after that we are using Nginx to run the React application.

Using the command “FROM nginx” to use the Nginx web server as 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 Docker file get 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 purpose.

Once the build finished checking our docker image name “techiev/react-nginx” in docker images.

Running production build: 

Once the react application getting ready to 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 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 react application with Nginx webserver.

We can crosscheck using the command “docker ps”

It showed the container name, id, created date, the status of container, ports used in the container.  Our container name “techiev/react-nginx”

Now, we have successfully Dockerized the react application for development and production uses cases.