Deploy your Next.js app to a VPS (EASY!)

hey everyone when it's time to deploy your nextjs app you basically have two options so nextjs is actually just a nodejs app so everywhere where you can host no JS apps is also where you should be able to host the nextjs app now typically people tend to go for a platform as a service like for sale for sale is very popular because it offers a really nice developer experience it has a lot of things out of the box now the downside is it does come with a price tag especially as you start to scale so one other option you have is to deploy on a VPS and that's what we're going to look at in this video because High Velocity just released their VPS offering and according to them at least it's the most affordable VPS right now on the market for the performance that you get so they need to get the word out and that's why they're sponsoring this video and it's not only about priz sometimes you really need Advanced customizations so that may also be a reason for using a VPS right so in this video we're going to look at how to deploy a nextjs app to a VPS the VPS will come from High Velocity so let's actually take a look at what they're offering here so here they show you the plans they have so the cheapest one is actually $4 a month which is very affordable and you get 10 terabytes of bandwidth I have not seen that with any other VPS offering High Velocity was generous enough to give me the most powerful VPS for this tutorial but everything we do here should also work on the cheapest plan so after you bought one of those vpss you can then manage that here in their dashboard so here I'm in their dashboard I have an overview of all the devices here here and this is the VPS that I was given it's a VPS that's currently located in Los Angeles it has a public IP address which is actually what we will use later in the browser to actually see our next JS app all right so I can click on this for more information and most importantly though we need the IP address because we're going to need that when we actually go to our website but also to SSH to connect to our VPS and set things up so let's say we have a nextjs app and I actually created an example app here very simple right now it just has this homepage here and this homepage is currently saying hello everyone just to make it a little bit more interesting let's also add a separate route here let's just make that the about route so in the new nextjs app router you need to create a folder and then it's a page. TSX file so you need to export a component here I will just call that page although you could call it something else about page here right let me delete this and let me save here all right so now we have an homepage and a slash about pay and locally here on my own computer I can start a development process if we look at the package.json here we actually have a couple of scripts so here for development I can run this script so if I open up my terminal here in visal studio code I can run mpm runev and this will actually just spin up a nodejs process right so this is all nodejs under the hood and by default here the nextjs app will be available on the port 3000 so if I open that up I can see Hello every one and if I go to slab press enter here I am now on the about page so that's working as well but this is during development right so now when we go to production what we want to do is create an optimized build so what we want to run is this script this will optimize everything all over our files it will really make it as performant as possible and then we want to run that optimized version and we can do that with this script so this next start script so what we're going to do is we're going to make sure that we can get all of these files on our VPS we're going to run that build on our VPS once it's built we're going to start that optimized bundle on the VPS so how do we get all of those files on the VPS in the first place well the easiest way I found is to actually just use git and GitHub for this so we will make a repository for our project so let's quickly go to GitHub here I already logged in I'm going to create a new repository I'm going to close this tab here and I will just call that example VPS tutorial example VPS tutorial and I'm going to make it public I think if you make it private it's going to be a little bit more difficult because we're going to clone this repository onto the VPS so if it's not publicly available you need to create an additional access token uh so I think public should be a little bit easier we'll see so I'm going to create this repository here all right so this repository is currently empty so I'm just going to copy all of these uh commands here I'm going to copy them let's see open up my terminal here again and I can close this development process here we're not going to use that anymore and then I'm going to paste all of those commands you can do that actually you can just copy all of that and just paste all of that and just press enter it will do all of them in one go all right so if you run those commands you should be able to push all of those files to this GitHub repo and now it's stored on GitHub so now we can log into our VPS and from the VPS server we can clone this repo right so here I have opened up a terminal now I'm on MacBook and by default this is the zshell but you may be on Windows now don't worry about that because the commands will stay the same right so you may be using Powershell or the command prompt CMD it will all work the same way now I Tred doing this in visal studio code right so in visal studio code we also have this terminal it's an integrated terminal but I for some reason run into issues when I use this one so I opened up this separate terminal window but it's the exact same as in Visual Studio code all right so currently I haven't done anything here we need to log into our VPS here so we use something called SS for that so we can say SSH then it's the root at and then we need to use this IP address so I'm going to click here and paste it right here and I'm going to press enter and now of course we need to uh give credentials right not everybody can just log into that VPS so I need to give a password here when you buy a VPS the first week you're going to have login credentials and then it will be removed so once you buy the VPS make sure you store it somewhere safe I don't see them anymore because I was given this VPS more than a week ago so I'm going to type my password here that I got it's not shown here in the terminal window but I am actually typing the password now if I press enter it should work so now you can see I'm logged into my VPS right so it will show some information it's running auntu and it's going to show some other information but not nothing that interesting here because we haven't done anything yet okay now you can also see that this is different from what I had before so really indicating that the commands that we're going to run now are going to be the commands executed on that server right not on my own computer so one command I can run here is the present working directory so you can see we're currently in the slash root directory and to clone this we're going to need a git right so we can check if git is installed we can say which git and it actually shows us a path to the binary meaning git is actually already pre-installed when you buy a VPS from high velocity so that's really nice now before we're going to do this git clone we also know that we're going to need nodejs because at the end of the day this is all just a nodejs process so we need to make sure that we also have nodejs installed and I just did a clear by the way so I did clear and it will remove all the old commands so we have a nice clean view so now we need to install nodejs now if you try doing something like no- V it will give you an error it will say node cannot be found and it will actually give you a suggestion on how to install node js right so don't run this but you can actually do something like apt uh install nodejs and it will install nodejs for you but it's going to be an older version I found so better way of doing this is with NVM this is the node version manager and that also allows you to easily switch between nodejs versions in case you want to do that we're going to use NVM so we need to install NVM and you can install NVM with what with a command you can find that command here in this GitHub repo seems like a lot of work to hunt down one command but if you Google for NVM you should be able to find this uh repo very easily a lot of people have to go here so here you'll find install and update script but we just want install so I'm just going to copy this and I'm just going to paste that here in my terminal I'm just going to install NVM like this all right so after that's finished you want to make sure that you read this line very closely it says close and reopen your terminal to start using NVM or run the following to use it now so it needs to add NVM to the path variable on the operating system and we can do that with these commands actually so you can actually just copy this and just paste that here looks a bit clunky but if I now press enter it should work all right so now that should work so if I do something like NVM DV I actually do see a version number so NVM seems to be successfully installed here and now we can use this note version manager to install nodejs itself so what we can say is NVM install and we just want the latest uh version that has long-term support so we can say d dlts it's going to install nodejs and you can see it's going to be version 20.9 all right so now once that is finished I can try typing no- V and I actually get a nodejs version here of 20.9 now as part of that nodejs install we should also have the mpm package manager for nodejs so if we do npm DV we also should see a version number here all right so now we have everything that we need so now let's actually try get cloning this so we're going to use this uh https URL and I'm going to say get clone and I'm just going to paste an address I'm going to press enter and let's see if that works all right so that seems to have gone successfully now how do we check that if I write LS here we will actually see a couple of things here so you're going to see something like Snap that's just by default uh something that we're going to have here now here I actually prepared this tutorial so from a previous try I have example- VPS here as well but now we also have example VPS tutorial so this is the directory that will hold all of these files here and I can I can actually check that I can change the directory to go in there I actually only have to write example VPS Dash and then press Tab and it will actually suggest the complete name for me so if I change the directory into there and now do LS again you can see that we get a bunch of files here pack the Json all the files here are now also available on the VPS right so there is some server in the world it's mine here is currently located in Los Angeles which now holds all of those files right so what we talked about before to now make this actually work we could actually run a mpm runev on this VPS and that will actually spin up a Nots process and it will make it available on Port 3000 on that IP but that's not optimal right so development mode is not optimal we we want to create an optimized version now so we want to create a build and to do that properly it will need all of these dependencies so both here in the production dependencies as well as the def dependencies because for example Tailwind needs to go over all the files and it needs to see which class names you use so it can generate an optimized uh stylesheet so the def dependencies are also going to need to be installed here so here what we want to run here is say mpm install which will install all of those dependencies and this is not a problem because our app here is fairly small it depends a bit on the size of your VPS on whether you want to do it a different way all right so that uh looks good so now the dependencies should be installed so now we can run mpm run build which is going to create an optimized version all on the VPS you can see it's uh starting to do that can take a couple of seconds all right so at some point that should be finished and you will see a view like this right it will say something about the route that your app will have in production so we have the homepage and the about and by default it will also create this not found Route it will show you the JavaScript that you're going to download when you go to those route and also the JavaScript that's going to be shared by all of those routes that's now all available on the VPS on high velocities VPS so now we want to run this on that VPS and we can say mpm Run start and it will run it will spin up a nodejs process and it will run that optimized app so you can see now here it says it's available on Local Host 3000 so Local Host previously that was our own computer but this is now the high velocity VPS right so now it's saying on this VPS on Port 3000 this app is running so we should now be able to use this IP go here use this IP and then remember it's Port 3,000 now if I press enter we should see our app and indeed we do we now see that our next app app nextjs app is running live on the internet on a VPS and publicly available with this IP address with this port and let's actually also try to see if we can see that slash about route if routing is also working and indeed routing here is working as well right so pretty cool that this is working now now of course we can make this much more sophisticated now we can add SSL right so now we have HTTP we want to make it https we want to maybe configure uh DNS because we we don't want to have people have to type in you know the sequence of numbers to get to our website we want to give them a nice clean name something like domain.com right and also of course not have the port number so this should be domain.com right so we can set up DNS for that purchase a domain somewhere we can Alo use something like uh pm2 to manage this nodejs process right we could have also dockerized this you can make this as sophisticated as you want that's the beauty of using a VPS you get much more control than by using a platform as service and thanks to High Velocity that is actually very affordable right so check out their website it's high velocity.net they're running a celebration launch with very affordable prices here and you saw how simple it was to set everything up I have to say dashboard everything here looks very clean it was very easy to prepare everything just worked so it is indeed simple to do it's very affordable again $4 for the cheapest plan you get these server resources right so there is also something called shared hosting so with shared hosting you're sharing a server with other websites as well so if another website gets a lot of traffic your website can be hurt by that right now with VPS that's a little bit different so with VPS it's more isolated so those resources are actually yours somebody else's user does not impact you so they have Global availability and according to them I cannot verify this myself they claim to have the best prices in the US for the performance that you get they have a good support team as I found out myself as I Was preparing I made some silly mistakes and I just asked them a bunch of questions and literally within a couple of seconds I got somebody to chat with me and they really helped me out really well so I can really vouch with this that their support at least to me seems really good they have a fast Network here so you have a low latency right which means that if somebody goes to your app how long does it take to get a response well they have a very fast Network right so here you can compare their new VPS offerings one helpful thing perhaps here is it has DDOS protection out of the box right so you don't have to set it up yourself that I think that's really beneficial and I just noticed that my light went off so hopefully you can still see me and you can also decide yourself which operating systems you want by default it's Ubuntu they actually have a very useful uh frequently ask questions usually I don't really find them really interesting but they actually put some effort into this and their answers are really good very clear and also helps you understand how all of this works with VPS hosting right so this may be something that you want to consider using as an alternative to a platform as a service I want to thank high velocity for sponsoring this video thank you for watching this video have a nice day and bye

Channel: ByteGrad

Views: 19,552

Keywords:

Id: 0rIak4Tc624

Length: 15min 44sec (944 seconds)

Published: Mon Oct 30 2023