Deploy React App to AWS EC2 using GitHub Actions

hello everyone and welcome to integration ninjas in today's tutorial we are going to cover the complete process of deploying a react app on AWS ec2 instance using Docker and GitHub actions deploying applications to the cloud can be a daunting task but with the right tools and workflows it becomes a seamless process we will be leveraging the power of doer to containerize our react app making it portable and easy to manage additionally we will automate the deployment pipeline using GitHub actions ensuring efficiency and consistency in our deployment process here's a quick things like what we are going to do first we will dockerize our react application then we will push the docker image to dockerhub and then we'll set up the AWS ec2 instance and then we will write a workflow file so same thing we are going to do here is like first of all we will have our workflow file and that will be triggered on a particular action and once we see like this particular action can be run on the first we will have two jobs here in this workflow we'll have build job and then we'll have deploy job in build job we will build the docker image of our react application and then we will push that Docker image to Docker Hub and once the job will be completed then that particular event will be triggered after that build job will be triggered and then we will create a runner on aws2 instance there we will run that uh Docker we will pull the docker image from the docker Hub and then we will run that as a container so let's do this how we are going to do let's see first of all I would like to set up few things here I would like like to create a E2 instance so let's see how you you can simply go to the E2 dasboard and you click on launch instances and suppose I name it as react JS hyph app do ec2 instance as I will select to one to image and I'm using this free tier eligible one and that's it I'm using the x64 architecture type Linux you can select the other one also armm one but I'm going to use this one and rest of the things I don't want to change anything here and let's go and let's go and launch the instance that's it okay we need to generate a key pair okay so you can create a key pair if you want I will be creating one key pair uh suppose test one test key and we'll select the key pair as RSA and PM okay you can configure this if you want to run this in your local system you want to connect this okay so we can see the successfully launched the instance as this one we have the instance ID so first thing like you can set up that uh key pair and configure it from your local system but here like I'm just going to connect from this particular like browser only so you can simply connect here and you can see the console will be open in your browser so here uh first thing I would like to set up Docker here because we don't have Docker here so I have already written down the steps I will share in the chat first of all we need to update the required dependencies and tools that is needed so we are going to use AP update and once that is completed we are going to install the docker Docker package okay so it's very good in progress once that is completed we will start the docker with the system CTL command and once this is completed we will check if the with the hello world run command if it is working okay we see this is coming like hello Docker that that your installation appears to working properly and sometimes we need to give such commands to see because if you see Docker PS we see like uh dial Unix this Docker do socket is not accessible so we just like to give permission to this file and once this is completed we will just see with the docker PS we can see if it is working and we'll just enable the docker in our system and then we can see the version so all those things you can just check here all right I have written down all those commands here so this is completed now I have a simple react application we can see like how it will look like I have this in my local I'm going to use this particular Branch deploy to ec2 and here we can access our terminal and we can see npm start how it looks like okay welcome to integration NES this will look like very simple react application it can be anything but I will just keep things simple to understand things better so here now what we can do is we can write a Docker file here we have set up the easy to now let's do some coding stuff let's create a Docker file here we have now what we are going to do is we are sorry why it's not typing yeah yeah we are going to select a base image nodejs base image I am currently on the Node 18 so I will prefer using node Alpine 3.18 image as a build all right we can just comment like what we are doing is uh Step One is build react T and in the second we will serve this uh image as a NG INX server so that is like used to like serve the web content of any application so we are going to use nnx as well inside our Docker container okay so we will just Define what will be the work directory let's give it name as/ app and what we can do we will copy The Source directory the source file package.json to the current directory and then we are going to run npm install it's pretty simple and once this is completed we are going to copy everything in from the source directory to the destination directory from our current directory to the/ app directory okay once that is completed we are going to run npm run build command so we are going to build our react application here in the next step what we are going to do is we will serve the whatever the public folder will be generated the uh new folder will be generated we are going to serve that okay so with ngx okay so we we can see like once we do npm install what we will see here we will have a a folder named as okay this is having some issues here I guess yeah okay we have done npm running install and then we will run npm run build then we can see the build package here so we are going to like copy this build package inside our the current directory okay so what we are going to do in the this one is we are going to use ngx image okay so NJ INX I'm going to use uh we can see like what is the available versions here so I we can use 1.23 Alpine so if you want to see like these the Alpine images you can go to the browser and you can just search like uh node Docker images you can just find it out here like all the available images here like I'm using using one of them is from this particular website only so I just using this okay so once this is completed we are going to Define our work directory inside ngx so inside NG inex we will always have we always Ser the content from the user and then sh and then ngx SL HTML so this is the default Work Direct for ngx and here once we switch to this directory I'm going to remove everything here RM RFI star and after that what we will do is like we are going to copy the source the we are going to copy from the build like this particular directory we will have this build build directory we are going to copy the content in this nginx one so let's do this from the build and in the build we have slash app SLB build directory and we are going to copy everything in this destination directory inside our user SL share nnx HML all right and then we are going to expose the port 0 because nnx serves all the the content on the at Port all right and we are going to entry point Define as ngx I G and we'll set the demon off because we'll run this as a single container here single application M on off all right we are done with this now we are going to write our GitHub workflow file so we can test this as well here in our local as well but let's write the workflow file here inside do G we have a workflow folder and inside workflow folder we will have a cicd do yml so there we are going to write our workflow file we will name it as cicd and and when it should trigger on the on push events on push branches of current branches deploy to ec2 okay all right okay so this is the GitHub action one and let's just give some spaces here we have defined this particular uh when we will commit everything to this Branch uh event will trigger and will trigger our jobs here so we are going to define the jobs in our workflow file which is first is build job and build will be running on the ubu latest Runner will be ubu latest provided by the Kum and now what we are going to do is we are going to write steps in our job that uh first of all we are going to write uh check out the source code all right and we are for that we are going to use the action which is provided by GitHub which is actions checkout version three okay and after that once the process is completed we are going to log to dockerhub log to dockerhub for that we are going to use a proper command Docker login hyph U and uh we have I'm not going to write my credentials here so we'll just write down the steps here I will store these details in the getup secret variables so I would refer you to use the same thing okay so once you go to the GitHub Direct tree inside your GitHub application go to the settings tab and you click on the security and variables you click on actions once you click on access you have to set the docker username and Docker password here so you can just click on new repository secret and you can just type down any name and the secret you can just create Secrets like this it's very easy so I'm going to use this one here and inside my code it is dollar login hyphen U and secrets. doer username all right and once this is completed I okay I need to set the passwords as well here I have set the variable as secrets. doll Docker password all right and once this is completed I'm am going to build the docker image build Docker image so for that I'm going to okay this is not uses this is a command so we are going to use the Run command run keyword okay so once this is completed we are going to execute one more Comm command which is Docker build hyon T and integration Nas SL reactjs hyph app so this will be the repository inside my dockerhub container so let's log into the dockerhub here I have already this repository but you can create your own repository like just simply click on create repository and give a repository name and select public private and you can create this okay so this is one thing and so I'm using this already one so I'm going to use this and here if you see I'm going to run this dogger build hyphen T I'm going to create the image with this name and from this current directory okay so once this image is created I am I'm going to publish image to dockerhub once this is done I'm going to execute another command which is doer push and let's copy this reactjs app I'm going to define a tag name for my image which is latest so you can create a any tag or you can use GitHub Dosha as a commit ID to like a differentiate which is the latest one based on a particular commit I'm going to use latest as of now only so once this is completed the build job I'm going to run another job which is deploy job so when this job should trigger for the that I need build job to be executed first all right so once this build job will be completed then only this deploy job will be processed so when this should be executed this will be executed on a runner I will just create AWS ec2 on this this we are going to create a selfhosted runner on AWS ec2 instance how we are going to create we have to go to the actions we have to click on Runners and we'll create a new selfhosted Runner okay then we have uban 2 system so this is Linux server so we will go to our aws2 instance and in instance we are going to create a new directory we just follow this steps here and we'll download this binary file provided by the GitHub action so once this is completed we are going to extract this Zar file and we are going to execute this now before that we need to create the runner and start the configuration so once this is this is unzipped we are going to configure our GitHub self hosted Runner enter the name of Runner group I will just set it as default enter the name of Runner what I was giving is aws2 okay I will give the same thing enter any additional level no I want [Music] same Runner successfully added and okay the work folder will be doore work that's all right now what we are going to do is we are going to execute this run command all right so we can see the current version is available and once we click on this actions tab and the runners we can see our runner is green symbol status is available idle so it's active so we can use this Runner so we are good here now what we are going to do we have access to our AWS E2 instance with this job we are going to pull the image uh pull image from dockerhub we are going to run another command here we are going to use doer pull and then this image name with the latest tag okay this is completed once this is completed what we are going to do is we are going to delete the old container if it exist for the further process so we are going to run another command to delete the old container so we are going to use Docker RM hyph F the force delete uh let's give the container name as reactor container all right and letter like this is a not MRI command like you can remove it uh by yourself but it's better practice to remove the existing container and create a new one and now we are going to run the docker container all right we are going to run another command here which is Docker run we are start starting the docker container we are going to start the docker container with the docker run and hyph d and hyphen p and we are exposing the port 3,000 and the 0 the because we have exposed the 0 Port from the nginx and we want the the reactor we will be invoking on the 3,000 Port so okay so we are going to like expose the 3,000 port and the docker we have exposed the 3,000 so will our react application will run on this 3,000 Port okay or and nnx will serve on this 80 Port so we are going to use this okay and let's name our container and name we have and then we have to give the image name here all right I don't think letest is needed we have just image is fine because we already pulled the image yeah that's it I think we are good here so let's see what we have to commit here we have two files let's commit them and we'll see if there is any issue deploy to ec2 all right let's see if any action is triggered or not no there is no action has been triggered as of now we can see deploy to ec2 we have do GitHub and workflow okay let's see if our Branch name is correct or not yes it is correct H there is might be some issue actually there is no do yeah Docker file is there cicd yml is there then there should be some issue here you know workflow file why this is not P triggered let's see react GS application and go to the doc deploy to E2 Branch okay we have a silly mistake here it should be do GitHub and workflows here so we can do one thing we yeah we can rename this it should be the GitHub and then workflow so we can see this we need to commit this as well so this is just a type of mistake so we are going to just push this changes and then see if the action is getting trigger sometimes say typo mistakes can a huge blender so yeah this is triggered here we can see the two jobs here build and the deploy let's see what is happening around here so the login is completed on the docker Hub with all secret credentials and the docker image build is in progress okay once that is completed the image will be published to the docker [Music] Hub let's see and one thing we need to do is we have to go to the security group here and we need to invoke we need to addit the inbound rules and we need to add Rule and allow the custom TCP we need to set custom TCP and the allow this IP from the port 3,000 okay save rules this is done okay so the build job is completed let's see the deploy job okay so this is also completed so our both jobs has been completed so build and deploy so let's see if our build is success or not so see you can see the job deploy completed with the result successed me we can go to the E2 instance and the running instance and let's see if our code is working or not we can go to the this public ipv address and we will open this 3,000 port and yeah we can see our application is up on up and running on the AWS ec2 instance this is very easy process you can set up your own workflow like for a react application and you can deploy easily on AWS ec2 instance this was very simple process if you like it please share it amongst your friends subscribe my video and keep watching this have a great Daye thank you everyone have a good day

Channel: Integration Ninjas

Views: 4,164

Keywords: cloud computing, cicd tutorials, azure, aws, google cloud, jenkins cicd, deploy react app, how to deploy react app, macbook pro m3, m3 macbook pro setup 2024, react app development, front end with reactjs, how to host website for free on aws, how to host website on aws ec2, java, nodejs, python, asp dot net, golang, spring boot, micro services, aws ecs, azure app service, kubernetes, clusters, docker hub, aws ecr, aws ecs fargate, azure container registry, coding in macbook pro m3

Id: PH9gvPW5B5I

Length: 28min 39sec (1719 seconds)

Published: Sun Dec 31 2023