Dockerize a React app and publish it in AWS Lightsail Instance

[Music] hey everyone in this video i'm going to show you how to create a new react app dockerize that react app and deploy the frontend react app in aws cloud [Music] as you can see these are commands used to create a new react app via command line for this purpose you need to have a node.js version installed in your machine i'm opening a new terminal in vs code [Music] now let's create a new project directory and type node version to see the node.js version [Music] and you can see i'm using version 14.16.1 and it doesn't matter if you are using a different version [Music] on typing the first command you can see the node modules are getting installed this may take a while let's wait until it completes [Music] now a git repository for this react app is initialized and this is where the source code resides [Music] after a couple of minutes our react app is ready to be launched let's launch that by typing the command npm start in the terminal here is our react app running in the browser in the local host port 3000 [Music] [Applause] this concludes our first section of creating and running a react app and let's proceed to the next section now i'm going to stop this running application by pressing ctrl c yes and our application is stopped in the existing react app source files i have added two files one is docker compose yaml file and the second one is docker file as you can see react app colon latest is our docker image name and the container name is my react app source and destination ports of our docker container is port 80 which is production environment and in the docker file we're running npm install and build commands engine x is the server we're going to use to run this node application and here we're exposing port 80 and 3001 so that our react app is accessible in docker container via these two ports now i'm gonna launch docker desktop in my machine [Music] it may take a while for docker to spawn up and ready yes here it is docker is getting started and currently there are no containers right now let's jump into the command line now i'm typing docker hyphen compose up command to run the docker compose yama file the docker starts to pull the alpine base image and runs the npm install and build commands in the docker file [Applause] [Music] and finally a docker container running our react node app with engine x server running inside it will be created let's wait for a few minutes oops we're getting an error message the error information tells us we're missing some engine x configuration files inside the source directory to clear this error all we have to do is copy the engine x configuration files and paste it in the source directory now you can see the engine x configuration file which is listening on port 80. [Music] let's get back to running docker compose up command again for the second time it might take a little longer let's sit back and relax for a while finally our docker container is created running our react application let's check it in browser from docker desktop and here it is our dockerized react app this concludes our docker section running react app in the next section we're going to see the aws light sail console part this is amazon light sail console click on create container service to create a light sail container instance here i'm choosing the sydney region ap south east 2 and nano 7 instance for our container [Applause] [Music] and i'm gonna rename the container service one to sample react app [Music] then i'm gonna click set up deployment and choose hello world as example deployment and leave the container name as hello world itself and leave the default settings of port 80 http and open finally review the settings from top to bottom one by one [Music] and click create container service as you can see the status is pending let's wait for a while to see the deployment in action [Music] and it's currently provisioning service four out of seven and still loading to create the resources now status is showing creating deployment 5 out of 7 at this moment creation is in progress after a while status changes to activating deployment 7 out of 7 only a few more seconds to see our hello world light sale container app in the end the status message changes to running let's see if it's really done in our light sail console [Music] yep the deployment status is active let's click the public domain url now [Music] and here's our hello world light sale container deployed showing the success message in my local windows machine i have aws cli version 2 and light sail control plug-in installed in the same path in the next section i'm going to show you how to push the react latest docker image to aws light sail instance to push container images from your local machine to container service copy this aws cell i command in clipboard now you need to change this command as per your docker image name i will change this as per my local docker image name and aws container service name region as ap south east 2 service name as sample react app label giving it as react app [Music] and for image referring docker desktop it is react app colon latest [Music] next comes the iam section in aws search and click iam go into the iam click on my security credentials [Music] here you can find access keys to create new one you have to press create new access key button let's do that [Music] now the access key id and secret has been created copy both of them to the clipboard and paste it somewhere in notepad or press download key file you will see a short csv file downloaded containing both information [Music] now go to program files amazon aws cli version 2 and check whether you have light sail control plugin exe file or copy and paste it individually here open command prompt click run as administrator [Music] and get into the directory path of aws cli and light sail control plugin via cd commands at first copy and paste the aws configured command in command prompt hit enter next copy and paste the access key id from notepad then copy and paste the secret access key from clipboard [Applause] [Music] region as ap southeast 2 [Music] and for default output format you can type json or none as per your wish now let's copy and paste the aws light sail push command oops there is an error [Music] it seems our local machine docker desktop is not running let's spawn docker desktop and run that as an administrator [Music] our docker desktop is starting this might take few minutes depending on your machine speed yes now it's ready now we're going to push this react app colon latest docker image to aws light sail instance in cloud let's paste the command and hit enter as you can see it's immediately pushed to the cloud and you can clearly see the console message refer to this image as sample react app 4 in deployments now heading back to aws light sail console here you can see the first version of hello world container deployed [Music] let's modify and redeploy the recently pushed container image on choose stored image you can find the recent sample react app for image click that you can see a green info icon with a message saving this deployment will create a new deployment version the sample react app 4 image is now ready to deploy as a new version [Music] finally hit save and deploy [Music] the status immediately changes to deploying to know what happens behind the scenes see below status deploying message creating networking infrastructure 2 seven provision service four slash seven creating deployment five slash seven activating deployment 7-7 the status changed to running mode still some final moments before deploying and finally you can see version 2 status as active [Music] now let's check with public domain url you can see version 1 and on clicking reload shows the new react app version 2 deployed successfully this completes our tutorial thanks for watching stay tuned to watch more

Channel: blue basket labs

Views: 1,678

Keywords:

Id: eSusA2Ha7mU

Length: 12min 31sec (751 seconds)

Published: Fri Jul 01 2022