Deploying React Application With Docker

all right what's up everyone and welcome to my channel this is the first video of my channel so before moving on to the video let me tell you what this channel is going to be all about so if you are interested and passionate about technology software development and maybe you are interested in backend cloud cloud native databases and algorithms so this is the right place for you and in the coming weeks and months we're going to be putting a lot of stuff around these topics so if you're interested in it feel free to subscribe now let's move on to the main video so in this video we're going to see how to dockerize your react application and deploy to a server okay so in this case we i have an ec2 instance running and we're going to deploy to this in c2 instance and the second thing that we actually are going to need is a docker up account so if you don't have a docker app account just go to hubterdocker.com and sign up so you actually don't need a docker hub i mean you can use any registry that you want for example aws has its own image registry so we just need a registry to put push our images too and the next thing that we'll need is uh so i'm going to create a react app very quickly so the first thing that comes to my mind is using create react app it's simple so i'll just use that with this out of the way let's jump into the video so let's go let's do a demo so we'll first make a react app let me make one directory docker with react and cd into it and i'll do npx create react app and i'm going to name it my app so this will create a react app and it will take some time probably so i'll see you when it's done okay so our react app is uh actually made so let me see it into it and let me just do yarn start to see if it's working and when i do yarn start it will start a development server and port 3000 okay so our react app is running on port 3000 so for now that is all the validation that we need so i'm going to consider this as my react app maybe you are developing something so this is your react app developer now you want to actually publish your image and maybe deploy your application how do you do that we'll use docker obviously so first we're going to make a docker file for it but let me just open vs code i have some uh what do you call uh some extensions in vs code which will actually make it easier which will actually make it prettier actually so let's uh make our docker file in the root directory sorry okay now uh when it comes to making a docker file we'll look into two approaches one approach will be not as good but the second approach will be much better and much efficient and this what why the second approach is much better we'll i'll tell you when we go along so let's try our first approach the very simple approach so we'll take a node based image you take note 10 and what we'll do is we'll set a work directory which is going to be slash app you can set anything you want so let's copy everything from my current directory to our work directory app and once i have copied this let me specify that i'm going to export port 3000 because when we do yarn start it actually runs on 3000 so we'll expose the same and and i'm going to tell docker that when i run this container you run this command to start my development server okay so that's it i mean that's all there is to it let's build this so we'll do docker build and let me tag this uh my app let's say my app one and where is the docker file it is in this current directory so i'm going to specify that with a dot and build it okay so our image is built so if i can see darker images so i can see my my app one image here 12 seconds ago and let me run this so we'll do docker run and need an interactive terminal and run it as daemon or which we are going to expose outside is also 300 so we'll give a port mapping from 3000 to 3000 and what else i'll give it a name actually so i'll give it my one underscore c for container actually let's not make it complicated uh my app container and let's what is the image name so my app one this is the image name so okay so if i do docker ps i see that my container is up and running and it's exposing port 3000 for us let's see what we find in port 3000 okay so this is a react app on port 3000 so why is this approach bad uh not bad but why is this approach less preferable that's because if you look at this image so we did docker images so if you look at this image look at the size of this image this is 1.02 gb now this is a large size why because we used a node container so we used a base node image and then we did not even do anything we did not put our personal resources on it we just put our react app which is our base react app and it consume 1.02 gb now if you are working on larger systems or maybe if you're working on small system also this is 1.02 gb for literally nothing so this poses a problem with deployment time build time so we need to make it more efficient and we can do this by using a multi-stage build okay so let's see what multi-stage build is and how it works so we come to this docker file and multi-stage build is basically as the name suggests it builds your image into parts the first part will be the builder and the builder will actually build your app and then we copy the build into another container and then deploy it so i'll use the same dockerfile only i'll take node as our builder okay so node is r builder and same thing i i've copied it so i i removed this yarn start because now what i need to do is just run yarn build so this will actually build our react app once i've built this react app now i need another container to copy it to which is our nginx and i'll use the alpine image because alpine is sort of very lightweight so let's use alpine and i'm going to set the work directory as user user share nginx and html so this is the default place where nginx container will look to share so we are using this because i mean you can specify your own location but then you need to change your nginx config so you might want to give your custom nginx config so either you give either you mount that config into your container or you copy it so let's not go there let's just make it really simple because we need to get this up and running and i've said the work directory now let's do the copy part so we'll copy from builder to this so we'll use copy command dash dash from and equal to we'll specify the builder and where in the builder is our build actually it's in slash app slash so this is our work directory slash app and where did the build go in the build folder when we do yarn build an npm runway it will actually put in build folder so this is where our code is and copy it to the current directory which specified by dot okay so we have copied our build now all we need to do is run the nginx container how do we run it we'll actually look at nginx docker itself dockerfile itself so we'll do hub.docker.com slash underscore slash nginx so basically uh in hub.com uh slash underscore and slash the name will actually specify the most of the time it's the official registry i mean official image so this is the nginx official image and i'll look at the alpine if i go down i should see this command here so that's the command that we need to run our nginx container so i'll just copy paste the command here you can just do nginx only you don't need to actually do minus djamin off but this is for development purposes but you when you run in production you can just do nginx that's it so for now we'll do this only and let's build the image so we'll do docker build and i'm going to tag it as my app and where is the docker file in the current folder sorry a typo here okay so the image is built and let's look at the image so this is our my app image which we built what the hell okay it says eight hours ago but okay so this was where my app one image which was a sort of naive approach and this is our new image so look at the size difference here guys so this is 1.02 gb and this is 21.5 mb now that is a huge difference and it will actually increase the efficiency it will actually increase the it will decrease the build time and it will decrease the deployment time and whenever possible let's you should all target to use multi-stage build but it's not really possible all the time but here it was possible so we used it let's let's run this container so doc let's run it so we'll do docker run minus itd again and port mapping so this time we're using nginx so nginx will actually render on port 80 by default http port 80 so we'll map the same to the outside doesn't matter you can map it anywhere i'm mapping it to 80 and let's name it my app only the image name is also maya okay so image is running and if we see this my app container is running it is exposing port 80 outside let's check out what we get on port 480 sorry okay so this our react app is running on port 80 so we have successfully dockerized our react app now all we need to do is deploy this image how do we deploy it we first push it to our docker up and then we pull it into our instance okay so let's push this image into docker before pushing uh you should actually do docker logging i've already logged in so it will not ask me for details i think or maybe it will i don't know okay i did not ask that means i've already logged in but you need to put your username and password there nothing much so once you have logged in you are able to push it but before pushing it let's look at the image once so this is our image my app image let's tag this image once so we need to tag it and i'll tell you why so i'll do doc attack let's look at the doc attack command it will take a source image and it will take a target image so source image will be our my app image and the target image will be the username which is my username if what whatever docker web account you have you will have a username use that slash your registry name uh so your repository name i'm sorry so the repository name you can create anything i'll use my app only and if you don't have that repository uh talker will create that repository so you don't have to worry about that i've successfully tagged my image so if i do docker images again i can see the stacked image let's just push it now so all we need to do is do docker push and then the name of the image which is sha.sh slash maya so by default it will tag it with latest and it will push it to our repository okay so the image is pushed to the repository we'll check out here we'll do a quick refresh and we should see the image pop up here so this is our image this is public by default so now all we have to do is actually pull this image here and run it into our ec2 instance so let's open the ec2 instance here we have our ec2 instance ready and docker is already installed in the system so all i need to do is docker pull and name of the image which is your username slash the image name and it will pull that image uh i did not need to do docker login in this because it's in public image by default as i said so anyone can pull the public image without logging if i made this private then you might need to log in to check if you have the access rights okay so the image is pulled now let's run this image docker run same command and port mapping to 8280 and name it my app and the image name will be the image that we pulled which is akshay.sh myapp cool image is running let's check docker ps the image is up and exposing port id let's check the public ip of this server so i'll do what is this ifconfig.me maybe yeah so i have this public ip here i'll copy it and paste it here and we have our react app deployed into our ec2 instance so this is all there is this is all there is to it and this is how easy it is and even you can do it so if you are doing along that's great and if you did not then maybe try and do it it's pretty simple and it's pretty efficient that's all for this video now if you like this video if you saw it till the end that means you actually liked it you found it useful and if you found this video useful i'm very sure you're going to find uh the coming videos very useful so hit that subscribe button and i'll be with you shortly in the next video

Channel: Akshay Gupta

Views: 5,462

Keywords: react, docker, nginx, containers, containerization, deploying react app, dockerize react app, react with docker, docker with nginx, reactjs, dockerhub, software development, software developer, front-end development, full-stack development, full stack development

Id: lsrbnlZnQpM

Length: 15min 54sec (954 seconds)

Published: Mon Feb 01 2021