Deploy a React App using Nginx

hello guys in this video i will show you how to deploy a react application using nginx since all the files in a single page application are static files nginx is the ideal web server for saving these static files the only thing we need to do is matching url path with the server's folder perfectly this can be more complicated when we use a subpath or when we need to deploy more than one react application on the same server or when we use a react router to implement roots in react i will show you how to solve all of these issues during the tutorial let's start first by creating the application using create react app boilerplate to get started with the create react application boilerplate we just need to do mpx create react app and then we choose a folder when to say where to save the application so this could be like my app nginx and then we wait like a few minutes since he has to install all the other modules and all the um files for react okay i opened the code created by the create react application scripts on visual studio code and as we can see non-modules are already installed we have a very simple react application with an app.js file and gonna start it out just to see how it looks like so if we run npm start we should see on localhost 3000 the uh app running so it's going to be localized 3000 it's gonna it's gonna have like a react icon spinning okay cool this is like the basic react application now we want to implement a very simple uh very simple route with react router dom so this is the website is the package we need to install it's called react react router dom is one of the most popular package to to implement routes in react so let's move forward and install it sorry okay and while uh in the meantime i'm gonna just copy the sample code from the uh documentation page so ideally we want to have like three very basic routes home about end users and we're going to use it just for show you how to how nginx can serve this path even if and not in the index file let's say so we want to let's see how it looked yeah so i can just delete everything and copy the full uh example from the director dom documentation so if i clear out i start again the application and i should see now like um header with all the routes that we have created and the different pages yes okay that's it there's home about and users you can see that you can see the url is changing based on where we click so that's definitely the the rules are working perfect okay we have our react application running local local last three thousand uh what now we need like um an h2 instance to deploy the application install node and nginx and basically host the application on the server so i'm gonna move on the ec2 instance menu on aws create a new instance i think micro is right i'm just going to use like default configuration that you guys i'm gonna need uh access so i think i have something here well let's let's create like a new security group like react app example security group reacts up sample security group and we're gonna uh enable um ssh just from my ip we're gonna enable http traffic what is it so it's gonna be on here from anywhere because we want our website to be reachable from any ip in the world and that's it we don't need any other import [Music] so let's launch the application let's create a new keeper react up server download it and we're gonna launch the instance it will take a minute or so so i'm gonna stop the video for a second dc2 instance is ready so i'm gonna ssh into it of starting to change the permission on the key so it's gonna be like this that's gonna ssh minus i react fam ubuntu at the ip that's gonna be yes okay next thing we want to do is to update the packages so it's going to be like this and we're going to do the same thing then we we need to install nginx and node.js on the server so it can take a while to do the upgrade as well of the packages yes and now we need to install nginx and the command is just sudo apt-get install nginx it's gonna run give you yes again and the last step is to install node.js on the server i'm gonna download the search for node then we're gonna install node and that's it this is the command to install node.js on the server let's see if node is installed you should see the yeah the latest version and same thing let's say if uh nginx is installed as well and yes it's installed and it's up and running on the server perfect so our next step is to clone the ripple and see how we can serve the react application using nginx that's another game on github this is the project repo so i'm going to copy the url and clone the repo on my server i'm going to be git clone repo and next step is to cd into it and run the build script to to build the build package so we have like the versions to to be served by nginx so let me run the build script of course first i need to install all the uh node modules shouldn't take long since the it seems like a very simple application let's wait a second next step will be to run the build command to have the build package then we'll be served by nginx nginx will serve like study files so it's perfect for this job okay done so let me clear the console run the npm run build and while while the build is running the next step will be to create a new folder where we're gonna copy the build package and then we're gonna tell nginx please serve the content of the website from this folder okay so the build is is has been created if we go on ct build we will see all the static files with the index.html manifest and the js files which are under the static folder so if we do like ls static we're gonna see djs files and css as well so next step as i said is to go on the root of the server but it's really up to you how you want to do it and i'm gonna create a new folder up deploy and then i'm gonna copy all the content of the build folder into this um folder up deploy so let me copy it now we're gonna show you have the built uh folder with all the files great so next step is to tell nginx to get the files from this um from this folder and serve it so i already built the nginx config for you so i'm gonna just show you how it works this is the nginx config where we're gonna we're telling basically nginx to listen to port 80 here depends on on your use case if you want to configure for https you just need to add the forward report and also a server name with your domain name in it the important bit is the root directory where we're gonna we are basically telling nginx to serve all the files starting starting from from these directories so like home ubuntu up deploy and build and then we are telling nginx for uh each of the location that had this uri tried to uh sorry reply with the index.html file so ideally every url is gonna it's gonna reply with the index.html file who's gonna get it from the build folder from the root so the next step will be to copy this config on the server and restart it telling nginx to use it so um nginx confi files are under the etc nginx conf d and i'm going to create a new file remember to have to add it like the conf extension otherwise um nginx is not gonna pick it up on the config on the general config so we create a new file we copy the content make sure that the root directory is a valid one and then you save it next step will be i want to show you how nginx can knows about these files so it's like if we open the default value of the nginx file copy file sorry we're gonna see that there is like a directory telling nginx to grab all the files the hands with conf under the conf the directory there is like another one is the size enabled if you want to copy the size directly in this directory in this case i i created a new directory on the home ubuntu um path but it's really up to you and doesn't change anything so the next step is to check the nginx syntax the check if it's valid and the command is sudo nginx minus t and we should get an okay yes so syntax is okay test is successful next step is to tell nginx to load the new config with this sudo service nginx reload now it's reloading and yeah loading the new config and grab all the config that we have just created so if everything is correct we should be able to see the website up and running if i navigate to this ip let's see it's the ipo of the server and it's actually working so nginx is serving the files if i navigate through the roots the url is changing as expected and the real test will be now to reload the page and see if nginx sell the up yes so engine x is is bad like is receiving this path and he knows that he has to serve the index file so if we check here the network the chrome network tab we will see that nginx is replying with the html page which is perfect for when you when you are deploying when you are serving a static react application okay perfect so i show you how to deploy a react application on nginx i'm going to leave the keyedup repo with all the code and the nginx conf in description the next video i'm going to show you how to deploy your write application in a sub path so for example let's say you want to deploy your application starting from your domain slash app slash from here your application should be deployed so we're gonna deploy a react application on a sub path using again nginx thanks everyone for watching and stay tuned for the next video

Channel: Enrico Portolan

Views: 59,801

Keywords: aws, serverless, cloud

Id: tGYNYPKTyno

Length: 13min 30sec (810 seconds)

Published: Wed Jun 16 2021