Deploy NextJS Website From Scratch (with Ubuntu, NGINX and pm2)

hey there emmanuel here from web dev fuel and welcome back to this channel now in today's video you're going to learn exactly how you can deploy next js and xjs website to your own ubuntu server now what i mean by this is that by the end of this video you'll be able to know exactly how to deploy your next.js website without having to use versailles as a hosting platform now what are the reasons that you might want to do this one of them is because you'll have more freedom and more control over where you host your website if you ever want to move away from versal to another platform you'll have to start everything from scratch and learn exactly how they do things their way and how you can implement them in your own way now if instead of this you start by deploying your website to let's say the digital ocean uh lenovo google cloud platform or aws then you have the freedom to move around from different uh so you you can basically move from one hosting platform to another without having to worry about the compatibility between them and the second one is that reversal uh versailles in my opinion is a bit expensive uh for my use case so if you're for example freelancer if you have your own business or if you want to just publish your own website and you don't want to do it as a hobby they actually don't allow you to use their free plan and you have to pay twenty dollars per month per team member and that's a bit more expensive than i would expect it to be so that's why i'm teaching you in this video exactly step by step how you can deploy your next js website to your own server so with that in mind let's get started so i'm going to start here by sharing my screen uh and in this video you i'm going to be using digital ocean because is it is one of the most um it it is one of the cheapest ones around and you can also use lynode because that's also very very cheap you can start with a five dollar server but in this case i'm going to be using a twelve dollar one so let's go ahead and start by sharing the screen and now i want to show this right over here so let's get started as you can see we are here now in a digital ocean and if you go here to create and you click on droplets you're going to be able to create your own cloud server which digitalocean calls droplets lynnodes uh linux calls linux so whatever platform you're using this process is more more or less the same now as i've said you want to be using ubuntu as your as your your platform as your linux distribution because this is the one that most people use and it is one of the most stable ones that you can use so as you can see we're going to be choosing here the 20.04 lts version and this means that it is a long-term support version and it is more stable it doesn't have the latest packages but it is a lot more stable than the latest ones and you can as you can see here we can also choose here between the shared cpu and the dedicated cpu but because we're going to simply use this as the demo and if you don't have a lot of traffic this would also be the case for you you can simply go ahead and either pick here the regular ones at five dollars or 10 but in my case i'm going to pick here the premium and amd processors and with nmv the nvm ssd so with that in mind i'm going to pick here the 12 dollars a month one and then you need to go ahead and pick the data center region now because i'm in the eu and i don't want to transfer data outside the u or actually i want to transfer as less data as possible outside of the u because of gdpr i'm going to simply pick here frankfurt and this is also the one that's closest to me so this is going to be a lot faster for me to connect the ssh now the data center region that you're going to pick is going to be based on um the place where your visitors are going to be uh essentially visiting your site from so if you have a lot of customers let's say in the us you probably want to pick either here the new york or san francisco if you have a lot of customers let's say in europe you want to pick one of these so london netherlands or frankfurt and so on and so on but again for this use case i'm going to simply pick frankfurt because it is the closest to my location the next thing that you want to do is you want to set up the authentication and you can either go ahead and create here a root password that you can then access um use to access your server or you can also go ahead and simply use the ssh keys in order to access this now if you don't know exactly what ssh is and how you can set it up on your computer just let me know in the comments below because i can do a video in the future explaining you step by step exactly how you can do this so now moving on as you can see we're simply going to go ahead and create here a droplet the name it doesn't really matter i'm going to leave it as is and we can start by creating here the droplet all right so as you can see now this droplet was added to this project with which in this case is emanuel tourist.com and i'm going to just wait a little bit for this to get provisioned to boot up and to start um to essentially for us to be able to connect it via ssh so just a second until this actually gets done and all of this is ready we just have to wait a little bit more okay and now it is provision so as you can see we have here this ip address and this is the ap address that we're going to be using in order to connect to our server so i'm going to simply copy this address here and now i need to go ahead and share my terminal with you so for that i'm just going to come here go ahead and share my terminal and now you should be able to see the terminal all right so let's go ahead here inside the terminal and we need to ssh as the root user since we don't have yet another user besides the root and then we want to paste in here the ip address now this is going to ask you if you want to trust this source and we simply need to type yes and then press enter and as you can see now we are inside the server so just a few seconds ago i was um managing my own personal computer so i was running on localhost on this laptop that i'm using at the moment but now i've ssh into the server and now i have access to the server so if i ask here linux who am i as you can see i'm root and i'm not actually using the the computer that i was using before so this means that we now have access to our server now i'm going to just take a second here to look at my notes because we now can start by uh setting up the ubuntu server so the first step is to actually set up to ubuntu server and to start creating a username instead of accessing it via the root user now the reason we are doing this is first of all for safety reasons and second of all because it in linux um it is a lot easier for us to actually use a user and then use the pseudo command instead of always having to to use the root user which is very very insecure for a lot of different reasons now the first step that you want to do is you want to create your user and in this case my user is going to be called emanuel and as you can see it says here that it is adding the user adding the groups all that good stuff and you need to now go ahead and type the password and i'm going to try and not get it wrong and now as you can see here they ask us if this information is correct now i've i didn't go gone ahead and set up any full name room room number work phone we don't need any of that stuff so you can just print we'll press enter until this message pops up and now we can simply click enter and our new user was created now the next step that we need to take is we need to go ahead and give this user root access so basically then via the sudo command we can run commands as root but without having to log in inside a server as root now in order to do that we need to type user mod a and we need to press the flags a and capital g and then we need to add it to the group sudo and we also need to pass in here the user so this is a command these are the flags this is the group that we want to add this user to and this is the user that we want to add to the group so with that in mind go ahead and press enter and now this newly created user already has sudo access to this server now the next thing that we want to do is we also want to give ssh access to this user because when we set up just a second ago on digital lotion the ssh keys we've only gone ahead and set them up for um the root user not for this newly created user and each time that's where you create a new user that ssh key is not going to be uh translated or copied automatically to the new user you we need to actually add that manually so with that in mind we need to first of all go ahead and create a uh inside our home folder we need to create a dot ssh folder and be careful because this needs to be an hidden folder so because of that is that ssh and not just ssh so in my case i'm going to create here the folder inside home emanuel and then that ssh now the next step is for us to copy uh the authorized keys into this newly created folder so essentially when we created the digital ocean server what happened and i'm just going to show it here really quickly is essentially created here this authorized keys file and i'm not going to open it because it has my key it wouldn't really expose me to any any potential damage but just to be safe i'm going to go ahead and not open the file so let's go ahead and just instead of getting this file i'm going to simply copy this file and i'm going to paste it inside our newly created folder so let's go ahead and simply type in here authorized is so again we're going to copy this file inside of this folder now the next thing that we want to do is since we need all of these commands using the root user uh all of these files that we just created so let's just go ahead and cd here into this folder and as you can see not only the folder so here but also this file are owned by root and we want them to be owned by our newly created user which is emanuel so in this case i'm going to simply type here ch own you want to also pass the flag of r so that this is recursive so it looks for all the files inside this folder and also applies this to all of those files and folders inside that folder and we want to make sure that this is now owned by our user so let's go ahead and simply do this and this is now essentially uh made our newly created user the owner of this folder so again if we go ahead and we simply type this in here as you can see now it is emanuel which is the owner of this file and just a few seconds ago it was root now the next thing that we want to do is we also want to set up all of the permissions of this file now the folder the ssh folder and also the authorized keys file need to have specific permissions to avoid that file from being tampered with and from other using users messing around with it so the first thing that we want to do is we want to go ahead and type this chmod and then we want to pass here the number 700 and when we want to do this for this folder now what this means is that we're going to be able to essentially read write and execute this folder but only this user which means that all other users if we create in the future inside of this server are not going to be allowed to tamper with our ss.ssh folder and now we want to do the exact same thing but for the authorized piece so as you can see here the offers keys here has at this moment all of these permissions and we want to go ahead and type sh mod again but now we want to do it with 600 with basic which basically means that our newly created user is going to have only read and write permissions so let's go ahead and type this in here and do this for the authorized case now in this case actually this became the exact same thing but that's okay just to be safe we can go ahead and do this in order to make sure that the permissions for this file are correct all right so now the next step is for us to allow uh as a dssh port the firewall to flow through the ssh port so what i mean by this is we need to enable the firewall first of all to make sure that no uh that hackers and other bad actors are not trying to access our server via other ports and then we want to open the open ssh port which is the port 22. so in order to do that we need to first of all allow here using the um uf double package so i think this is this stands for uncomplicated firewall i need is a package that comes by default with ubuntu and then you simply want to type in here allow and then open ssh exactly like i wrote it here so the oh it has to be capital and then ssh also capital letters and then all of them are normal all of the others are normal so we can go ahead and type in here uf w allow open ssh and as you can see right now the rules have been updated and now we can go ahead and enable our firewall now the reason we are doing this and not the other way around is because if we went ahead and first of all enabled the ssh and only after the the firewall and only after that allowed the the ssh ports to be connected through then we would risk the losing access to our server because at the moment we are connected via ssh now this is basically everything that we need to do for the moment in order to be able to access it um access the server with all our newly created user so if you go ahead now we exit the server as you can see we've just logged out out of the server and if i replace this with emmanuel we should be able to connect to it instead of with the root user we are now connected to it with the manual user now we still have a couple steps left to do in order to make sure that our server is secure now the first thing that we want to do is we want to edit the following file so we want to edit the file inside the uh atc folder then ssh folder and then finally we need to edit the sshd underscore config so essentially what what we want to do inside of this file is we want to disable password access to our server so that we can only access it via ssh which means that bad actors again and hackers are not going to be able to try multiple passwords until they find the one that we are using and also we want to disable root password we can root access to our server because just like i said we want to be able to connect via this user to our server and then use the sudo command and disable completely the access of the root user via ssh to our server so let's go ahead and edit this file i'm using here vm and you also need to pass again the studio command in order to be able to edit this file because this file is owned by the root user so after you paste your after you type your password you just need to come down here and you can use in my case i'm using vim because i use it all the time to edit files and code but you can use nano or another type of terminal editor that you might prefer so again the first thing that we want to do is to disable here the root login so as you can see permit root login is now set as no and then we also want to search here for password authentication and in this case it already set no i'm not sure if digitalocean does it by default or if this is the default state of this file but just to make sure go ahead and also disable password authentication so now go ahead and save this file and now the next thing that we want to do is to simply restart using the system control uh command so we want to restart ssh and we also want to restart the sshd service so this essentially is a systemd service inside of ubuntu and we want to restart both of them the ssh and the sshd this is it for now this is all that we need to do in order to set up our ubuntu server so now we've gone ahead we've created a user we've given sudo access to the user we've copied the ssh keys in order to be able to access it and we've disabled the root access and password access in order to be uh to make sure that this server is by default the most secure possible now if we could have done a bunch of other different things and if you want again to learn about how to do this stuff let me know because i'd love to make future videos about this but this is everything that we need for now so now the next thing that we want to do is we want to go ahead and actually set up our um website so first of all we need to go ahead and update and upgrade our system and what this is going to essentially do is it is going to fetch all of the latest packages from the ubuntu server and then it is also going to bring upgrade our system with all of those packages so if we click here enter as you can see in this case digitalocean adds a bunch of different mirrors and also it go it goes ahead and also fetches from the ubuntu.com domain name so this is just a detail about this but it doesn't really matter if you're using linux you're going to see something different here in my case i see this but what you want to go ahead and doing is simply confirm this command and now as you can see this is fetching all of the packages and then this is going to upgrade our system with all of these packages so again we just need to wait a few seconds in order for this to be done okay so this is it now we've gone ahead and updated our system with the latest packages and also upgraded our system to those latest packages so we can now go ahead and set up everything around nginx pm2 and also install um yarn npm node all of those good things so the first thing that we want to do is since we've just upgraded our system we can now go ahead and install nginx which is what we're going to be using to serve our website to the public and then we also want to go ahead and since we're here installing this we want to go ahead and install cert bot which is going to allow us to generate a free ssl certificate and finally we want to go ahead and install this python free search bot nginx which is essentially a script a python script that allows us uh to interact between certbot let's encrypt and and in genex and it is going to allow us to do things like redirect automatically which is really really cool now go ahead and type this command and after we type this we need to confirm again and we simply need to wait a few seconds in order for this to be ready and for us to have installed uh start bot the python script to interact between nginx and also nginx so with this done we can now go ahead and actually create our folder that we're going to be using um to host our files our server our website and then nginx is going to look inside that folder in order to serve that to our users so first of all let's go ahead and simply type in here sudo make the make there so we want to create a new directory inside var then inside this folder right over here www and then we want to call this let's call this for example demo website so now we've gone ahead and created here a new folder inside of www and we want to navigate there in order to do the following thing again if we see here who owns this this folder that we just created it is the root user and we want to change that again to our current user so we want to type in here sudo ch own and then make this recursive and we want to do this to the demo website folder that we just created and now if you go ahead and see this again as you can see now our user the current user that we are logged in as is now the owner of this folder which means that we can make changes inside the folder and make changes to our website without having to use either the command sudo or be logged in as root which is really really great now the next thing that we want to do is we need to go ahead and create the initial nginx config file and i'm going to leave it in the description below the link for you to copy where in my case i'm just going to go ahead in here and just look here for a piece of code that i've created previously so i just need to find that out where i put that okay so it's here and now we need to go ahead i'm going to go ahead and copy this code and you'll be able to see it in just a second and now we want to go ahead and create inside here the atc folder and then we need to navigate to the nginx folder sites available so essentially what how nginx works is we have two different folders we have the sites available folder which is where we're going to uh add all the configurations all the different nginx configurations for the sites available and then we need to create a symbolic link so which is basically uh think of it as a shortcut so between these both of these files when we want to activate our website uh let's go ahead and do that so we're going to call this file also demo website and then we can go ahead and create this file and i'm going to paste this code in here so as you can see we have here the server block we're going to listen on port 80 and then we're going to define here our domain name now in this case i'm not going to use www and a normal domain name i'm simply going to use a subdomain so for this use case i'm going to write in here demo that webdevfuel.com and then i'm going to go over exactly what all of these things do so first of all let's go ahead and talk about here the gzip which is essentially allows us to compress our static files which is really great not only for speed but also for ranking higher on google and other seo platforms so if you go ahead and use something like page speed insights in order to check exactly what's not great about your page speed and what google doesn't like about your website in terms of seo you'll see that if you don't compress your files your static files they're they're not really happy about that and they shouldn't be because you need to compress them in order to make sure that your website is as fast as possible so in order to do that we need to go ahead and simply enable here the gzip so we need to pass gzip on then we need to make sure that all of the proxied um requests are um are have gzip enabled because as you'll see in just a second we are using a proxy server in order to essentially activate our website so we're going to use pm2 in order to to to run our website as a background service and then this is going to essentially proxy our website into the internet then we need to set up in here all of these types which is first of all application javascript then x dash javascript css and also text javascript so this is going to make sure that all of our javascript files and css files are all compressed next we want to make sure that the compression level is 6 and this is a value between 1 and 9 and i'm going to leave it as 6 because it is what most people use to be perfectly honest with you i'm not really sure what the perfect value would be but you can leave it at six or try different values and see exactly how that affects your website speed so what this means is that essentially each time that we want to compress our file it is going to take processing power and each time that we want to decompress our file it is also going to take processing power and we need to find the perfect balance between that processing power and between how much we need to compress this file in order to make sure that it is not sent over the the wire with a large file size so continuing as you can see here this is the buffers i'm not really sure what this stands for but on the end the next website they say that we need to add that in here and then we want to make sure that we also define the minimum length of the file so that so that we want to make sure essentially that we are not compressing files that are too small to compress and that then again we would have to use processing power to compress really small files and that wouldn't make a lot of sense now the next thing that we want to look at here is this location block and this location block as you can see it serves all of the requests that come here to underscore next and then static now the reason that we are splitting here between this location which is just the default path and the next static path is because we want to make sure that nginx serves static files in a different way from all other requests so essentially what we what we want to do is we want to make sure that we replace here with the the folder of your website that we just created earlier in my case it's demo website and then we want to pass in here this the hidden folder so that next and then static so this essentially means that each time that nginx receives a request so this path it is going to alias into this folder and send all of this data over to the person that's requesting our website we also want to make sure that this expires only after 365 days because these are static files they are usually not changed a lot over time and also next gs adds a timestamp to each one of them which makes it really really easy to make sure that each time that we change them that the browser knows that it is a different file and for that reason we can go ahead and only add here so we want to tell the browser that this file is going to be the same over uh one period one year period time and finally we want to disable the access log because things like javascript css images we don't really want to keep an access log off and finally we have here our location block as you can see here we have proxy pass which means that we're going to grab um our connection on localhost on the port 3000 which is going to be handled by yarn pm2 and xjs and then we want to reverse proxy this to our domain name over here so demo.web fuel webfuel.com and then here we want to set up the proxy http version now the reason we are adding here one 1.1 and not two is because nginx doesn't have http um two available for proxy and then we want to also add in here all of these things which are essentially for us to be able to handle uh our websocket connections now nextgs uses websocket connections for a lot of the features that they provide and for that reason you need to add these four lines in here in order to make sure that nginx can upgrade this connection to a websocket connection when connecting to our website so again this is everything that we need at the moment to make sure that our website is working now we need to go ahead and add our symbolic link between this file in here inside of the sites available and we need to create a symbolic link inside of the sites enabled so what that basically means is that we're going to add a shortcut to tell engine x that this site should now be available and actually before we do that let's just go ahead and remove the default site here inside of this folder because we don't want any conflict with the port 80 that it is listening on so after we do that we can just simply go ahead and type sudo ln and then pass the flag of s so we need to essentially create a symbolic link and then we're going to create here between the available and the enable so again we're creating a shortcut between these both both of these folders files actually so now with this in mind let's go ahead and simply do the following we need to now point our a records essentially from our hosting provider actually our domain register provider to this um to our newly created server so we essentially want to point this to the ip address so i'm going to simply go ahead and move back here to digital ocean which i think just cause an error so just give me a second yeah that's because it was actually suspended okay so now we can go ahead and move this here and as i've just told you we need to come in here and simply copy here this ip address of our server that we just created and we need to go ahead and point our a record to this ip address now i'm not going to show you exactly what i'm doing here simply because i don't want to expose my information i don't want to expose in this case my cloudflare account but i'm going to go ahead and try to explain to you exactly what i'm doing and then i'm going to show you exactly how this works and how the final result is in order for you to understand exactly what's going on here so just give me a second all right so i'm going to go here to dns checker i'm going to show you exactly what i mean by this i'm going to go ahead and share with you here this tab and i'm going to paste it in here so now here's exactly what i mean by this you essentially want to go either to namecheap if you're using namecheap if you're using cloudplayer so if you added your dns records and then you're using um your name server records actually and you're using cloudflare as your dns server you want to go to cloudflare so whatever the service is that you're using or if you're not really sure just leave me a comment in the description below i'll check it out and i'll help you um i'll try to help you and give you instructions on your particular platform but what i mean by this is that if we go ahead and type in here now where the fuel the demo.webdevfuel.com and if you search here as you can see all of these um so essentially this is pointing to our ip address that we just connected to so now this is done this is essentially what we need in order to point our domain name so in this case demo.webdefun.com to our website and we can now continue with setting up our website so i'm going to go back to the terminal and also just to make sure that you understand exactly what we did i'm going to log out and as you can see we've logged out here of this ip address and if i paste it in here it is the same ip address that i've just added to the a record now if you're using a subdomain you want to add the subdomain.yourdomain.com if not you want to simply add either add symbol so it depends again on the the service that you're using or you want to simply type in the domain.com that you've purchased and then you can start pointing your website to this server i'm going to go ahead and ssh again into the server and now we want to go ahead and simply restart nginx to make sure that the configuration that we've just created in here is now published so again each time that we need to make the uh some changes to nginx we need to go ahead and using the system control here the command we need to always restart nginx to make sure that it is fetching the latest configuration from our server so now the next thing that we want to do is we need to do is we need to go ahead and actually see the into our folder and then we want to go ahead and clone our website and i'm going to just go here and copy this thing right over here and i've actually just realized something i need to go ahead and first of all remove this folder so i'm going to use command now if this is not your case if you're using for example github using ssh i'm simply going to clone a github repository so that's why i actually need to go ahead and delete this and i'm going to simply simply going to get clone all right so i've just cloned this folder in here i'm going to rename it again to demo website since this is the website with the folder name of our website that we created and now i'm going to do again the exact same process and i apologize i understand this is a bit more confusing that it has to be but i'm going to again simply ch own or and then we want to pass in here our user and then the folder name so now here's exactly what i just did i just gone ahead i've cloned the website into this folder and i've also gone ahead and done the exact same process that we did before in order to make sure that our newly created user so the user that is now logged in is the current owner of this folder in order to make sure that we can make changes to it so now if we go ahead and we see exactly what the contents of this folder are as you can see it is just a bowler plate um nextgs template with typescript so this is nothing nothing that complicated i've just gone ahead i've created a new uh next gs project using typescript and i've simply cloned this which is a public repository that i've created so now the next thing that we need to go ahead and do is we need to actually allow um our firewall to receive connections via the 80 port and the 443 port which are essentially the ports that we need to be able to connect without an ssl certificate and with an sls ssl certificate now the reason we are actually allowing uh our firewall to receive connections via both of these ports is because we want to also be able to redirect from http to https and in order to make that happen we need to allow both of them so you simply need to paste in uh typing here sudo ufw allow and then nginx full and you need to add them here between quote so go ahead and type this and now if you go ahead and we see the status of uncomplicated firewall you can see here that nginx full is now um it now allows engine x and what this basically means full it basically means again just like i said it allows you traffic to flow through http and https okay so now the next step is for us to set up our website so we essentially need to install node and npm we need to also install the yarn because i prefer to use it usually and then finally we need to go in ahead and install pm2 which is the package that we're going to be use um be using in order to run node a node process as a background process in order to avoid having to manually look for the process kill the process and then do all of this complicated stuff instead of this we can just use pm2 then later we can simply rebuild our project each time that we make a change to it and then just simply restart our pm2 process and that makes it very very easy for us to be able to manage our website so now i'm going to go ahead and share with you here this tab so you can see here exactly what i'm doing and as i've just said here we're going to be using node version manager in order to be able to install node npm and all other node packages that we might need to be using in our system in the future so simply go ahead and paste here copy here this command and i'm going to show you again here my terminal and then we can navigate back to the terminal and paste this code in here and now as you can see if we execute our shell in order to make sure that all of the changes are published and we can access nvm we can simply go ahead and type in here nvm install dash dash lps and what this means is that we're going to be installing the latest stable version of node so again just like with ubuntu we don't really uh we are not really looking for the latest and coolest features but rather for stability so simply go ahead and type this in here and now as you can see it is fetching the latest node version and now we are able to use npm so if we type here this as you can see it says that we can install test remove do all of that good stuff so what we want to install now again is we want to install globally yarn and we also want to install pm2 and after a few seconds this is going to install and then we can go ahead and go to our folder and then start to building our project start fetching our dependencies and start actually getting closer to getting our website live so with yarn installed and with pm2 installed we can navigate back to our demo website folder and we can simply go ahead and type in here yarn so that all of the packages are fetched and then the they are installed inside of this project so it is going to be fetching all of the packages that you're using on your next js project and it is going to allow us to use them inside of this project so we just need to wait a couple of seconds for this to be ready and now we are almost over the next step is simply to build our project now if you're not really that familiar with next.js you're probably not aware of this entire process if you want me to do a separate video because the point of this video is to simply teach you how to deploy it you're not sure what build means uh what yarn is even just let me know again in the comments below i can do a video in the future and teach you all of that good stuff but with that in mind simply go ahead and type here yarn and build and then this is going to be fetching um this is actually going to be building our pro our website from scratch and it is going to um essentially grab our code either if it is on typescript or ecma so it is going to transpile our code into code that we can actually use uh on our website instead of just having a development server running our website and as you can see here it simply exports here a bunch of chunks so it essentially means that this exported our javascript files into into static files that we can use to serve our website and this means that we are now ready to start actually serving our website so the last command that we need in order to make sure that all of this is working is the following command so we need to type in pm2 and then start and then we need to tell pm2 exactly what we want to start so we want to use the yarn command as as a command so first of all we need to add pm to start and this command right over here and i'm trying to explain to you this way because this was also very confusing for me this is the command that we're going to run this is the pm2 command so this is separate from this one and then we also want to paste to type in here our name so i'm going to call this one demo website and finally we want to tell now pm2 what we want to pass here to yarn now since we've just built our um our project we don't want to use the dev um the dev command which is usually what we do when we are in development in this case we want to paste to type in here start now again this start is different from this one this start uh tells pm2 that we want to start something and then this start right over here tells yarn that we want to start this next js project so with this in mind simply go ahead and type this and i've actually forgot to add something in here before here the start we need to add in here uh two dashes so again this is going to tell pm2 to start then we need to pass in here yarn we need to give the name of uh our process and then we need to add two dashes before this start right over here because if we don't do this as you can see it is going to simply spit out an error so now go ahead and do that and this actually has gone ahead and created two so i need to simply stop the demo website and see exactly what happened and then i'm going to delete the demo website and again i apologize if i'm making a lot of mistakes but actually this is how being a developer and using servers and doing things is it isn't usually a very nice process it is very complicated but the point is that we need to look for errors learn how to to avoid them and learn exactly how to correct them and the reason they are happening now again let's go ahead and type this command in here and this has just started our website and now if i'm not mistaken if i go back to my browser in here and i type in here website and now i can simply go in here and delete all of these things since i don't need them anymore i'm going to now go ahead and share with you here our website and this is it as you can see we now have our website live and actually let me just go ahead and show you my entire window and not just the screen since i want you to also see that at the moment this is not being served via ssa ssl so via https but it is rather being served at the moment simply via http so i'm going to go ahead now and move this here and now if we move back here as you can see we have here our demo that webfuel.com and as it tells us here it is at the moment not secure and the next and the final thing that we need to do is because this is not at the moment being served via https we need to go ahead and make that happen so in order to do that simply go ahead and type in your terminal sudo cert bot and again we're using this package in order to generate automatically an ssl certificate which is 100 free and it is provided by the let's encrypt authority and now we need to place type in here the flag dash dash nginx and this essentially tells certbot that we want to use this in conjunction with nginx and then we need to pass our domain so we want to pass the flag d and then we need to paste we type in here we have the fuel demo that webfuel.com and again you want to replace all of this stuff with the domain name of your website so if i go ahead and paste this in here i'm going to simply add in here a domain name an email address actually so let's just go over exactly what they are asking us here so first of all we need to add in here an email address and i've gone ahead and added here hello at where the fuel.com you can add your gmail address whatever address that you usually use because again they are going to contact you for urgent renewal and security notices so with that in mind go ahead and do that and now they are going to simply ask us to agree with their terms of service and this second thing is if we want to receive uh let's say this is a marketing email so i'm going to simply decline this one and now this is going to verify that our domain name is pointing to this ip address and because we were able to just navigate to our website that means that the um our ip address is already pointing to the server so now this is gone ahead this has done the verification this has cleaned up the challenges and now it is asking us if you want to redirect from http to https and of course we want to because we want to make sure that all our requests to our website are secure so go ahead and type in here too and then simply press enter now we can go back to here to our browser and as you can see if we go here back to this as you can see now our website is served so this is everything that we need to do in order to deploy a nexus website now i understand that this is a bit more complicated and a lot more convoluted than uh using versailles but just like i said at the beginning of this video this process allows you to publish now a bunch of different let's say that you have um that your freelancer and that you have a bunch of clients and that you want to deliver websites to them if you would be using versailles first of all on the hobby plan it is only for hobby project and it would be against the terms and conditions to use that for other clients and then i'm not really sure how it works because you have to pay 20 dollars per month per user member which is uh it doesn't mean really make a lot of sense to me i prefer to just pay for the server usage that i have and that's why i prefer to use digital ocean and the cool part about this is that next gs is open source you can actually do this it allows you to do this and that's the idea behind open source is for us to be able to do all of this stuff by ourselves and the cool part also is that now if you would want to go ahead and add multiple websites to this server the entire process of setting up the server from scratch from doing all of the setup of ubuntu and all of that stuff wouldn't necessarily need to happen twice for you to do that and with a simple let's say twenty dollar a month um server or even the five dollar a month you can actually serve multiple websites if those websites don't have a lot of traffic and if you're serving let's say local clients with your web development skills so again this video taught you exactly how to do this if you have any questions if you need help with anything let me know in the comments below and also subscribe to get notified of future videos

Channel: Web Dev Fuel

Views: 22,545

Keywords: nextjs, deploy nextjs website, deploy nextjs, node, node.js, deploy nextjs with ubuntu, nextjs nginx, nginx, nextjs apache, apache, deploy nextjs linux, nextjs linux, nextjs devops, devops, nextjs lets encrypt, nextjs https

Id: DbREUJNgxqw

Length: 53min 19sec (3199 seconds)

Published: Sat Apr 16 2022