Deploy React App in Docker using Nginx

hello everyone hope you are doing well so today we'll be learning react with nginx and docker so let's get started so first we'll clone a repository uh from our sample project and it is given in the g tab so you can clone this repository for usage for in this tutorial so i am cloning this repository in my local so you type git clone and the repository address okay so i'll be using visual studio code to edit the project files okay so we'll be modifying the docker files and the docker compose file so you have to only do this you can also make contents to the projects if you want but only docker and docker compose file is enough to learn in deployment with nginx of react app okay so you can clear the contents of the existing docker file and write a new one so i'll show you the contents okay so it will have a two stage build stage one and stage two so in stage one i will be building a react app and i will be using the same in stage two which will be used for nginx image built okay so this is a multi-stage docker build and in one command you can build a react app and deploy it in nginx in a docker container so this is very helpful and you can use in for deployment in prod where the request will be served from nginx and that is the standard approach for deployment so i for the react app i am using node 12.8 and the same one like i am using the user app as the work directory and running npm run build to build a sample version of our deployment and in the stage two i'll be using nginx alpine the base image of nginx and will be copying the contents which we built in stage 1 of our react app from the build directory and put it in nginx so this is the nginx alpine and then we have work directory as nginx html that is the work so we clear the contents from it and then copy user app build the contents from there to the nginx work directory okay yeah so under user src app build you can find the stage of react like after build all those files will be there okay and here we are copying it and this is our entry point for running the nginx container so we'll be so after building it only one image will be built and we'll be running that image okay so i'll be using docker compose file to deploy it and i am showing you that content for the docker compose file we are using version 3.4 for this yml file okay and i am exposing it at eight zero eight zero so let's build this con image so we type docker compose build so this will build our image from the docker file we created earlier so here you can see in the command line that there are two stages happening one for building the react app and another for building the nginx current image okay so at the end we will be deploying that nginx container only so when you do docker compose up it runs our reactor engine x app okay and you can ignore this message initially if you have run multiple times so if you do a docker piece we can see your running container which is running at eight zero eight zero okay and i have mapped it with port 80 of engine x but when accessing you have to do it by 80 you can use any other port as well so here is our running version of the app okay now to verify that it is running from the container of nginx i'll show you the logs so let me go to command line and here you have to take the container name and type docker logs the container id and you can give minus f that is the trailing log happening in the container okay so now you hit the our url once again you will show from the access logs that it is going and to our nginx okay so you can see the request is going over there in our nginx container okay so this is how you can deploy a nginx in a react using nginx okay so i will show you the contents of the docker file again okay so we are using node 12.8 as our first stage of the build and then copying the same in our nginx image of nginx alpine so i am copying those contents of the stage one in stage two okay so finally we'll have only one image okay which will be a image wheel from nginx alpine containing our reactor okay so thank you all hope you have enjoyed this tutorial so give me feedback and please subscribe so thank you

Channel: Aveti Tutorials

Views: 447

Keywords: react tutorial, docker container, docker nginx, deploying react app, dockerize react app, docker with nginx, reactjs, react with docker, nginx react docker, docker react app docker nginx, Reactjs production deployment

Id: uOa6SN3Dn4s

Length: 6min 28sec (388 seconds)

Published: Sat Oct 30 2021