How to Deploy a Next.js app to a Custom Server - NOT Vercel! (Full Beginner Tutorial)

yo what's going on guys today I'm going to teach you how to deploy a nexjs app to not the cell but your own VPS server so in this video you're going to learn a couple of different cool things firstly I'm going to teach you how to set up your own custom server we're going to be using a VPS by host ninja to do so then I'm going to teach you how to SSH into your external server we're then going to go ahead and set up something called a remote proxy using engines inside of our remote server which will be running the Ubuntu operating system I'm then going to show you a couple of bonus tricks such as how to use vs code when dealing with external files on a remote server and I'm going to teach you all about port forwarding so that way you can run your local host from your remote server on your local machine now I get this question all the time Sunny can you only deploy a nexjs app using the cell no the reason why you might want to deploy to the cell is because you get benefits out of the box but this tutorial is going to teach you how to move away from the vessel environment and actually deploy your next shares app to your own custom managed server first things first we need a virtual private server now you can use a physical server however in this case a VPS gives us the convenience of being able to access it remotely wherever we are in the world now our friends over at hostinger have set us up with a very sweet deal all you need to do is follow me we need to go to hostinger.com forward slash Sunny go ahead and click on the hosting and VPS hosting simply go ahead click choose your plan um in this case we've actually gone ahead with the kvm2 add to cart grow down to the bottom simply pop in code sunny and you'll get an extra 10 off sale price so after you finish the checkout you'll go ahead and have to set up your VPS I've made this so easy for you the first link in the description actually includes an entire document that looks something like this so on this document you're going to have all the steps on how to set up your VPS as well as every single different terminal command and step that we're going to be doing today I've also gone ahead and actually helped you out by even breaking down every single terminal command with a nice little explanation as to what every single part of that command one does I know this will help a lot of you out as it can get very confusing when we start using the terminal follow those instructions get your VPS set up and then meet me over at the dashboard so now we're at our dashboard panel so once you've logged into the H panel you will see this when you click on the VPS tab over here now once you're here we have a few important points foreign [Music] step is we're going to go ahead and click on copy IP address this is going to be the address that we're going to go ahead and use to connect to our server anywhere in the world across via the Internet then we're going to click on SSH access now this is how we connect to it from a terminal you want to click that and then you see here you have the username and the SSH password I want you to click on change and I want you to set a secure password here now this password is very important and you would have set it up as well during the first setup process as I mentioned all of these steps are available in the document the first link is in the description okay so once you've done that you should have a successful root password now the second step is you can either use your regular terminals like so or in fact you can go ahead and check out the warp.dev website now this warp terminal is actually awesome we are not affiliated with them in any way however I do recommend them because it's actually a great tool for using AI to assist you especially when you're getting nitty and gritty with different terminal commands such as going into an external server it helped me out a lot and I think it will help you out too so the first step once your terminal is open I want you to SSH and then go ahead and put the username which is Root in our case and at the IP address okay so as you mentioned before you get the IP address here we're going to go ahead and make this full screen to make it a bit easier for you to understand we're going to go ahead and hit enter now here it's going to ask you to add it to a list of known hosts all I want you to do is type in yes and hit enter and it will add it to a list of your known hosts on your machine now once you've done that I simply need you to use that root password that we spoke about earlier so I'm going to go ahead and paste it in and click enter hit enter like so and then you'll see starting show if for whatever reason you got password denied I just recommend you simply go to SSH access change your password give it a while to go ahead and propagate the changes and then retry the previous step okay now that we're done with that you can refer to the steps as I mentioned before first link in the description and you'll see all of the different steps that we're going to have to do for example this was the first step you'll see a nice little explanation about it and so forth so the first step is we're going to actually go ahead and Purge anything related to the Apache HTTP server this is because we're going to use something called engines to handle all of the requests and we'll explain that in just a second after we finish these steps so firstly I want you to run the following command sudo apt-get Purge Apache 2 right with Asterix hit enter and go ahead and wait for that to do its magic if you get prompted simply pop in enter to go ahead and approve once that's done we're actually going to go ahead and download node onto our machine and we're going to rename the output file to the file of our own choice so in this case I can go ahead and pop in the following command Co SL and we're going to go ahead and download this file and we're changing the output file to node Source underscore setup.sh so if we go ahead and do this all it does is it downloads and it puts it into that file okay so now if I press LS you should see all of the files listed out so here you can see node Source setup.sh now I need to run that I want to run it as an admin okay so what we can do is we can type in sudo bash and then we simply pop in the script that we want to run this runs it with elevated privileges so it allows it to do things like more reads and writes so let's go ahead and hit enter now you might see this message if you're installing you will have to wait 60 seconds this is because the script that we're referring to when we install node is using a deprecated package they should get this updated fairly shortly but if not don't worry we just wait 60 seconds to pass and it will be fine once that's done we're going to update all of the dependencies and package lists using the following command so you simply need to go ahead and pop in sudo apt update and sudo apt upgrade Dash Why why is this simply going to make sure that when it prompts us if we want to continue with installing the dependencies it automatically will approve that step so we're going to Simply hit enter and this will go ahead and update all of our dependencies similar to how we use mpm except this is for the Ubuntu packages inside of our system if you see this screen at any time pop up simply go ahead and pop in Escape so once that's done all of our packages are up to date and we can go ahead and set up our remote proxy now let me quickly explain what in remote proxy is and why engines is going to allow us to do what we need to do so when we have a web server we can think of things in a very simple high level way so let's assume we have a user on this side okay so here we have our user this is in the Internet space right so this could be anywhere in the world right now where this user is so let's just assume on the left hand side we have the internet and then let's imagine on the right hand side we have our server so over on here we have our own VPS okay whenever we typically visit a website we make a request to an IP address it simply is where that server exists and where we're going to go ahead and execute or run the file now the end goal here is when we go to the IP address so This Server will have an IP address of something like 62. you know 85.x save point x x and these could be whatever characters right it doesn't have to start with this either okay so this is going to be your IP address for the server when we make a request to this or the domain name so it could be www.sunny.com whatever maps to that IP address we want to go ahead and actually load up our next JS app but how do we do that because when we tend to run an xjs app it runs on something like a local host how can we basically redirect all of the requests which come to our IP address over to something like a local host which is running on our server so when we make a request we're going to introduce something called a remote proxy and that's going to be done via engines a remote proxy is a very simple process and again this is a very high level explanation just to help you understand and most of the time it's used to handle things like load balances and so forth but in this case we're going to do a very simple use case now imagine when a user's request comes in it hits this engine's remote proxy now this remote proxy simply will say if we have a request to for example the Home Route so our IP address forward slash then we should redirect all of these requests to the localhost so essentially we're just bouncing all of these requests over to the localhost okay in this way what we're doing is we're managing all of the requests that come to the server and directing them to where they need to go okay it sounds very confusing but you can actually go ahead and set this up fairly easy and then we're going to have our localhost running on xjs app inside now what this does really nicely is it hides away the complexity of your server so you can have your next.js app running on your local host on the server but to a user outside on the internet they're simply visiting the IP address seeing the IP address load and it will go ahead and load up the app as if it's perfectly how we intend it so let's go ahead and see this in action the first thing we need to do is add in something called a nexjs config file okay so I'm going to go ahead and pop in the following now this gives us admin privileges Nano is a way of editing text on a Linux machine and then we're going to go to the following destination okay and we're going to name the file next.jsconfig and I'm simply going to pop in enter this will give us a nice little editor you can use this or Vim I prefer Nano and then what we're going to do is simply pop in the following snippet now again it's worth mentioning that all of these steps are available in that documentation I've shown you and we explain every single step of in detail in that document as well so you can be sure to go ahead and check that out if you get stuck at any point now here what we're doing is we're setting up a configuration for our server all it's doing is it's listening on the default board which is 80 and we need to go ahead and pop out the server IP address here for our server IP address so all I need you to do is use the arrow keys head over to where it says server IP remove this value and pop in your IP address like so then what we're going to do is we're going to go ahead and add in a redirect route okay so in this case when we hit this IP address at the index so the just the forward slash room we're going to do something called a proxy pass and this is essentially what I showed you previously so when we hit this room we're essentially saying okay if you come to this IP address and you hit the forward slash through it will go to localhost but think about what you could really do here you could set it up to say if you were at the forward slash contact page then go to this app if you're at the forward slash help page go to another app or a different port running the app okay and so forth but in this case we're going to keep things very simple on the home index for this IP address we're going to redirect to localhost 3000 like so the rest of it is simply some other attributes which we need to include okay but the main one to take care of is this right here so now that we've done that we just need to go ahead and do control X and then I'm going to type in yes so why to go ahead and continue and then hit enter to save the file and just like that we've gone ahead and created our next year's configuration file for engines I was mentioning that this file that we just created is not actually included in the primary engines configuration file which means that it's going to be ignored okay so how do we include it into some a file or directory where it's going to be included into the primary engines file I can show you this to make sense of this very clearly so by simply typing in sudo Nano Etc and Jinx engines config you'll get to actually see the primary engines file now this one I don't recommend you change it unless you know what you're doing but I'm trying to prove a point here if you scroll down to the bottom of the page you'll see it includes everything inside of site enabled forward slash config okay so what we're going to do now is essentially create a connection between the sites available to that folder that I just showed you so it's very simple to do this and we use something called a symbolic link to do so all you need to do is pop in the following command want now notice how the first command is actually the sites available this is the file that we just created which done all of the redirecting rules that we want to a localhost 3000 and then what we're doing is we're essentially making a pointer available at this address so think of it this way we've got the file actually existing at this location that we wrote it to but we need it to exist in this address so that way it's included in the primary configuration file that I showed earlier because this folder directory is actually included okay now all we need to do is create a pointer so a symbolic link so if I go ahead and hit enter now what this actually did was it created a pointer inside of sites enabled and we can simply demonstrate this by typing in LS so it's enabled and you can see now that the next JS config from this file is a pointer to that directory so it means that it's essentially that the same as that file being there except it doesn't actually contain any value inside that it's simply a ref reference to the other directory okay but it works in the exact same way and it actually gets included now inside of the primary engines configuration file which means that it's actually listened to and there's a reason why we do this because if we want to Simply disable that site or remove that site from being available all we now need to do is remove it from here and then that way it's no longer picked up in the main configuration file and the rule will be ignored so that way you can very easily enable and disable sites in a way that is very easy so it's always good to follow some kind of format so we have our sites available folder and then the enabled sites which is actually picked up by our main configuration file now the next step is you see this default configuration file we're actually going to remove that completely because we want to redefine all of the rules for redirecting so I want you to pop in the following command RM forward slash ETC engine sites enabled default config and hit enter and then to test that it was actually successfully removed we can log out all of the files at that location and we should now see only the next JS configuration file you can see the difference between this area and this area is that Now the default config has been completely removed which means it will only be taking into account the rules that we've provided once you've done that we need to restart the engine server because we've changed our configuration file like so now the fun part we actually create our next JS app our engines rules have been set up and everything should be working in the way that we expect so let's go forward and actually set up our next JS app so first things first I want to create a directory where I'm going to put my next JS app we're going to do this by running the make directory file and we're going to pass it in the following and this is just a simple example location of where I'm putting the nexgs file you can simply play it wherever you want or you can follow what I'm doing then we're going to go ahead and CD into that directory so in this case if I see the into the directory you can see now I'm at that location so if I type in LS it should be an empty folder so we should see no files inside at this point you can optionally log into GitHub I've included those steps in the separate documentation I showed you earlier you can simply go ahead and check that out if you want to do that yourself but in this case we're not going to actually leverage GitHub because we're going to be creating a fresh next app using Create next app but before we do that we're just going to update our node version to make sure that we're at the latest version now to do that very simply I've paired together three different commands we're going to do apt install npm then we're going to run npm install Global and this is essentially a node version manager and we're going to install it globally which means it's available throughout the entire Linux system and then we're simply going to run n latest to install the latest version let's go ahead and enter to install and do the following it will prompt you so you're going to click on Y and hit enter as well and then let it do its thing while it installs npm then it uses npm to install the global n package and then update node to the latest version once you've done that you should see this message right here so in this case node version 20.6.1 has been installed that's perfect we can hit command K to go ahead and clear our terminal to proceed to the next step now all we need to do is initialize our brand new next.js app so I'm going to go ahead and use the following command and MPX create next app so we're going to use at layers to make sure we're using the utmost up-to-date version of our initializer then we're going to name it so in this case I'm just going to call it my new app and we're going to hit enter and then you can go ahead and follow the setup instructions so we're going to proceed and I'm going to keep everything the current default so yes yes yes and so forth so simply go ahead and follow the setup process and this will go ahead and install my new app inside of that directory once that's done we just need to CD into our new app so we're going to go ahead and CD into that directory here enter and before we run npm run Dev if you're in the same terminal since we did all of those different node version changes I highly recommend you run the following hash Dash R what this does is it goes ahead and actually invalidates the current location hash basically it's the same as opening a new terminal and sometimes what this does is it fixes small bugs that can occur especially when we change node versions okay so this will actually go ahead and essentially give us a fresh state so that way we can run our npm packages so now that were at this point we're going to type in npm run Dev now what this will do is it will spin our wrap up on localhost 3000 now you might be tempted to run and just go ahead and click that but if you do that it's not going to run the way you expect because this is not localhost 3000 on your current machine this is localhost 3000 on your external machine so the way that you can test this is in warp you can open up a second terminal by hitting command D so we can split the terminal and I'm going to show you a quick little trick as to how you can actually test that the request is working in the way that we expect so what we need to do is on this new terminal we're going to SSH into our terminal so we're going to go ahead and access it then you'll be prompted to go ahead and pass in your password so I'm going to go ahead and pop in the password when it's requested so pop in the password hit enter and then it will start to Shell up now what you can do here to go ahead and make a request to our Local Host over on this side once we're inside of our external server is we can type in curl and then we can type in HTTP 4-4 slash localhost 3000 okay like so and then you can go ahead and hit enter now what you should see is a request was made okay now take a little bit of time because it's developing it and it's running it for the first time but you can actually see now that this is the output basically this is the HTML code and we can see that is correct because we can actually see some Tailwind inside of the code so we know that it's running and that's essentially how you visit localhost 3000 through the terminal to make sure that it's working so a little test and it works very well we can go ahead and hit command W to close that now what we should actually also be able to see is that because we set up our engines rules previously now those redirect requests that I spoke about earlier should be running as we've set up our engines correctly so let's actually go ahead and visit our IP address and see if the expected Behavior outcomes so let's go over to our browser and I want you to pop in the IP address of your website so I actually have my IP address here I'm going to hit enter and as you can see it's working this is perfect and to prove this is running if I was to actually go ahead and cut the server by doing Ctrl C now you can see it will still try to redirect the request but when I refresh the page you can see a bad gateway that's because it tried to redirect to the Local Host in this fashion but localhost wasn't running so it simply got a 502 and it failed okay now in a real production environment we don't want to do npm run Dev because this will have a lot of extra dependencies for the dev environment instead what we simply do is we say npm run build and then we would run npm start once we build out the optimized production build so let's go ahead and Skip to that step right now so once the page is built up we're going to type in npm Run start and this will go ahead and start the app on low cost 3000 but now it's a production build okay so this is exactly what we would want then we can click on refresh and we should see the app but notice how it's a lot faster that's because we've stripped out all the unnecessary dependencies we've created a production build and it's going to go ahead and get rendered on the screen like so but we need this always running now this is a problem and it's not ideal because if you were to leave your computer at any time your external server would stop running the next JS app and then you will see again a 502 so how come we have a process running that is always going ahead and running our website or our next JS app on our external server and let's say it crashed or for whatever reason stopped rebooted itself so that way it's always up because that's what we want our next JS app to always stay up on our external service that way users can always visit and see what's going on well we can use something called pm2 which is a process manager on Linux so to use pm2 all we have to do is cut our server and we're actually going to go ahead and install it right now so the first step I want you to do is go ahead and type in sudo npm install Dash G because we're going to install it globally across our Ubuntu system and then we're going to type in pm2 so this will go ahead and install pm2 to our system which as I mentioned before is a process manager now notice how the previous step that we did was actually running npm run star after we had of course done our build step but this is where I need to provide that instruction to pm2 so that it can run that process on its own okay so I'm going to break down the following what we want to do is use the following command we're going to say pm2 start and then we're going to give it a process so in this case we're basically telling it to do the npm run star and what we're going to do is we're going to say npm we're going to give it a name and we're going to give the name of this processor just next.js well you could call this your test app you can call it whatever you really want that's just going to be what's shown on pm2 whenever you check the status and then we're going to run pass it the command is actually going to go ahead and run itself now again as I mentioned before if you want to go ahead and see a nice breakdown of this you can do so in the documentation and you'll see a nice little breakdown of every single command inside of the helpful documentation again first link in the description okay so let's go ahead and enter and what this will do is it will start pm2 and it will go ahead and make our app Run Okay so again if I typed in pm2 status now we should see the next JS app has been allocated to memory and it's online now the next step is we need to make sure that pm2 starts up on boot so to do this we simply run pm2 star this means that whenever the system boots up it will also start up and that way it will make sure that our next JS app is actually running at the same time and then we need to save this entire pm2 configuration so as you can see here it says freeze a process list on reboot so we're going to go ahead and copy that and pop in that command as well and that is it that's perfectly done and now our app is running in the way that we expected so if I was to go over here you can see that if I clear my terminal I'm not actually running the app on the right hand side instead pm2 is running it in the background and as I mentioned if it cuts off for whatever reason it will restart if I go over here and I create a new tab so I just want to prove a point here and I'm going to try and access the IP address now what you can see is the next JS app is running perfectly this is because our process manager pm2 is actually running the app in the background if I can prove this by typing in pm2 status as you can see it's running it in the background okay so everything's perfectly working and as you can see we have consistent uptime now you might notice how there is no SSL certificate that is another step we're not going to cover that in this video but if you would like that let me know down in the comments if you want to see me create a tutorial on that but there's lots of helpful documentation on hostinger and also online to be able to add in a SSL certificate and there you have it guys you've just deployed your first next shares app on your own VPS your virtual private server and this time we've done it on host ninja okay so this is a great thing to do on your portfolio to Showcase a lot of different skills but we're not done there I've got a Bonus section for you and I'm going to show you what if you wanted to go ahead and modify this site now and you can actually use your favorite IDE such as vs code to do so so let's jump straight into this so to get started all you need to do is open up vs codes now in this case I'm on a coaching call project so this is actually a coaching call which I run inside of zero to full stack hero are Flagship course and Community if you're interested in joining and you want to learn how to master your coding skills check it out it will be the second link in the description so what I need you to do is actually go ahead and install the following extension I want you to go over to the extensions Tab and type in remote now the first one you'll see is remote SSH now I've installed the pre-release version however you can go ahead and switch to the release version so install this and this is going to allow us to SSH like we did earlier into our server but instead this time through vs code once you've done that you want to go ahead and type in command shift p now once you've done this you're going to say remote SSH connect to host Now command shift p is like a command run it allows us to run a lot of our extensions or anything programmatically inside a vs code that we need to so you want to go to the connect to host hit enter so in this case I just need you to Simply pop in root at the IP address like we did earlier but in this case I've already done that and then it will ask you again similar to earlier would you like to add it to a list of known hosts but I'm just simply going to hit enter in this case because I've already done this step once you've done that correctly you'll be prompted to enter in your password so I'm going to Simply pop in my password and hit enter now this is the magical part so it's essentially doing the same thing that we did earlier on the terminal bot for our vs code setup and what you'll see is it actually will install vs code into our Linux server and allow us to do all the things I'm going to show you in just a second you'll see that we get a brand new window with everything that we need so we're going to click on the Explorer and we're going to click on open folder or Commando so as you can see we're actually inside of our external server now so if I was to go over here to our root directory and I went to forward slash VAR forward slash www dot forward slash next.js we should be able to see our test upload so you can see this my new app perfect so if I was to go ahead and do this and simply click on ok now here's the beautiful part it opens up our vs code and it will sometimes prompt us again for the password so all you need to do again is pop in the password but it will set everything up in the perfect way as if we were coding inside of our own local environment so now if I go over to our directory we should see all of our next.js coding files and then we should be able to edit all of those files inside as if we set up on our own computer so now you can see I can go ahead and edit all of the code from the remote external server this is incredibly powerful guys do not underestimate this because this essentially allows you to modify code on an external server whilst still using vs code there's only one missing part of the puzzle what if I want to run this code so notice how our terminal is already sshed into the terminal so again this is not going to be root this is going to be a regular Mac terminal so I'm going to type in npm run Dev and I want to prove a point here now if I do npm run Dev the first thing we'll notice is okay firstly Port 3001 is already busy that's fine in this case that's because we're running Port 3000 for pm2 so we can leave it on 3001 but how do I run 3001 for now we're going to do something called port forwarding so I want you to go over to Ports and you want to click on forward a port and we're simply going to forward the port 3001 and as you can see its forwarded address is 3001 over here so we're going to click on this web over here and then what this does is it forwards the port from our local host on our external server to our machine localhost and in fact you can even click on this button right here and the following will pop up so now you can see that we're actually forwarding our Port 3001 to our local machine and we get our output which is perfect so there you have it guys you deployed your first ever next JS app to a VPS server and I even included a bonus section which is how to go ahead and edit the code from your external server I hope you found this tutorial useful if you have don't forget to subscribe a lot of you are watching right now and don't actually subscribe it's crazy and don't forget to like and comment down below if you enjoyed this video and you want to see more just like this if you want to go ahead and make use of the VPS that we use today and as well for checking out our sponsors of today's video hosting Joe a couple of reasons why I would recommend hostinger not only are their servers extremely fast just like we saw today but they have a 99.9 uptime guarantee they have a really easy to navigate each panel and it's really really user friendly just like you saw today and if you ever get stuck they have 365 days of support all year round to go ahead and help you conquer the things you're tackling and there's a 30 day money back guarantee now if you want to leverage all of these things then feel free to use code sunny at checkout for 10 off of any of the packages it also helps out the proper fam so your boy appreciates it as always guys it's your boy sunny I hope you've enjoyed this one and I will see you in the next video peace why not check out my entire JS crash course over here especially if you're a beginner six builds in 18 hours pretty little video I'll click this right now go check it out okay peace

Channel: Sonny Sangha

Views: 25,953

Keywords: react, developer, reactjs, html, css, js, javascript, papa, papareact, papa-react, tutorial, frontend, webdev, dev, clone, backend, fullstack, motivation, reactnative, react-native, redux, typescript

Id: HIb4Ucs_foQ

Length: 28min 58sec (1738 seconds)

Published: Fri Sep 22 2023