Containerizing the Magic: Dockerizing and Running Your React Application (Part 2)

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.

----------------------------------------!!!! Happy Learning with Techiev !!!!!!!!----------------------------------

-------------------------Subscribe our Youtube Channel by clicking the below link---------------------- ----------------------------!!https://www.youtube.com/@techieview729!!---------------------










Name

AWS,19,Devops,30,linux,11,
ltr
item
Techie View: Containerizing the Magic: Dockerizing and Running Your React Application (Part 2)
Containerizing the Magic: Dockerizing and Running Your React Application (Part 2)
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8Mpfk9aKtA4jUPLibXwsClpYk6FABc8qbnFI24OvnLo1iT8Xiti9GNFb6FZ_QiTpdPvVHR3WTdoIFvT_x86jFbygd6braP0GE1SG9e7FnlfbGhQSv2FSFvj4z7aHXqSp7_TSNq61rSUO5/s320/photo-1493946740644-2d8a1f1a6aff.jpeg
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8Mpfk9aKtA4jUPLibXwsClpYk6FABc8qbnFI24OvnLo1iT8Xiti9GNFb6FZ_QiTpdPvVHR3WTdoIFvT_x86jFbygd6braP0GE1SG9e7FnlfbGhQSv2FSFvj4z7aHXqSp7_TSNq61rSUO5/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