Deploy Node.js app with Digital Ocean (Free SSL certificate with Certbot)

hey guys welcome back to another video in today's video we're gonna do a little change of pace and actually talk about how you can deploy your web applications after they're already built so there's a lot of different companies that you can use to to do this but we're gonna use digitalocean in this case because it's really easy to setup and it's really straightforward through them digitalocean is just a web hosting provider or a cloud computing service that is basically to create virtual machines for you that you can use to deploy your web applications and provide that your website's to people on the web um they have a nice little promotional credit going on right now so you get $50 free for the first 30 days and so you can basically test out this tool and see if it's right for you free of charge so I'm gonna show you to do show you how to do in this video is create a project through digitalocean set up a virtual machine with them that we're gonna use to serve our website and then set up a domain name so we're gonna go buy a domain name and then we're gonna set it up and have it hosted through digitalocean all managed through them and then at the end we're gonna create a SSL certificate that we can use with cert bot that is gonna be completely free we're not gonna have to pay anything for it you know some websites will will charge you like 10 20 dollars for this but we can do it completely free with cert bot which is this command line tool provided to us by let's encrypt so at the end we're gonna have is we're gonna have a simple react web application that you can use it uses am charts and it's just a little simple charting thing with bar graphs and we're gonna link it with our domain name the one that I did was anime sales this one that I bought you can use whichever one you want obviously and then you're going to see that we have this free SSL certificate set up for our web application so all of our users know that it's secure ok so that's what we're gonna get into today it should be quick and straightforward so why don't we go ahead and get started ok so first thing you're gonna need to do obviously is create an account so go ahead and do that and after you're done what we're going to do is we're going to sign-in and after we're signed in you're gonna see that we're met with this projects home page so the first thing we're gonna do these are mine so just ignore we're gonna do a new project I'll call 9 the tube tutorial you can call yours whatever you want you don't have to fill out the description you can say just trying it out we'll create our project you don't need to move any resourcing in here so we'll just skip for now next thing we're gonna do is we're gonna create a droplet for our project and this is gonna be the virtual machine so why don't we go ahead and click that we're gonna do a boon - you can just leave that default 18.04 this is where you check whatever type of specs you want for your virtual machine now I did if this is your first time using digitalocean you should be fine with this $5 a month I didn't notice that after I created my second droplet I had to switch the ten in order to run this application because it kept lagging it wasn't doing what I needed it to it wasn't performing as well so what we're gonna do is ten but again if this is your first time using digitalocean just do five it should be completely fine and if it's not we can always upgrade it later you can do that really easy through there options you can just Google how to do that okay so we're gonna do is we're gonna leave all of this but default leave that by default scroll on to authentication we're gonna do new SSH key and what this is gonna do is allow us to give us on a past a pass print basically for our application and it tells you how to do this right here it's just some credentials to help us identify with the server that we are who we say we are so we're gonna do is we're going to do SSH key Jen so we're just gonna do a YouTube key it'll do no password yeah no password and then we should have it so if you look in your directory you should see that you have these keys now right so you have the regular SSH key and the dot Pub alright and what we're gonna do is we're gonna open up our YouTube key on the dot pub one so I'm just gonna copy and paste this in there delete all this copy and paste we should just click Add key we should be good to go / faked now the next thing we do is we're gonna scroll down everything's looking good you can just have the name of the computer that's fine we're gonna add it there you don't need to enable backups so let's create our droplet and this will create our virtual computer that we can use to actually host our web app and now that our droplet is done creating why don't we go ahead and copy the IP address because we're gonna SSH into here and we're going to start setting everything up so I'm gonna go back to where I copied my key we're gonna do a simple command to login to our server it's just gonna be SSH - I the relative path to your key so mine is right here YouTube - key they're gonna do root at and then you're gonna paste in that IP address that you copied so you can just click yes all right and now you can see that we ssh successfully into our digital ocean virtual machine so we're good to go why don't we clear do LS nothing's in here so let's go ahead and get NPM and node installed so that we can actually run our app so we're going to do sudo apt update let all that finish okay now that that's done we're going to do sudo apt install node J s we'll just click yes next we're going to do sudo apt install NPM just click yes now that that still must check our versions will do no js' - B that's looking great and then we're gonna do NPM - V okay so you might see this you might not if you have version 6 you can completely ignore this step but if you have version 3 that we need to fix that because Bash is storing the incorrect version of NPM due to the the shell catch so why don't we get rid of that real quick because we want version 6 so going to be with sudo NPM install - JEE and p.m. this will install it globally so make sure you run this or this won't work all right perfect so now we're going to do NPM - V again you can see that it's still the incorrect version so to fix that we're going to do hash - D NPM this will d hash it from the cache and now we'll do NPM - B and you can see we have the correct version all right perfect so it looks like we're all set up with NPM EndNote why don't we do get status okay so get not a git repository perfect I just want to see if it was installed or not I'm pretty it is by default so we're good on that so we're going to do they're going to do make directory or actually what we're gonna do we don't even need to make a directory we're gonna clone our project that I have set up for us so this link will be in the dirt description it's just gonna be the base repository that we work off to get our app up and running so you guys see something on the screen so I'm just gonna copy this to my clipboard we're gonna do git clone and then paste that in there everything is looking good let's go into our digital ocean tutorial and now we just need to do NPM install and all of the folders that we have so let's do NPM install from the root and then when that's done let's going to the server we'll do NPM install from the server directory because they're all basically their own NPM sub projects I guess you could say our sub directories alright perfect so let's do you see me we'll go into our client directory so you client and then we'll do NPM install okay so next thing we're gonna do before we do our SSL certificate is we're gonna go set up our domain name so why don't we do names our name silo comm that's where I buy buy domain names you can obviously do it however you want but I'm just gonna show you how to do it through them so I'm gonna put in my credentials and login alright so after you login basically we're just gonna click this register tab to buy a domain name I'm gonna show you guys how to do that real quick we'll go through it why don't we look for zookeeper tycoon we'll look for that domain name you can see that they have it a little expensive nine dollars you can again use whichever one you want whatever name hosting provider or name registrar domain register okay so we're going to click register check domains all of these you can basically leave their defaults auto-runner yes that's fine privacy setting due who is privacy that will prevent some protection on people getting a hold of your data through you know like who's owning the domain name and so that companies don't get that information about you knowing that it's yours will do this you can just leave that by default we'll do continue you can click you know however you want to pay I'll just type it like credit card information for your employer Tenten just kidding not gonna do it okay so you'll just go through and then you'll click place my order and it will pop up we go to home we go to manage my domains it will pop up right here so these are the three that I have right now you can see that they're all hosted with digital ocean but I'm gonna do learn to deploy so that's the one that I just bought so we're going to click here and it's actually going to be really easy how we change this so if you go to name servers we're gonna click change so that we can update all the different name servers for here alright so this is what we're going to do we're gonna go over to digitalocean our project we're gonna click right on these dots right here click add a domain for our virtual machine that we have we're going to enter in our domain we're going to call it learn to deploy that's one that I have or you're going to type whichever one that you have comm and click Add let me see that was added to our project and now we're gonna take all of our name servers which are right here so let's copy and paste all of these and change it right here so we have name server one name server two and then name server three we'll get rid of those periods all right perfect so that's all we have to do on the name selo side so we're gonna click Submit and this is just going to basically tell name see all of that now we're going to manage the deep of the domain on third digitalocean alright then we're going to go back to digitalocean and the only things that we're going to add is a scene and you can see that we already have our a record so that's fine so let's click cname we're gonna click at and then we're gonna give it the alias which is going to be learn to deploy deploy calm and actually instead of this our landing ww my mistake we're gonna create that record and we should be good to go so this is gonna just tell it to redirect to our domain name whenever it hits any of these different type of URLs that people search for okay so now that we have all of our records set up for our domain name um the only thing that's left for us to do is these certain bots stuff so why don't we go ahead and go back to our terminal with our server you can SSH back into it if you closed it and we're going to run some simple commands so why don't we do sudo at sudo add app dot repository pinkie a search box slash search bot okay so we're just gonna install some stuff we're gonna press ENTER to continue and this is going to get our free SSL certificate so we can finally um you know deploy our app on our web server and get everything get everything running on the web now let's do sudo apt-get update let's do sudo apt I should get install certain bots don't say yes all right and then we're gonna do sudo cert bot cert only so they're just gonna give us our certificate standalone - - preferred challenges so it's just a little prefix for how we want to set it up HTTP - D we're gonna do learn to deploy calm and obviously whatever your domain name is you will just change that right here with on my learn to deploy let's put enter oh and it looks like I did a little spelling error so instead of perfer we're gonna do preferred click enter this should be good to go we're gonna enter in our email address so I'm just gonna put my knight here we're gonna click agree I'm gonna say yes you can say no if you want to obviously alright perfect and now it says congratulations so this information is really important don't clear from the console I would suggest you copy and paste it so you know where your certificate lives but basically just gives us some paths on where our certificate is so we can actually hook that into our application and use it so what we're gonna do is the last step is we're going to go and open up some files and actually just copy and paste some of the paths that are listed here um into our configuration so I'm going to open this up so you can kind of see where we're gonna change it if we go into our server our index try to minimize this is good I'm gonna scroll down to where we use our certificate so you can see right here that I use on some certificates for my for the application that we have and what we're gonna do is we're just going to change out these ones right here with the different file path then we can just do that on the server that's just telling it okay this is the path to the SSL Certificates so I want anything swap that decay and this is built into the server architecture that we have on how we're deploying and serving our build assets and all the code for our web application so I'm going to minimize that and we're going to go into our server and we're going to edit our index dot JSP file and we're gonna do then index dot J's so we can actually edit this press I on your keyboard so that you can have this insert mode it's right here and we're gonna just scroll down and right here we're gonna actually change the file paths so this should look basically identical to what you got in that little log that I told you to copy and paste but basically you're just going to change this whatever domain name is somebody has learned to deploy this one is going to be learned to deploy and then learn to deploy again alright and after we have all that you're going to do escape on your keyboard and then you're going to do shift : WQ so it saves and flushes our write changes and then quits the editor alright then if we do them index again we should see that our changes are saved all right perfect you can see that we updated the SSL certificate path so to get out of this we're just going to escape shift : and then you cue with the exclamation mark alright perfect so that's looking good to me we should be good to run and deploy this now so why don't we CD to the root and do NPM run production build and let's see what we get all right so I'm gonna do TM to list to see if it's running you can see that it's eating up a lot of memory this is definitely my fault because of the build and stuff I didn't optimize the bills just create react app so if you see that it just no that's my fault so we're gonna do learn to deploy calm and let's see if our application is all set up alright guys perfect you can see that we have our SSL certificate you can see that this now Maps our domain and we have a full functioning application in addition to that if we go to inspect element or we open this up and dock it to our browser you can see in the console no errors that's good but what I really want to look at is the sources tab where is the sources tab okay Wow I cannot find the sources tab on this thing so we're just gonna open it up in all Google Chrome real quick just so I can see it so I just wanted to point it out that you can see that all of our assets are not bundled really nicely together with web pack and a couple of other configuration settings you can see in our git repository so this will just make it so that people can see that sourcemap um in our application they can't see the actual files that were writing to and such so that all of your code is kind of hidden you know if you have like a really delicate project they don't want people to see the code that you wrote um you can always click here in the sources tab and make sure that that is true I think it's just like generate source map equals false on the environment variables ok perfect so I hope that that helped and you guys have a better idea of how you can get started with digitalocean and get breeze ssl certificates so you don't have to do all that nonsense and and bye and go through hosting providers and spend pretty pennies on on stuff like that I also know that the build size for this the bundle sizes is really large that's something that we're gonna be tackling in a different video that I kind of want to go through and show us how we can create an application without create react app and actually have a lot more control over our web pack settings and getting a nice web pack bundle size I think this one is like maybe like three megabytes or something like that and that's all because of the amp charts library it comes prepackaged with a lot of import statements and that's something that I'll go over in a different video but anyway thank you guys for watching I hope this helps please let me know if you need any help on my loan when you guys reach out and email me and leave comments and stuff like that so so please feel free to leave a comment if it sucks if it's good if it's not email me if you need help let me know and yeah thank you guys so much for watching I really appreciate it and I will see you guys in the next video

Channel: RyanMichael Hirst

Views: 14,816

Keywords: Deploy Node.js app with Digital Ocean (FREE SSL certificate with Certbot), free ssl certificate, ssl certificate certbot, deploy nodejs app with digital ocean, digital ocean ssl certificate, digital ocean deploy, digital ocean tutorial, ssl certificate tutorial, nodejs ssl certificate, node.js, express ssl certificate, react ssl certificate, lets encrypt ssl certificate, deploy react ssl certificate, react app ssl

Id: lN0oiYqenpA

Length: 19min 19sec (1159 seconds)

Published: Sun Sep 22 2019