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.

















COMMENTS

Name

AWS,1,Devops,9,linux,9,
ltr
item
Techie View: Dockerized and run the React Application Part 2
Dockerized and run the React Application Part 2
https://1.bp.blogspot.com/-LGKGdBebsy0/X88Ghea6iRI/AAAAAAAAAKc/Xdi2X3T61qMSlJzoavuJaE9LhtpSJLY4gCLcBGAsYHQ/s320/photo-1493946740644-2d8a1f1a6aff.jpeg
https://1.bp.blogspot.com/-LGKGdBebsy0/X88Ghea6iRI/AAAAAAAAAKc/Xdi2X3T61qMSlJzoavuJaE9LhtpSJLY4gCLcBGAsYHQ/s72-c/photo-1493946740644-2d8a1f1a6aff.jpeg
Techie View
https://www.techiev.com/2020/12/dockerized-and-run-react-application_7.html
https://www.techiev.com/
https://www.techiev.com/
https://www.techiev.com/2020/12/dockerized-and-run-react-application_7.html
true
7013663511659419322
UTF-8
Loaded All Posts Not found any posts VIEW ALL View Full Article Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy