Deploy a React App with ExpressJS and Docker

hello everyone in this video i will show you how to deploy a react application with express.js and docker we start from the example of the previous videos i'm going to link the previous video here and build a docker container with the server and client side of the application so let's quickly review the application architecture we have server file server.js where the express.css web server is running then i'm going to go deeper in the taste on how we're using espresso is to serve static files then we have a react application on the source and public folder the reactor application has been built using the create react app boilerplate before checking the docker file i want to give an overview of the architecture of the application so let's say we have our docky container which i'm gonna call it here so it's gonna be local container and i'll change the background like this we i would like to have inside the docker file a client ui image so a client ui build file where the right application will set so this one will be the client ui and then i want to have a server up on the same docker image which is gonna run express.js and it's gonna serve the um sorry let me change color and it's gonna serve the client ui application so this thing is gonna serve the client ui application and the docker container will expose the um here like a port like it can be 500 for example to the operating system so this is like the ideal architecture and then i'm going to show you how you can do that on using docker and build your custom image so the first part of the docker file is for the ui application so i call it ui build and this is for the react application and my goal in this script is to build the application running npm run run build npm run build we create will create a build folder as you can see here with the statifiers needed for the right application to be served by express.js so let's go through all the commands of the docker file what i'm doing here is changing the work directory it's really hard to you this is like how i did it then i'm copying the package.json file and i'm running npm installed so very basically so far next step is to copy the react folders where the application sits so it will be two of them search folder and public folder where on the search folder we have the app direct application files and on the public folder we have the static files like index html and all the you know images and logos next and last step for the client app is to run the npm run build so what we did in this different steps is to basically create inside our um docker image a folder called user app client where we copy all the react application files and we run npn road build just a quick clarification here i'm doing i'm copying first the packages on and then the search and public files because how the docker file and the docker image build works is that for each of the steps they compute and hash so every time something change it will start from the beginning what i want to do here is every time i change something on the source or on the public folder i don't want to run npm install and all over again so i am separating the two steps so i can reuse these tabs if nothing changes on the packages next step is to build the server part the server side so what i'm doing again i am i'm setting work direct what directory to user app then from here i copy from ui build so this step uh before this one before sorry this one so i'm copying uh the files created by the npn run build to a new folder called client build so this one at this point we will have on our user up the uh build files on the user app client build then i'm changing again the work directory to go on this server to have all the server files into another folder just for clarity and then i'll copy it again a package.json and npm install so i can install all the modules needed for the server.js next step is to copy in this case it's just one file because it is a very simple um expressjs web server in your production case maybe it will be like um you know a server folder something like that in this case it's just um one single file and i copy this file into the server folder again then i'm setting the node environment variable to production and exposing the 5000 port last step is to run the command for the production in this case is node server gs and just keep in mind that i am in this folder so in this folder i want to run node server.js that i copy at this tab at this step we have a fully working docker image with react application with the react app and the express.js server serving the rat application files let's see i had to do some changes on the server.js file in order to use the correct um path for the steady files of react so as what i did is to base on the m variable so if it's development i'm using some uh paths if it's production using some others that are defined on the docker file so what we're interested here is the production case so if um if did not have here i should like change it to be more let's say precise i can do something like this uh production and this should be all right okay so here i'm saying if the not nv is in production please serve all the static files from client build since i'm running the node server on the work on the let's see here so i am running the node.js process on this uh folder and the react application files are on the client build folder so what i have to do is to go up by one level and then navigate through client build and this is what i'm doing on the express static middleware so i'm basically saying navigate through department folder go to client and build and from here serve all the statifiers same thing for the index.html file if you need to understand why this is needed for the express.js file i'm going to link the previous video where i am explaining all of these syntax so with this in mind we should be able to run our docker container first on localhost and then i'm going to deploy it on a server let's try out okay so we have our dockify i am on the directory with the docker file next step is to build the image i i have already done it but the command will be docker build then you can set like a tag and i think i call it like let me see so i did like docker containing image unless yeah collect like this and let's see so the command is talk build build minus tag this one and then use the root user root um path to get the docker file so what is gonna happen is that in this case since already done it like before the video it's all cached as you can see so as i was saying before if the docker engine knows that the layer already have already been built is using the caching modules so here we have our docker image next step is to run the container so let me copy the name of the image it's going to be docker container run we need to open some port so it's going to be 5000 then i'm going to just do this one to remove the container and then it's going to be docker express js react i think there is just a console.log saying server start yes okay so now the container is running and if we visit localhost 5000 we should be able to see our react application yes it's working let's see if we can navigate through the roots we can if we reload everything is working so yes we test it on the local lost and it's working next step is to deploy on an ec2 instance okay i logged into an situ instance i installed docker it's quite simple if you just google it like uh ubuntu docker installation something like that and it's working so if we do like um docker version i think something's gonna come out yeah so docker is working it's running and everything is okay next step is to i clone the project so if i go here i should be able to see the docker file yes it's here and it's the same that we have just shown at the beginning of the video so we have to do the same steps so i already built the image so if i do like this i should see the image yes i call it in this case i call it docker express and i think i also already yeah the container i think is already running yes it's already running uh so the the command is the same as like docker docker container run then you expose the ports and like this and you run the image we can see the full command if you do like you know history and this is the command that i used so this one this is running so on the on our server there is a process running on localhost 5000 last step last step sorry is to check the nginx config and see if is actually forwarding all the requests to our docker container so we go on the etc nginx conf express.js conf and what i'm saying on the root path or other like a location block with the proxy pass to locals 5000 again i explained all of this in the previous video so feel free to to watch it so now if we go and when i just run sudo service engine extra style to make sure that it picked up all the changes and if we go on the ip of the server which is this one we will see that it's running using the docker container so the routes are working as well and it's all working as expected which is quite cool okay thanks for watching i hope this video was useful i'm gonna leave all the reference like github repo and commands that i use in this tutorial on the video description if it was interesting feel free to subscribe to the channel and hit the like button thanks for watching and have a great day cheers

Channel: Enrico Portolan

Views: 177

Keywords: aws, serverless, cloud

Id: 5lK_iFJsWv4

Length: 12min 35sec (755 seconds)

Published: Wed Jun 30 2021