Next.js 14 Deployment to VPS with GitHub Actions CI/CD

hey welcome everybody in this video we're going to deploy a nextjs project on a virtual private server we'll use the power of GitHub actions and Leverage The GitHub action Runner to establish continuous deployments triggered by GitHub code commits and I almost forgot to mention that in this video we will install the latest nodejs version onus pm2 as a process manager under a separate user account then we will install and set up engine X so we can reverse proxy to our nextjs website and finally we'll point a domain name to the server and set up SSL certificate before we get started I wanted to try and draw a very basic diagram of what is going to happen in this video and I've already changed the diagram like a million times but hopefully this one will be okay so essentially in the first step we're going to be creating a very basic nextjs application from there we're going to use GitHub in order to have Version Control of our project and also it's good for collaborative software development now when we create project each project will have its own actions action is the platform that is going to help us automate the software builds so we are literally going to make a list of actions that we want to do in order to be able to build our project now in order to publish our website we need a web server in this case in order to host a website we're going to have an abunto server now in order to connect our obuntu server with our GitHub project here we're going to install a GitHub Runner this Runner is basically going to be installed on obun to server and it's going to allow us to talk to our project and then do the actions you will see in the video that when we connect our runner to our project we be able to see whether the runner is either in or offline inside or project here on GitHub so that's how it's going to work and the last step would be here a user makes request and here we're going to be using engine X to reverse proxy to the server and grab the website from Port 3000 and when this step is done basically the user gets a response and that's it I hope that you find this diagram useful and enjoy the process hey welcome everybody and let's get started so for today's video we're going to be using github.com in order to do the continuous deployment if you haven't yet go to github.com and sign up for free I've already logged into my account so I'm going to go to the dashboard of GitHub so zoomed in and then from here we need to create a repository so let's click new let's give it a name I'm going to choose r- VPS as virtual private server for the description I'm going to leave it empty and my repository is going to be private I'm not going to create a read me file because nextjs comes with one and then for the G ignore we're going to select node because we don't want to be uploading all the node files onto GitHub and the last thing I'm going to choose is the license form project and this is going to be MIT let's click create repository and here we have a brand new project for this project I'm going to be using GitHub desktop but feel free to use the command on line if you wish to push and pull your project manually and if you go to desktop. github.com from here you should be able to download it for Windows Mac OS and I believe that there is also a version for Linux if you wish to try it out it's nice to have but you don't need it you can just use the command line if you wish to the first thing that we need to do is if you don't use the GitHub desktop just make sure that you clone the project locally so you can work on it in my case I'm going to go on get a desktop and from here on the drop down menu click on it on the add drop down menu here click on it one more time and then select clone repository let's find the repository that we just created so ready- VPS and let's select it and I'm going to save this in C drive GitHub D applications r- VPS and clone if I open this in the Explorer super quickly you should see that I have exactly the same files inside here as the ones on my GitHub repository which means that I've successfully cloned the project and now we can create a brand new nextjs application I need to create create the nextjs application inside this folder so I'm going to do left shift right click open in terminal if you're use a Mac or Linux you can just CD to your project folder where you wish to create it and now we need to create on xjs project so MPX create Das next- app at latest and in order to create the project inside this project folder I'm going to do dot slash and press enter if by any chance you missed this last bit and it creates a new folder for you you can always grab the files and put them into R VPS but you might need to install your modules one more time would you like typescript for this project I'm not going to be coding anything so I'm just going to put the default options in here that I have so typescript no es link no TN CSS yes Source directory yes up router yes import alas no and that's it as you can see the project is being created in this folder which is great but as I said if you created a new folder for you just grab the files paste paste them inside here and just do npm install to install the modules and you should be good to go let's test the project super quickly so I'm going to do mpm run Dev and let's copy the Euro and as you can see our project is now working on the port of 3,000 I'm going to open this super quickly in Visual Studio code so left ship right click open in terminal and I'm going to do code period enter and this will open Vis stud code with the project on the left side here now the only thing that I'm going to change inside the project page is this here instead of this I'm going to put by obuntu and save so hopefully this should refresh by BTU and we're good to go anyways this is was just a quick test to see where everything is working now the real reason that I opened the project inv Visual Studio code wasn't to change the logo here but to talk about the EMV file so normally your project will have a EMV file where you store all your secret keys and so on so I'm going to put env. loo and you want to be able to add all of your variables inside GitHub I'm going to create a new one nextore website URL and this is going to be equals https sl/ and then website.com maybe this is something that you're reusing throughout your entire application obviously you probably have secret keys and you want to be able to upload them on GitHub uploading the actual DMV file it's not safe to do especially if your project is is public on GitHub you don't want to do that and I'm going to show you how we can transfer them but first what I'm going to do is go to the GitHub application here and then push the changes so I'm going to do init as initial deployment and then commit to main push origin and this should push absolutely everything except the EnV file so if I go back to my GitHub page and refresh you should see that we have the nextjs project in here without the MV file which is exactly what we want normally the EMV file is ignored by this file here so now let's have a look at how we can transfer all variables if we go to settings and then here on the left side you should have secrets and variables click on this and then click on actions from repository secrets we need to create a new one so click new repository secret and we need to give it a name so in this case we basically grab the nextore website URL and we paste it in here and no secret goes inside here so I'm going to copy my sec secret and paste it okay if I add the secret you will see that or variable name is now here and you should be able to use this variable name now throughout your project and one thing that I wanted to show you is that if you go here and and edit this secret so I'm going to edit it you will see that the value is now gone so you can definitely update your value you can create a new one but your initial value is gone and this is obviously for safety reasons so that all good and if I go back we have all secret key I didn't update it all good let's go back to code the next step would be to create our virtual private server for today's tutorial I'm going to be using digital Ocean and the service that I'm going to be using is in the product and then compute and it's called droplet so if you click on this it basically allows you to create a VPS virtual private machine that is also scalable now we're going to be using obuntu in this tutorial which means that you can PR pretty much do this on any other provider that you wish you can use Amazon you can use a Raspberry Pi if you wish whatever you like feel free to shop around see what's best for you and your needs and you should be able to follow along as long as you use auntu if anybody decides to use digital ocean I would appreciate if you use my link below this is not sponsored in any way it will just help me a lot if you use my link below that's pretty much it now let's log in and here on the left side you should see droplets so if you click on droplet click create droplet from here select your region that you wish I'm going to choose London because this is the closest to me from choose an image there is a big Marketplace that you can choose images from but today we're going to be using the buntu with the version of 23.10 NX 64 let's scroll down choose size I'm going to go with shed CPU which is the cheapest and then if I scroll down a little bit more for the CPU options I'm going to go with the regular disc type SSD this is going to give us even cheap options and the one that I'm going to use is the $6 per month one and this is actually fitting in the minimum abunto requirements which are one GB of CPU 1 GB of RAM and 2.5 GB SSD so this fits as of minimum but if you use another provider and there is a cheap option I wouldn't go for it because you might struggle so definitely go with something like this or bigger of course if your project requires it so let's scroll down a little bit more and from here we need to choose authentication method now the easiest method would be to go with password you can just select a password and you can log in with root using SSH now the problem with passwords is that they can be brute forced and technically speaking you might be able to restrict your IP address from the networking tap in here I haven't tried it but you're most likely going to be able to do that but the safest option here is to go with an SSH key and I'm going to show you how to set up this so it's up to you which way you want to go I'm going to do SSH key and I've already got one inside here but I'm going to create a new one so I'm going to click new SSH key and then from here we need to follow the instructions so here on the right side it says follow these instructions to create or add SSH key on Linux Mac OS and Windows Windows users without open SSH can install and use py instead let's follow the instructions so I'm going to copy the SSH key gen here and we need to open a terminal power shell whatever you have so I'm going to open the terminal here and I'm going to paste the command to generate a new key pair so right click ssh-key gen press enter and this is going to generate the public private RSA key pair and you can name them if you wish but I'm going to leave the default name which is idore RSA press enter give it uh enter passphrase I'm going to put my name ready and press enter ready and press enter and this should generate a nice art for you which you can print and attach to your wall J aside let's go up and you will be able to see that your identiy has been saved in C uses range. SSH ID RSA so I'm going to copy this so obviously if you're on Linux or Mac it's going to be different but I'm going to copy this go to my PC and paste it inside here and we need to search for SSH and then here the private key and the public key the public key basically haspb at the end and that's it so let's open this and let's copy the code from here the entire thing and let's close it let's go back to the website here and paste or public key I'm going to paste it and for the name I'm going to say radis desktop PC and then I'm going to add the SSH key now that we've added the SSH key let's scroll down and they say we recommend these options I'm going to click on the at improved Matrix monitoring and alerts because it's free and then feel free to choose whatever else you need and scroll down a little bit more for the host name I would strongly suggest you that you change this so I'm going to put r at least to know what it is because when you create multiple droplets it it will get confused in which one is which so definitely give it the name give it a few tax which will make it easier to find and that's more or less it let's click create droplet all right this should take 20 to 30 seconds and I'll be back okay or virtual private server has been created and if you click on it super quickly and inside the dashboard you should be able to see your IP in here which you can use to SSH now one thing that would suggest you do is to reserve an IP and the reason for this is because if you ever need to power down this instance and create a new one you can quickly deach the reserved IP and attach it to your new instance so that can be quite helpful and if you do it I would suggest you to do it now so I'm going to enable it and I believe that it's free I don't think that it cost anything so I'm going to assign reserved IP okay or IP has been assigned as you can see it's still doing it but uh if I click on droplets and click on my droplet you should be able to see that we now have the reserved IP in here let's copy the IP and let's open the power shell so I'm actually going to be using this power sh in here and just clear everything let's try to connect to this IP to a server using SSH so in order to do this do SSH and then root is the username that we want to connect with and then add and we paste the IP in here now if you want to see what's going on behind the scene you can put- V and this will show you everything that's happening so I'm going to press enter all right and we need to type yes press enter enter passphrase that's ready enter and as you can see we are now inside or obuntu server using rout and then rtu and so on also this has been added to the to the known host and next time I try to connect it won't be asking me any other questions so if I was to close this and if I do right click open in terminal super quickly one more time and if I do up this is going to be SSH rout at the IP press enter and then it's going to ask me for the passphrase ready press enter and we in all right before we start setting up or open to server if you haven't managed to uh login by any reason obviously maybe pause the video try to see what's going on you can put- V after the IP here to see what's going on but also there is another way so the other way would be to go in your drop and the actual droplet has a console on its own so if you click on this it will open the console and you'll be logged in as rout here we go connected and it will be exactly the same as if I was to SSH from my computer and you can continue using this as well if you wish to it's really up to you so this is definitely an alternative way of doing it I'm going to close this I'm going to close the SSH folder as we won't need it and let's open the connection to our server all right the first thing that we need to do is to update the outdated packages and dependencies on our system do Pudo as super user do and then AP update press enter and this should take a couple of seconds to get the latest packages now we need to do pseudo a upgrade Dy and this is going to build everything on the server we just need to press enter and then okay one more time perfect the next thing I'm going to do is create a new user and the reason I'm doing this is because at some point in the future you might end up uh having multiple users and you might want to have uh different nodejs versions whatever you might want to be able to install different package versions for specific user I'm going to clear this just so you can see a little bit better and then to add a new user instead of root we can do add user and then the username goes in here so in my case I'm just going to put rally this is the user that I want to add and the user has been created we need to put a password for this user I'm going to put my password of password and then retype the password of password okay everything is looking good full name I'm just going to put R Dev prenter room room number all right from here I'm just going to press enter I'm not going to feel any of this information and then is this information correct yes press enter and we have the info added to the ready user one thing that I'm going to do now is to add this username to the super user do group so I'm going to do so we potentially won't have to do pseudo on every command that we do but if you ever struggle to install something if you don't have the permissions you can always do pseudo and then uh do the command so in this this case let's try this user mod a g and then PSE sudo and then the username of R because we're still using the root username although that we created a new user we're still using the the root username and basically the a option stands for pending this user to the super user do group and the g flag basically stands for group which group do you want to add this username to and the group that I want to add it to is pseudo that's pretty much it I'm press enter if we do PWD PWD you should be able to see that we're currently using root and now this is very important we need to switch to the newly created username that we created which is r in this case so in order to do this you can do pseudo switch user su- ready and now you'll be able to see that we're getting ready at runto and the rest so before was root and now it's this is going to be important because when we run on OJs we want to be running it from ready later on otherwise the GitHub actions might not recognize the process I'll show you later on all right this is all looking good so far if I do LS let's see where we are it doesn't really show anything all right since we're still on the server I think it's a good time to install the packages that we need so I'm going to clear this one more time just so you can see a little bit better okay now let's inst the first repository which is going to be no JS in order to do this let's first of all do pseudo a update one more time the password for R is password press enter and this is going to do the updating the next thing I want to do is to install the latest node JF now if we go to the browser super quickly the great thing about digital ocean is that they have articles for pretty much everything and if you scroll down on this tutorial super quickly maybe I can paste this somewhere as well so you have it but basically you have a couple of options to install nodejs and the one that I'm going to be using today which I found the easiest was this one here so using the node version manager this was the easiest one I found but uh to be fair I think they're all equally easy so what I'm going to do is copy this line of code here paste it and if you wish you can post the video and copy the URL and press enter let's go to the second line here I'm going to copy it and paste it okay and then I'm going to go to this line here copy paste let's go to the next one copy paste and this is going to list all of the nodejs versions that we can choose from as you can see which is amazing and now we need to choose the one that we want and I believe that with nextjs 14 app router the minimum was around 18 um around 18.7 I believe maybe around here but obviously I want to use the latest one so what I'm going to do is latest currently on my PC I'm actually using this one here so I'm going to do the same VM install and then the version so V 20. 10.0 press enter and this will install no j now let's do NVM list and hopefully you should be able to see that the default nodejs version is now set to v2.10 point0 which is awesome now let's install pm2 I'm going to clear this let's go back to the browser and search for pm2 in Google so pm2 dokey metric. this is actually great it's basically a nodejs process manager and it's super easy to install basically I'm going to copy this but let me show you super quickly what you can do essentially you can run multiple applications on your server and they have a lot of like really cool interfaces that you can use such as this one here to monitor your processes the commands are very easy to use like list your command your processes stop restart delete and so on so this is what I'm going to be using uh there is probably I think that there is a paid version for it but we're going to be using the free version which is absolutely fine I've been using it for a while and it's awesome so let's go back and let's do right click so mpm install dpm2 g and- g for globally I'm going to press enter and this should take a couple of seconds all right now that we have everything that we need let's go back to GitHub and create all application Runner so I'm going to close everything here and go back to GitHub all right the next step would be to set up an action Runner so if we go to actions and then Runners and then here we should selfhosted runners if you click on this let's click on new Runner and now we need to create a new self-hosted Runner and from here we need to choose Linux 64 architecture is fine and we need to run the following commands on our server in order to be able to connect GitHub to our server and then do the continuous deployment okay so I'm going to zoom in a little bit in fact I'm going to put this on the right side all right because the menu is not collapsable I had to put this at the bottom but essentially this we connected to our server using ready and we need to follow the instructions from here so where it says download let's start copying so this is going to create a folder for us MK the actions do Runner CD actions Runner press enter and we are inside this folder here and now we need to download the latest Runner package copy right click to paste it press enter this should take a couple of seconds now we need to validate the hash let's copy right click enter here we go and now we need to extract the installer copy right click enter perfect let's scroll down to the second bit here which is configure create Runner and start the configuration experience so I'm going to copy this right click and paste it as you can see we getting authentication enter the name of the runner group to add this to Runner press enter for theault I'm going to press enter enter name of the runner okay press enter enter additional labels I'm going to press enter to skip and Runner successfully added enter name of work folder I'm going to try to put this as default as well I'm going to press enter and we should be good to go and now the last thing that we need to do is to run it so potentially if I do LS you should be able to see that we've created a lot of files here and we need to just run this run. sh so I'm going to copy the command and right click to paste it runsh connecting to GitHub everything is looking good connect to GitHub yep listen for jobs perfect now one thing that you might want to notice here is the Second Step here using your selfhosted Runner when we create yo file we need to put this runson self hosted which I will show you okay one thing that I wanted to show you about the action Runner now that we've connected it to GitHub let's go back to GitHub super quickly click on settings and then here under actions you'll see Runners click on that and then you should be able to see your server inside here and the status should be idling if I was to close this contrl and c and now the runner has stopped running and if I was to refresh the page here on GitHub you'll be able to see that this is Now offline if we ever need to rest start the server I want this to be able to restart as well so we don't have to do Min so I'm going to do control and C to exit this if we do ls-1 we can see all the files inside this actions Runner folder so the First Command that we need to do is sud SVC Dosh install press enter password for ready was password okay now if we do sudo SVC Dosh and then status you should be able to see service enable present enabled active inactive de okay that's cool and now we can do sudo do/ SVC Dosh start okay and now as you can see we should have active active running and the last thing that we can do if you wish to you can stop it by doing stop in instead but we don't want to do that so let's leave it as it is let's go back to the browser here refresh make sure that this is idling which is great from here let's set up our workflow click on actions search for node and the one that we want is this one here nodejs by get up actions click configure and then let's remove the comments because it's already hard to see inside here but I can't zoom anymore and let's have a look into this so the first thing that we have here is the project name I'm going to leave it as default and then the second action here is on push so when we push changes to GitHub project essentially it's going to run everything else and as you can see it's looking for the branch main you can also make different branches such as development prediction and so on and when you push Chang to them you can deploy your project in this case I'm going to be using the main branch so every time I push changes to the main branch it's going to run the rest of the file and for pull request I'm going to remove this because I don't want anything to happen when I do pull requests so let's remove that jobs build runs on obuntu earlier when we set up the action Runner the instructions there were to change this to selfhosted so let's type self-hosted this is important and then for the strategy Matrix nodejs version we need to select the nodejs version that we installed earlier in this tutorial paste inside here let's remove this comment as well we don't need it we can also pull the EMV variables here so by doing EMV column here is where we can list all of our EMV variables by using the name so in this case EMV variable was called Next website URL here we go and then the value you do column and then the value can be taken from GitHub by doing dollar sign curly bracket curly bracket see Dot and then the variable name so nextore website URL and then close this with the two c brackets and this comes from settings put this on the mdle tab and then this is going to be under secrets and variables actions and it comes from here so the value is going to come from here what else do we have okay so we have different steps and everything else in here is absolutely fine except we don't want the test for testing purposes all I want to do now is run those actions build the project and don't do anything else we'll come back to this later on Adit changes put whatever you like and commit the changes if we go to action super quickly you will see that we already have a workflow running so if I click on it this might take a while but if I click on it one more time hopefully click click one more time here we go so this is what I was looking for so it's going to start the jobs it's going to run the actions it's going to use the note version that I set up manually and then it's going to continue doing the rest okay I might have to speed up this part because it will take a while okay and our first build is complete and it's done in 1 minute and 37 seconds which is awesome if we pull this fetch everything pull everything and if I go back to my project and click on GitHub workflows nodejs yamu essentially we got up to here where we built the project and if I do LS to list all the files and do - one this will list all the files line line when we created the actions Runner we created a work folder here which is where our project should be so if I do CD underscore work and then let's do LS one more time-1 we have pipeline mapping actions temp tools and then we have R VPS which is awesome so this comes from GitHub if I do CD rvps this should be your project if you do ls-1 I don't fully understand why it does two folders so r- VPS and then r- VPS not sure why but we need to go one step further so so CD R dvps press enter and now if you do ls-1 you should be able to see all of your project files so we have the Tailwind config The Source the public the packages and so on if I do see the source and then ls-1 you should be able to see app and then if I do see the app and then D1 oh CD app firstes of all and then ls-1 you'll be able to see fiveon Globes layout page and so on which is exactly the same as our project our project has been built and finally we should be able to run this project okay let's clear this and let's CD back to this folder here so CD backwards once CD backwards one more time here we go so as long as you in the project folder and if I do LS one more time with one this is the project photo so from here we need to start a new process just like you do mpm run de we need to start the website which normally is mpm Run start so if I go to if I go to package.json you will see that we have next start so we need to run this script inside or bu to server so website is running and it's probably going to run on Portal 3,000 in order to do this we're going to be using pm2 which we installed ear in this tutorial so we're going to do pm2 start mpm M Das Dash which is going to give us an option of doing name unfortunately it goes on another line because there is a lot to it let me do that okay that's a lot better I think and now we can choose the name for the process and in this case I'm going to call it next JS close this and then we can do das Dash start and then Das Das watch let me zoom in back here we go that's what we need and now if I press enter you will see that bm2 start it and we have a newly running process here it says that it's online watching is enabled which means that if the server for some reason crashes it should restart automatically and it's using the user ready which is great and yeah that's pretty cool if you go back to or instance here and if we click on our resered IP and if we go to the browser and type the IP and then P to 3,000 press enter as you can see project is working which is great now there is one more thing that we need to do first of all if I restart the server this process will most likely stop and and we'll have to do it manually so we don't really want that you might want to restart your server at some point and you want everything to run seamlessly and just work we can do pm2 let me zoom in and then startup press enter to setup startup copy paste the following command okay so we need to copy this command copy right click to paste it press enter password for R was password okay that's looking good and now we want to be able to freeze this process so on reboot it will start it so freeer process list on reboot via pm2 save press enter saving current process list successfully saved in R pm2 dump. pm2 that's pretty much it all right now if we do pm2 we should be able to see the process that is running so now let's try to shut down the server and see whether we get the service the action Runner working and also let's see if we get the pm2 also working if I go to the browser super quickly you will see that the website is working and now let's shut it down shut down and fail to schedule shutdown okay maybe soon shut down and here we go the system will power off in literally one minute and then we'll see how this goes so if I refresh on the website now still working I'll wait a second and then I'll refresh in about a minute to see what's going on okay the server should be shutting down even the processor even the CPU changed here a little bit so if I refresh okay so the server is now down is Switched Off the website will not work here we go it's already you should just go blank in a second and then or action Runner here if I refresh is also offline so now let's put the server back online and this should take a probably like 30 seconds or so to start all the services and I'm hoping that the pm2 will start automatically and the website will work and also I'm hoping that the server worker here will start automatically without us having to do anything else so let's wait and see all right let's try to refresh this maybe it's already done okay we're still offline and it's idling okay it didn't take long maybe like 30 seconds and as you can see the runner is idling which is amazing and now if I go back to the website the pm2 is also working so the process is also working but we should be logged out from the console because the server closed the connection okay awesome let's clear this up and let's reconnect to the server by doing SSH route and the IP address I'm going to put my passphrase I think it was ready for me press enter and I'm already back on the server all right now technically everything is working here if I was to change something on the project let's say we go to the page get started by editing so I'm just going to say hello world uh Local Host is going to restart here and if I do super quickly loc a host of 3,000 you will see that we're getting hello world and some other stuff in here maybe I can just remove this code here we go just so we get Hello World on its own and we have Hello World okay now if I was to push this to GitHub let me go to the action super quickly here we go this is the first action that completed but if I was to push this code to GI this change say updated home and then commit to Main push origin should take a second and now if I go back here I probably need to refresh and here we go this has picked up the new job which is updated home and now it's going to go through the entire process of building the project here we go using NOS wearing the project and so on so this should take again probably like a minute to do and then we'll set up the rest of the project okay perfect our second build was also completed but now we need to change one more thing inside here if I was to go to the project and refresh you should be able to see that we're getting the latest changes and this is the live website now one thing that we do need to change here is inside or no jsjs yo file where we have mpm run buildt we also want to add one more line and this is so or pm2 process restarts or starts the project so if I do pm2 list you will see um pm2 list is because okay this is a good thing actually I'm logged in with root and that's why I cannot see the pm2 list so I'm going to have to switch user so let's do clear and let's do pseudo switch user to dash ready and now if we do pm2 list we should be able to see all the current running processes one important thing is that when we push changes we want to select this process here and restart it so this process has an ID of zero so in order to do this we can go here and then do dash run and then pm2 restart and we restart the process of zero like so we want to do that but also in order for this to work because we can only run the command pm2 inside the project directory we will need to find the project directory and change the folder so inside here I'm going to do name and then say change directory and to change the directory we can do run CD and then we change the directory from here and it's going to be home I believe slash r slash action Runner Dash and then the website name so let me have a look because I actually don't know the full thing so I'm going to do right click can I not do that okay it's not let me do that so let's do CD slome SLR SL action Runner actions Runner press enter and now we have the work directory okay so it's going to be CD underscore work and then we have the r VPS R VPS okay so let's do that so this is actions Runner and then underscore work and then SL rvps SL rvps and now if I do this let me try to paste it here we go and now we should be in our project directory and if I do LS this is where project is and this is where we can restart the PM process so when we CD to this project folder we should be able to run mp2 restart in order for this to happen I would definitely suggest that we push this and then we wait to see what happens so I'm going to push this change to restart process pm2 restart process zero I'm going to definitely Commit This and retest everything just to make sure that everything is working before we do the next things so I'm going to go back to the website actions here I'm going to wait for this to happen and then once we are done we'll continue okay the process is done if I click on name click on the job click on build scroll down to the bottom somewhere it would say oh here we go PM run PM restart zero and hopefully yeah everything is looking good if I go to the console and if I do pm2 list you should see that this is still working and which means that our website is also still working all right the next thing that we need to do is to point a domain name to this IP and then we we can create the SSL after so so my domain name is located under pog.com I'm going to sign in from here obviously every domain name register will be slightly different but the settings will be exactly the same I'm going to select my domain name which in this case happens to be r. LOL I got it really cheap for here and then I probably won't renew it but essentially what we want to do is scroll down to the bottom and find the record as you can see I have two records here which I want to to remove so I'm going to remove both of them like so let's go to the top here where we have the record I need to go back to my server here and get the reserved typ so I'm going to copy this go back to my domain name and we need to add two records the first one is going to be an address record or a record and then it's going to be blank so this is going to be basically r. LOL and then the answer will be the IP address that's it all we need to do is add it and then this is going to be added here at the bottom and also I need to add one more so again a record but this time we're going to add an alias it's going to be basically www dot in fact we don't need the dot because we've got it here so we adding www and then the euro is there and we just need to put the answer to be the IP address of our server again click add and now at the bottom here we should be able to see two a records and sometimes the records might take a while to propagate so that's some that you might want to check and I'm going to grab R the low and look for this IP on the NS lookup search for NS lookup let's choose the first website here put r. low find NS records and as you can see pick up digital ocean and we have exactly the same IP as here which means that it propagated in literally like no time which is pretty cool so I won't have to wait it's it's already done and of course I can put www. F records and this is also propagated which is awesome if I go to the URL of r dot if I go to ready. low and press enter nothing will happen but if I go to r a low of 3,000 you will see that the website is actually working which is pretty cool now let's set up a reverse boxy so we don't have to do do the port 3000 and we also set up the SSL all right let's go back to the command line and let's clear everything and normally you'll do exactly the same thing as in the beginning of the tutorial you'll do pseudo a update if anybody's tuning in now put the password of password that's for me okay and now we're going to do pseudo a and we're going to install engine X like so would you like to continue yes and now to see the status of engine X can do system control by doing CTL and then status and then engine X press enter and if you see this everything is looking good here okay engine service a highly perform web server and reverse proxy server if I was to go to r. low and press enter I'm hoping that we get welcome which is awesome so engine server is working and now we can just do reverse proxy to go to that port number okay let's go back to the command line clear everything and from here we need to create a custom configuration block so we don't edit the default directly and in order to do this we can do pseudo and then we need to do Nano Nano is the editor by the way and this is going to be etc etc engine X and then slash sites available SL available and then the domain name I don't know if you'll be able to see I'm going to do this and then the domain name is going to be ready. low in my case and press enter this is going to open the editor and then inside here we're going to have to copy and paste a little bit of code and feel free to post the video and basically we have a server which listens on Port 0 and then we need to change the server name here to ry. low and then [Music] www r. low and this is very important thing that we need to change in here is the proxy Pass App server address so in this case we are going to need to do local host of 3,000 which is where our nextjs website is working on and the included proxy parameters you can check out in the folder Etc engins proxy params and then you have the proxy set headers inside there which you can edit if you wish to I'm not going to do any of this all right and now we need to do control and x and this is going to say would you like to save the modified files press Y and this is going to save it as here r. low as you can see at the bottom and press enter and we should be good to go so this file should be saved inside here and now we need to enable this configuration file by creating a link from the sites enabled directory that engin reads at startup so sudo ln- s and then the folder is ETC dasing sites available sl. low and then we do etc etc slashin slash sites enabled and then slash and then we press enter okay that should be done we can take test the configuration file by doing pseudo engin DT okay and we have a error and I believe that we're going to have to open the sud Nano site available. L it might be because I've put I haven't put HTTP here SL Local Host so I'm going to do control and X yes press enter and now if I do sudo j-t okay syntax is okay everything is okay here so it was just the HTTP that I forgot and the last thing that we need to do is restart so sudo system control restart and then engines press enter and now if I go back to the browser put r. LOL as you can see our website is working we have AOW World by abunto here which is pretty cool and now we just need to install the SSL so so I'm going to go back to the command line here and let's do sud sudo a install sbot and then python python 3 and then sbot dings press enter would you like to continue yes okay let's clear this and now we need need to go to pseudo Nano Etc enging site available and then r. L make sure that you have your domain name in here I've already added mine I'm going to close this with control and X make sure that you do pseudo-t one more time everything is looking good and now we just need to obtain aert by doing pseudo serot d dasing - D and then r. low is the domain name and then- d www. r. low is the other domain name so press enter email address okay so I'm going to put my email address press enter yes yes one more time and now this is going to go and request certificates for R.L and www.l and as you can see the ceric ific at was issued and it was saved in the etc etc let's encrypt live ready. low and then full chain. pm and yep everything is looking good successfully deployed the certificate congratulations you have successfully enabled htps on R the low and R and the www domain name so if I refresh automatically as you can see this went to https and now we have a valid certificate which I can see here uh connect connection is secure and I'm not and here we go certificate is valid if I click on it should see somewhere around here but uh but yeah that's pretty much it and just to test everything one more time let's go back to the project let's edit the page and let's put hello world V1 for example save this and if I go back to GitHub desktop and if I commit this push it's going to take a second and if I go back to GitHub here let's see the actions you will see that we're getting update page.js this is obviously going to take some time to build and hopefully after this is done we should be able to go to domain name and see the change of our website and that's going to be it okay and our build is completed so if we go back to the website here R it Al low we should be able to see Hello World with V1 refresh hello world with V1 which means that everything is now working correctly if I was to reboot the server everything will restart and your application will just start as soon as your server is ready and that's pretty much it it was a tough tutorial to do because there is a lot of variables around I hope that you find it useful consider liking this video and subscribing to my channel and hopefully I'll see you in another video bye

Channel: Raddy

Views: 2,173

Keywords: nextjs, react, nodejs, automate, github, ci/cd, continuous integration, continuous deployment, github runner, github actions, nextjs 14, vps, deploy on vps, deploy nodejs

Id: fkzpywlJcMA

Length: 52min 31sec (3151 seconds)

Published: Mon Dec 11 2023