Deploy a React Web Application to AWS

hey everyone welcome back today we're going to be deploying a react application to aws and we're going to package this app using docker so this is going to be very similar to my video for google cloud but i wanted to have one for each major cloud provider so to get started i'm going to open up my terminal i will clean things up i'll activate my node version manager which is just allowing me to use npm and i will use npx create react app and i will call it react docker aws all right so it looked like it finished let's go ahead and change into that directory and we will run the app just to see what it looks like we should just be getting the basic react application and you can see that there so i'm going to go ahead and stop this and we'll open up vs code and take a look at what files were generated for us so i'm going to clean some stuff up and i'm going to remove a lot of these packages that we're not going to be using so all the testing libraries and the web vitals i can go ahead and pull out so i'm going to say in my terminal uninstall excuse me npm uninstall and just paste those in one by one so those will get removed and once they do we can go clean up what's in the source folder so now looking back here you can see that my dependencies have been updated come into source i'll delete app.css index.css will come out as well as these three files so now all we have is index.js and app.js i'm going to go ahead and remove some of these imports in here to make sure that our application works properly because we just removed some of these libraries and files and while i'm here i'm also going to update my single quotes to double quotes which is just personal preference and in app i'm actually going to go ahead and just delete this whole thing we will say const app is an arrow function that will return a div and an h1 with hello world so now if i close this up and i rerun npm start we should see our updated application here in the browser and it just says hello world so i'll bring that down the last change i'll make i'll just say hello world from aws you can see here in the source control that it initialized an empty git repository i'm going to go ahead and remove that for now so i'll say rm-rf.get and if i come in here and refresh you should see that there is no get repository that's been initialized okay so in the structure of our files we need to add our nginx configuration and a docker file so i'm going to create a folder called conf and within that folder i'll create another folder called conf.d and within that folder i'm going to create a file called default.com so this will be our nginx configuration now we're going to define our server which will be listening on port 80. our location which is just going to be forward slash we'll have a root of user share nginx html the index of that will be located at index.html or index.htm and finally the try underscore files will be the uri uri forward slash and forward slash index.html for error pages we will have a 500 502 503 504 and a forward slash 50x.html location should be equal to forward slash 50x.html and it should point to root user share nginx html and that is all we need there all right so we're ready to add our docker file now that we have our nginx configuration done so we'll create a new file and we'll just call it docker file and this will be a multi-stage build so let's go ahead and define this as our builder and we'll start by pulling the official base image so we will say from node we're going to use version 16.5.0-alpine the dash alpine just means a lightweight version and we will tag this as builder we'll set a working directory so we will say workdeer user source app we will add user source app node modules bin to our path so i'll do that by setting an environment variable called path and it will be user source app node modules if i can type today dot bin and we will map that to the path here we'll be installing and caching our app dependencies so we'll copy over our package.json and notice here i'm saying copy the name of the file which is here in my local repository and then a dot this dot denotes that we're in the current path so this work directory that we set up here we're essentially saying copy package.json to the container inside of user source app and it will be located at package.json we'll do the same here for package log and finally we'll run npm ci after that's done we'll create our build so we'll copy over the rest of the files and we will run npm run build to build those static files and now we can move on to the final part of our multi-stage build so again we need a base image here i'm going to use an official nginx image this time so here's the difference between the google cloud platform that i'm doing here with aws i'm just going to use the official nginx image and i'm going to use alpine as well still want it to be lightweight now we're going to update our nginx configuration because if you remember we just wrote one up here so what we'll do is we'll run rm-rf so we'll remove the configuration et cetera nginx comp.d and then we will copy our comp folder to etc nginx so we're essentially just replacing their default configuration with the one that we wrote up here now we need to copy over all of our static files that were generated in this first part of our multi-stage build and we're going to copy that over to the user share nginx html folder we'll expose a port so we'll expose port 80 and finally we will run nginx alright that looks pretty good let's go ahead and test this out by building it from our terminal so we can say docker build dash t the dash t means tag and we're going to tag this as react docker aws latest and i'm putting a dot again to denote that the docker file is here in my local directory all right so it looks like that's done building let's go ahead and clean that up and we'll say docker run dash p for our ports we want this to be on port 3000 and we're mapping it from port 80 and we will say the name of it is what we just tagged it so react docker aws latest and it should be running so if we go to localhost port 3000 we can see that our hello world from aws is running and we can see the logs coming out through our terminal so i've created a free aws account here and i'm logged into the aws management console so before we go any further i need to install the aws cli onto my machine so i can say aws cli v2 we'll be installing it looking at their official documentation and they give you instructions for docker linux mac and windows i'm on mac so i'll just come down here download the package which you can see installed right there if i open it up it will just take me through the steps to get it installed on my machine okay now that it's installed i'm going to go ahead and command q my terminal and i'll reopen it to ensure that it's available if i type in aws it will print out some command help options so this is how i know that it's installed before configuring it i need to get some credentials so i'll come back into my aws management console i will search for i am i need to create a new im user my username will be just my name and i want to have programmatic access so essentially i want to enable this one so that i can get an access key id and a secret access key so that i can use the aws cli for permissions i need to add them to a group and i don't have any groups yet so i can create one don't need any tags and i'm good to create my user so once i do so it gives you a csv where you can download your access key id and your secret access key i won't be showing you that here just for security purposes but i've downloaded it and i am ready to set that up so if i go into my terminal again i'll clean this up what i want to type is aws configure so now it's going to prompt me for these access keys that i just generated for the region name i'm planning on being in the virginia region which i believe is u.s east one so i'll type that in there and for my default output format i will just put json so i'm all good i'm all set up and ready to go in order for us to deploy an application on aws we need somewhere that houses our docker images that we're building locally so for that i'm going to be using ecr otherwise known as elastic container registry so you can just search for ecr up here i'll click on the elastic container registry and we want to get started by creating a new repository it'll be private and i will call it react docker aws and the rest of those settings are fine so i created my new repository if i click on it here i can view the push commands and what i'll do is i'll just copy this first one here that allows us to authenticate our docker client to the registry so i've copied that i'm going to go over into vs code and we'll create a little script file that runs this for us automatically so that we don't have to type this out every time we want to push a new image so i'll call this deploy.sh we will echo out that we are performing pre-build steps and more specifically we are authenticating with aws ecr and now i can just post paste in the command i just copied so here what it's doing is telling aws through our cli that we want to use the ecr service we want to get our login password we are in region us east one and we're using the docker login our username is aws and our password is from the account and that's specific to you so if you have a different account you won't see this number this is related to my account so you guys won't be able to push what we want to do is our build steps so we want to build the image here locally and we'll say docker build our dash t and instead of saying react docker aws latest we just want to name it the same thing as our registry so i'll paste that there and the name is react docker aws and i will tag it as the latest finally we can do our post build steps so we'll say docker push and like i just mentioned above it makes it really nice and easy so we can just copy this excluding the period and that should push it up to it so i'll say bash deploy and it will run this for us we can see that it prints out our steps that we echoed and it should do exactly what we told it to do after that's done we can come back in here and we can click into this repo and you'll see that we do have an image that we just pushed and it's tagged as the latest we'll need to go into the ec2 service and we'll need to create a load balancer so a load balancer is going to direct to direct traffic from the internet into our container applications so we'll create a new load balancer and we'll use application load balancer because it's going to be over http so i'll name it react alb it's going to be internet facing we will use this load balancer port 80. we'll put it in our default ppc for us east 1a 1b and 1c we don't need to configure any security settings right now for security groups we'll create a new one so i'll call this react docker aws sg and port 80 is fine if you wanted to have ssh access into this ec2 instance you would just add ssh over port 22 but we don't need that so i will configure routing for target groups we will just say that we want to name it react docker aws tg it's going to be an instance type we're still going to use http on port 80 and the default health check is fine currently there aren't any targets that we can register so we'll skip to the review and we will create our load balancer okay so now that we have our load balancer created let's go into the security group that we just associated with it and make some changes there so we've got this react docker aws sg we can look at the inbound and outbound rules so for inbound rules right now we're allowing any internet access over port range 80 to access this security group we want to edit these inbound rules and we also want to add a custom rule we can just say all traffic and it's going to come from the security group that we just created so this react docker aws sg we want to allow this security group access to itself we'll save that for outbound rules let's take a quick look at those and it says all traffic which is fine okay for the next steps we need to go into ecs which is amazon's elastic container service so up here i'm going to search ecs and we'll start by creating a task definition so for this task definition we'll need to be referencing the image that we pushed to aws ecr so i'm going to open up another tab and go there just so that i have access to it and it's going to be this uri right here so i'll just copy that okay so back in ecs i'm going to create a new task definition it'll be an ec2 type for the task role it's going to be none for the name i'll just call this react docker td for task definition i'll add a new container the container name we can just call this client i'll paste our image in there and notice that it didn't provide the tag so i need to add that there so i'll grab the latest one memory limits i'll do a soft limit of 300 for host port we'll do host port 0 map to container port 80 since we expose port 80. you don't need any commands or environment variables but if you did you could add them there and lastly for logging we'll come down here and auto configure cloudwatch logs so we'll add that our container definition is there and we should be good to create this task definition the task definition was created successfully so now we need to have a cluster that will house where this service is going to run so we'll create a new cluster it'll be ec2 linux plus networking our cluster name we'll just call this react cluster for our instance type i don't want to charge anything here so i'm going to use a very small instance type which is going to be a t2 we'll do the t2 micro i only want to run one container excuse me i only want one ec2 instance running that has all of our containers on it so here i'm just going to put one if you wanted to ssh into it you need to add a new key pair here and you could associate it there but i'm not going to as for networking we want to use our default vpc and we'll select our subnets so we had one c we used one a and one b for security group i want to use this react docker aws sg for the i am roll we'll leave it at instance roll and all of that looks good so let's go to create and that has been created so if we view our cluster we now have the ability to create a service which will run one of our task definitions and we only have one right now so it should be very straightforward so i'll go to create this is an ec2 launch type we're using our react docker td excuse me the react td this is the one i just created will be in our react cluster i'm going to name this react dash sv for service it's going to be a replica i only want to run one container but if you wanted multiple containers you could put 2 for whatever number you want here rolling update is fine availability zone balance spread is fine we can move on to the next step here i will grab our application load balancer it's going to use the ecs service role and we'll use the react alb that we created and we'll add this container name and port to our load balancer here you can see that it wants us to create a new target group but what we'll do is actually select the one that we already created and just make sure that it's on the production listener port 80. health check looks good we can go to the next step we don't want to adjust anything right now but you could do some auto scaling and i'll create that service so it's been created we can view the service and we can check out the events tab to figure out what's going on right now we don't see any results but as things start getting spun up we should start to see some logs in here so you can see that we've started one task meaning we've started one container and if you go to the deployments you can also see our desired count is one pending is zero running is zero so as we start to refresh this it should deploy a container for us so i want to pause here and actually note that i ran into some issues when deploying this because i built it on a m1 macbook so docker has some issues that they're still working out on m1 silicon max so what i had to do was go back into here i had to update my deploy script to add the platform linux amd64 because we're actually going to be running this on an x86 based machine and then i also had to update my docker file and change my node version to 14.15.1 because the latest one that i was using 16.5.0 is currently not supported so i had to make a few changes there and re-push this before things worked but if you were using an intel based mac or an intel based computer it should work just fine with the latest versions and you won't have to do any workarounds so i redeployed that i pushed it up and if i go into my ec2 where my load balancer is i should be able to see that my load balancer is active and i can grab my dns name which is right here and if i paste this in it takes me to my react app which is hello world from aws so a couple things that we want to do to clean things up we want to make sure that anytime we run that deploy script it actually updates the service as well so i'm going to make a change there so here in our deploy script i'm going to add a new command and this one will be updating our aws ecs service and what we'll say is aws ecs update dash service our cluster was called react dash cluster our service was called react sv and we want to force a new deployment so let's say i made a change i come into my source maybe i said hello world from aws v1 save that i want to redeploy it so i can just say here bash deploy and once this completes and everything gets deployed that change will be live here on my website as you can see the app updated as expected finally we can come into aws and remove and bring down all of our services so that we don't get charged for anything that we're not actually using i hope this tutorial was helpful next i'm going to be having one on azure so that'll cover all three major cloud providers and i hope to see you guys there

Channel: Dylan Gonzales

Views: 1,155

Keywords: react, web dev, web development, aws, aws ecs, deploy react to ecs, dockerize react, docker, docker react aws, docker react nginx, docker react nginx aws, deploy to aws, aws ecr, aws ec2, aws alb

Id: 7yXmn14xxCE

Length: 20min 52sec (1252 seconds)

Published: Tue Aug 17 2021