Deploy react-app on EC2 instance using github actions | Pipeline | CI/CD

hi guys today we will see how we can deploy a react application on ec2 instance using github actions so this is a sample react application it was created using create react app and it contains the boilerplate code so now if we go back to our ec2 i don't have any instance running so i'll click on launch instances i can give a relevant name to my instance i want to use a 1 2 so i'll select ubuntu here t2 micro is data eligible which is fine i want to generate a new key here if you have existing one you can use that as well when i click on create the key pair is downloaded now moving ahead i have the option to create a new security group or choose an existing one so if you have existing one you can select that i am going to create a new security group and i also want to allow internet traffic so i'll select https and allow http other things look good so i can click on launch instance so this will start our instance now if we refresh here we can see all instances starting up so in the meantime we can go back to our react application click on the settings tab and on the left hand side we see this actions click on actions and then click on runners so here we have this option to create a new self-hosted runner click on that and here you will see a couple of steps mentioned so based on the os that we selected in our ec2 instance uh we have the steps so you can select the desired os and then move away with the respective steps now coming back to the ec2 instance i'll refresh it once okay so it is running now uh if we click on the connect then ssh client ah we can open a terminal i'll move into my downloads directory because that's where the key pair was downloaded so we start with changing the file permissions first this is done and now we can use this example to connect to our instance i will say yes and we are in our instance now here we can create a directory and cd into that so here we can start with uh so we already have created a directory so if you haven't created you can run this command otherwise you can directly jump to this one so copy this command go to terminal paste it so you have to paste each command one by one so i've copied this one so this is this will validate the hash and says ok now i'll extract it and that is also done moving ahead i can copy the config command so we can simply press enter and it says runner added successfully now if we see the contents of our directory we will see this svc.asu file so what we have to do now is run this file with sudo sudo svc dot sh and first we have to say install and now we have to start this so this is the now we will move back to our uh github uh if we refresh the page so we don't see anything now so go back to general and run us again so here we can see our ip mentioned here now we can go to the actions tab click on it so since react is a node.js application we will click on configure and here you will see a bunch of options so i want my build to run only when something is merged with the master branch so i can remove this pull request part line number 13 i can remove ubuntu latest with self for state i want to use node version 16 point x so i can remove the other ones so npmci will install the dependencies it will build if the build command is command is present i don't have any test cases so i can remove the test command as well click on start commit and i will commit directly to the master branch now if you go back so we can see the build has already started so we can click on details and it is setting up the job for us okay so our job has started so it might take a couple of seconds here in the meantime we can come back to terminal so what we want to do now is install nginx so we'll say sudo apt install nginx say yes and it is done now if you want to see if everything is working as expected so we can go back to our instance click the back button select our instance and here we see this public ip4 dns so click on this open address so it says this site can't be reached and that's because nginx is currently exposed to http link and this is an https link so since we haven't added any certificate we will remove the s and make it http and click enter so we can say welcome to nginx so everything is working as expected now seeing the data part we can see our green click here means everything is deployed now if you go to our terminal again do ls so we have we can see a new directory created and that is underscore work so if you cd into that work i can clear the console ls now we see real deploy and react deploy is the name of our repository so cd into that cd into it again and do ls so here we can see some familiar files and folders so here we also see the build uh build directory so we will cd into that and do ls so this is what we want to be rendered because this index.html is what is rendered whenever we our whenever we open our website so we can copy this path we'll do pwd present working directory and we'll get our path so we can simply copy this and save this for later so i have this online pad open and paste it here now coming back to our terminal so now we want to update our nginx settings so we will cd into slash edc slash nginx enter so here we can see it into sites available ls and here we see default so for now what we can do is we can remove this default file we will create a new file sudo nano default so it's a blank file so in this blank file we can copy [Music] this command so i'll paste this in the description if you go back here and paste it so here you can see this root and it expects a path so in this part we will paste whatever path we got from our pwd command i'll copy this i'll come back here and i'll replace this path with our path now let's say control x y and enter so now what we want is we want to restart nginx now if we go back and click refresh so we can see a 500 internal server error so the reason we are seeing this 500 error is the nginx is unable to access our build folder because it is placed outside etc so now we have to give uh added permissions to nginx so that it is able to reach the build folder so now if you remember our path it was this and if we open our terminal again we can cd to ohm now what we have to do is give permission so chmod plus x slash home okay so we have to use pluto here and one by one we have to copy each directory in our coming in our path so we can take reference from the path we copied and one by one we can keep on adding that and at last is the build folder so once this is done we can come back to our link click on refresh and you can see our react application has loaded that's all for now thank you

Channel: ByteBrilliance

Views: 10,825

Keywords:

Id: 0Kn6mAYIRJU

Length: 11min 13sec (673 seconds)

Published: Sun Sep 11 2022