[Step by Step] Deploy NextJS on Ubuntu Digital Ocean (2 NextJS Apps on one server)

in this video i'm going to show you how to run an xjs app on digitalocean on a clear from scratch ubuntu server no need for versailles no need for netlify and i'm not talking about the digitalocean apps platform i'm talking about provisioning a server from scratch on ubuntu for seven but i think now it's seven dollars seven bucks a month and in this video i'm going to show you how to run two next js apps on the same server let's go no more versailles no more need for netlify although we love you versailles we love you another fight we want more options we want to be able to run next chess app and open source app or react on our own servers because we're cheap come on come on let's tell the truth about developers let's go plus we need more options all right we cannot be stuck out only versus l these are only hosting platforms and they do simplify things but they could be expensive and they also provide some limits you could run multiple next js apps on your if you have your own server and you could even run another backend server on the same server so you could have everything in one if you go to purcell you will need to have a front end and then you might need to make another server for a backend anyway i'm going to show you how to run multiple apps in one on the main uh one domain called welcome next just and i've just it's a boy i've added edited to the page so i can show you this this is one site and then test omarl.com i've added the border plate right so you can see the difference so i have two sites two nexus apps let's get started i'm going to show you how to do that and this is really really exciting hit that like button and subscribe to the channel the step by step is going to be provisioning an ubuntu server on digitalocean make sure we have the latest packages put nginx as the server implement node.js and make sure we have npm and then another thing called pm2 so we're going to do is just go ahead and create a regular old droplet in you know called the ubuntu server so go create droplet choose ubuntu basic premium intel and then the seven dollars a month plan is all that we need we don't need to add block storage we'll go the data center i'll choose new york choose the one closest to you ssh keys i already have some there so we'll just go ahead and choose those um make sure you be able to get into your server so just make sure you don't have an sh key just go ahead and add one we don't need to do anything here because this is just a demo and now i'm just going to choose i'm going to name it next yes app i have another one so i'll call this next just ubuntu alright and that's pretty much it we'll go ahead and create the droplet now this takes a little bit time to provision so the next step here is what i'm going to do is once it's provisioned i'm going to get the ip i'm going to point my domain names my domain and my sub domain because i'm going to show two apps running all right it's provisioned now i have an ip address with a fresh server now what i'm going to do is go into i have name cheap or you can do this in godaddy and what i'm going to do is go to the domain name and i'm going to change the a record to point to the digital ocean server so right here it's a record at that's going to be the main domain and then i'm also going to choose another subdomain called test so i can show you how you can run another site on the same server so we're going to point both of these to the generation server and these are just a record so we're gonna that takes some time to propagate so we're gonna let that propagate while we continue on now this should be running now let's get started so i tried to zoom in and now what we have to do is actually go ahead and run all the commands so i'm gonna copy the address i'm going to ssh into here so let's just zoom this in a little bit so hopefully you can see this so ssh root and again i'm not going to be creating any other user because i just want to show you the steps if you create another user the same steps apply i'm just going to run this in root great so now we're inside i'm going to clear so we can do fresh you know get to the top i hope you can see the terminal because most these are terminal commands so the first thing the first step i'll make sure i have some of these in it just somewhere so you can go through the steps it's multiple steps but it's all just provisioning the server so the first thing is we're just nothing fancy we're just updating and upgrading getting the latest packages on our ubuntu server just let that run that's just basic digitalocean stuff and this takes some time so just let that run while that's going what we can do is just do a dns checker to see if our domain has propagated you can do is do omar you know put the domain name and just see if it it's propagated oh so it's pretty quick so it's saying that it's propagated through okay so if you see this right here um just go ahead and keep that you know just click okay and keep the defaulting it does take some time to download all these so just be patient with it come on this is the ocean go we're finally done the next thing is what we want to do is we want to install nginx and we want to install certbot which is going to let us use let's encrypt to secure our domain name for free so it's just going to be sudo apt install nginx the servbot the python3 certified nginx and just click that and let it run that should be fairly quick um so we're gonna do i think it should be quick so that's done and now what we wanna do is just do some basic digital ocean you know ubuntu server stuff so you wanna allow nginx to have access um to the firewall so just basic um you know firewall stuff this is common for you know most of ubuntu servers so there it is um ufw allow open ssh and then we're going to enable um yes and we're gonna enable this basic firewall firewall's active enabled on system startup that's pretty much we have the basics of the server domain names aren't working because we didn't set up the ssls just yet so right now if you go straight to the ip we just have the basic server running fine okay great now we want to start the process this is just basic we got it loaded right we got the server up now we just want to go ahead and install npm so we can start doing everything we need to install next js just app install npm and we need that so we can start pulling packages okay now we have npm installed that took a while the next thing we have to install is a package called pm2 pm2 is just a process manager for node.js because node.js needs to the server needs to run it's just a way to tell node you know to start or stop your server so that it runs the app npm install globally pm2 so let's install that package and let's let that run now i'm just going to run pm2 status to make sure you know this looks okay and perfect as you can see here um it's just nothing is running it's just showing the the basics all right so now let's click clear and now we actually want to get node we're going to install nvm and node so what i'm going to do is cd into var and ww so as you can see here the there's already a default html that's like the basic one that's already running on the ip address welcome to nginx we're going to basically remove that and install put next js our own app um another folder there all right so let's go ahead and do this so um this one what you wanna do is first grab the package and i'll have it just here um and that's the command curl you know and it's just you're basically pulling the nvm package and then we're going to install it so let's grab the package and then these commands are important we're going to let me move this up a little bit make sure you can see exact shell and then we want to install nvm okay now this was going to bring in node.js now we have node and now we're actually going to set up what we need to get next.js going all right so i'm going to clear this when you could clone um something from a repo but i'm just going to go ahead and create that because that's going to be a process of creating ssh keys and that it's pretty easy but i want to say that for another video i'm just going to use this to go ahead and clone xgs right here in the terminal if you don't do that what you can do is you can create an ssh key add that ssh key to your git you know repository and then you could get pull and it'll pull it right right here in where we are but we're just going to go ahead and create it so we'll do npx create next app latest is what you would do on your local computer and i'm going to create it i'm going to call it omarl.com and i'll just you know what we'll just call it omareel for now takeout.com hopefully that works and that's pretty much it we're just basically creating a nexus app right here is that the asmr that people do on these things my favorite asmr is the keyboard i love the keyboard there's some youtubers all right let's go it started awesome now if we go ls we have html we have a new directory so i'm going to cd into that directory now we're going to do npm run build right this is just basic next year stuff you would do on your local computer so now if we do ls you can see that we have everything for a nexus package so i'll cd out of here so now what we have to do is we have to create an nginx configuration file to say hey when the domain name comes in go here and then we still also have to run the application using pm2 if you haven't done so that's our next step so let's go ahead and what we're going to do is go into cd etc nginx and you'll see here a thing called sites available okay and sites enabled the first thing we have to do is go into sites available available all right you can see there's one called default and we're gonna that's the default nginx one that came with the server we're gonna remove it after we create our own touch creating the file mrl and then nano into that mrl and now we're going to add the config file i'll add this config file into it just somewhere it's not a lot here um if we go ahead in here oh now zoomed in so you can see a lot of it but we're listening we're using the server name omarl.com and then g-zipping some of these file now these are critical to have so i'm gonna put this in a gist alias right here should be omarl that is what i named it right yep you want to change that to whatever yours is and we want to leave this 127 on the 3000 port so we're going to go ahead and control um to save it save go out of here now you have to typically this is very common on all servers you have to now copy this over into sites enabled but we don't have to do that and i just don't it's just annoying process so what we're going to do is there's a way where you can just keep your sites available and not have to worry about sites enabled so we want to do is go into the nginx dot config file so make sure you're at this path right you're back in the nginx and now we're going to go into nginx oops nano because i want to edit that file nginx.com all right so now we're going to scroll down [Music] okay here it is so we want to change this to sites available because i don't want to have to add multiple times every time i add one so that's it so we're telling it to use the sites available not sites enabled so we don't have to deal with sites enabled again so we'll back out what i'm going to do is i'm going to restart this all right great just so i can get that to reload so the next step is we want to actually start the process in pm2 let's just make sure nginx is good to go nothing wrong quickly for all syntax is okay so let's go into the cd sites available and let's delete the default right so ls and let's do rm default let's make sure that's gone so ls it's gone let's back out and let's go into cd sites enabled ls and let's remove that one as well all right ls and let's let's go ahead and restart systemctl restart nginx we have just our omrl config file and then let's go into cd var ww ls and let's go into cd you could leave the html cd omrl and let's start this process pm2 start npm npm um name and then omar out let's start it all right let's go here and let's see what's happening all right so it's not loading here but you can see here it's loading from the ip so this is great so now we have next.js working the reason why it's not getting a domain name yet is because it needs the ssl in order to start loading itself now all that we have to do is is create the cert bot which is going to be a free let's say encrypt so we'll clear and we will do sudo cert bot dash dash engine x dash d and then your domain name so we're going to do that and let's see if this works so enter your email address i'll just put and agree and then fine they could share information just going through the let's encrypt prompt this is very common all right so we'll do the redirect i want to make sure that always redirects using ssl and supposedly this worked so let's just do a system ctl uh restart nginx just in case and let's hope that this worked um all right so this the ip went away and now it loaded our domain name so now we have next yes and guys this looks like a boy this is the boilerplate but trust me it all works that's it guys so you could stop here and you could have next yes running now what you could i'm gonna show you in one second let's get another domain uh right on the same server now this is interesting because there's some nuances here just to reiterate git clone your own and you could do git and all everything that you need to do right on the server i just built nexus on there so i didn't have to go to the ssh process okay now let's create another um site and i'm going to show you how to launch that site now first thing i'm going to do is i'm going to change this so that we can know that this is one this one is like one this is related to the uml cd pages and then we'll do nano index.js and i'll just update this right here and we'll go here and call this welcome next.js i'll click edited so that you know it's this one right so we'll save it we'll go back go ahead and do npm run build we'll do refresh and there it is edited so this is the one that we've played with so now we're gonna make another one so i'm gonna go back out into here npx create we're just gonna create another one back in the same place back in the root create next app at latest and we'll call it test omrl which is referring to you can name this whatever you want and i'm gonna bring in the other domain name here great now we have to do the same thing we have to build it test omrl and then npm run build and we just have another boilerplate next js app running now we have this but it won't run we need another config file to say hey when test or model duct comes in go to this place now we're going to go back to cd var cd etc engine x and now we are back here so we're going to go into cd sites available we have omarl now we're going to create a new one so we're going to do touch now we're going to go into it and edit it and now i'm i have the same config file i'm gonna paste it i'm gonna oops no wrong paste and then we're going to paste the whole config file now we're gonna make a couple of edits okay this is key so now we're gonna change this to the server name which is going to be whatever domain name is coming in so it's test.omrl.com that's a subdomain nothing else really changes except i'm saying hey go into not on rl go into the test omrl in the ww root right that's all and then we have to change the port okay but this is not all this is not the only step but it's part of it okay so we just did the same config file we'll go ahead save this x out and now we'll do let's do system reload system ctl restart nginx to let that kick in refresh test.omrl and now we don't have the ssl yet but let's continue all right so you see here it's not pointing just yet okay right now it's still pointing to the original we need to make another edit that's really important we need to make sure that next js loads on this other port oops cd pm2 cd overls okay great so we'll clear just so we can start so we'll go cd pages ls let's update the packages json file to load in a new port on production so we'll go ahead and we'll do ls right so nano package dot json here we are so it should be on the start we want to say go into we want to make sure this goes into the other port so we're saying when you start load it on this other port now this number has to match the one that was placed in your config file which i know it does remember the first one omareel.com is running on 3000 and we didn't need to guess it we don't need to specify port because that's the default port now remember you have to rebuild this we're going to rebuild npm run build now what we want to do is we want to reload the pm2 all right pm to start npm same thing now we're going to have a different name we want to have a different process a second process to start and we'll click enter let's give it a cert bot for now or just just in case what i want to do here is i want to add the serp box i think that is what's stopping it for the test.umrl.com so let's let that run we're going to make a new certificate all right we'll do the redirect redirect all traffic and that should be it so let's just refresh this let's see what happened there it is wow that was all it was so you just need the surfboard for it to work um so that's critical but now look we have two [Music] apps running right and i the first one was edited that's why you can see and this is the other one now you can just do whatever you have two next.js open source apps running on one server for seven dollars um two things just make sure when you do go in pm to status will show you that both are running right omar l being the first one these you can name these whatever you want as long as you're inside the root of the folder um and you can see that they're both online is this it guys i i want to end the video but honestly that's all it is we're not even i don't think we've done half hour and we have a full ubuntu server running two open source nexus apps one of the best frameworks that's out there for react now you don't feel that nexus is only applicable to you know nullify and you can also run it on aws all you need is ubuntu server and just install the right packages and make sure you have the right config files if you guys like react front-end development css animations nexus hit that like button subscribe to the channel

Channel: Digital CEO

Views: 29,965

Keywords:

Id: x6ci2iCckWc

Length: 18min 15sec (1095 seconds)

Published: Mon Jul 04 2022