Next.js Deployment to DigitalOcean with Ubuntu Linux and NGINX as a reverse proxy

foreign application and are finally ready to show it to the world discovering the concepts of devops deployments in Linux servers might seem intimidating at first but what if I told you that I can teach you the skills of deploying your website to digitalocean in just about one hour [Music] in this course I will guide you step by step in setting up and configuring a digitalocean droplet running Ubuntu Linux and nginx acquiring and configuring a domain for your application securing your Linux server using best practices and finally monitoring logs and managing server resources effectively ladies and gentlemen welcome back to the next Jazz deployment course I'd love to see what you guys have been working on so feel free to send me links to your projects after they are deployed now let's get to the point this lesson is here just to provide a more detailed overview of the things that we'll cover in the course first of all we will need an xjs project that we are going to deploy I assume that you already have one but if you are watching this just to learn the deployment process that's fine too for the purposes of the course I'm going to use an xjs example project template that they made officially available for everybody to use then we are going to jump into digitalocean and create a new Ubuntu Linux droplet we are going to connect to the server using SSH which stands for secure socket shell after we are connected the first thing that we want to do is adding a basic firewall to the server once we have a server ready we will also need a domain name for it I will purchase a domain for the project on namecheap.com but you can use any other platform such as GoDaddy Google domains HostGator Bluehost and so on then we are going to configure the DNS records of the domain to connect it to the server while we wait for DNS propagation we can use a chance to install and configure nginx and also install the packages required for the next.js project after that we are going to push the next JS app to GitHub in case you didn't do it yet but if your project's already in a git repository you can skip this step then we will clone the next JS app from GitHub onto the digitalocean server additionally we are going to need a process manager to always keep running the project a tool called pm2 can help us with this once that is set up we can start configuring nginx as a reverse proxy this means the tangent X will now be in charge of handling all client requests coming to the server and forwarding them to the next JS application after that we will be ready to enable https with SSL encryption ensuring our website is secure and finally we will need to obtain the SSL certificates and make sure that they are renewed automatically when they expire at the end I'll show you an easy way of monitoring logs and also managing server resources as a final step before starting the deployment process I want to go over the prerequisites of the course with you as the course title suggests this will be a guide for deploying specifically on digitalocean however it's worth mentioning that the steps used to configure the Linux server are always going to be the same no matter where the server is located so theoretically you could also use this course as a guide for deploying somewhere else other than digital ocean and the only differences will be the parts in which we use the digital ocean dashboard like the lesson of connecting the domain to the server for example as far as the requirements of the course go they should be fairly simple first you are going to need the digitalocean account and since digitalocean doesn't offer any servers for free you are going to need a billing method set up on the account and then you will also need an account on the platform where you plan on purchasing the domain in my case I'm going to be using namecheap.com but this is just a matter of personal preference you will also need a GitHub account but this should really go without saying because you probably already have one finally you will need the next JS project that you plan to deploy as mentioned before if you are watching this just to learn about the process it's still fine and you can use the same project as me for this purpose I'm going to use one of the example projects that nexjs offers that's it the requirements are out of the way and we can finally start before we start setting up the server we actually need an xjs project for deploying I assume that most of you are watching this course after you have already completed your project and are ready to publish it however if you don't have a project you can just follow what I'm doing I could just create a new project but I wanted to resemble a real project and not be empty for this I can use the dash dash example flag while creating the project I'm going to open a terminal window and navigate to the desktop then I'm going to use the npx create next app command along with the dash dash example flag and after that you need to input the name of the example project that you want to use I'm gonna go with the blog project then it's going to ask you for a project name which I'm going to set to next Dash demo it's going to take a couple minutes to download all the files and install the packages after it's done I can navigate to the projects directory and use the npm Run Dev command to start the project locally then I'm going to navigate to localhost 3000 in my favorite browser to check it out looks like the project has a few pages and most importantly it's running without any errors now we can move on to the next step which is going to be creating the Linux server on digitalocean open up your favorite browser and navigate to digitalocean.com you should already have an account with a billing method set up but if you don't go ahead and create one right now after you log in expand the Project's drop-down from the main menu on the left hand side and click on new project for the name I'm going to enter udemy but you can choose whatever you want description is not required so I'm going to skip it and for the purposes drop down I'm going to select website or blog but you can choose whatever best suits your project I'm going to skip the next step for now after you are done you'll be greeted by the digital ocean project dashboard with a bunch of different options we are going to click on spin up a droplet for the region you can choose whatever is closest to you and the potential users of your website I'm going to select Frankfurt Germany after that scroll down to the operating system section and make sure it's set to Ubuntu with the latest LTS version selected LTS stands for long-term support by the way then we are going to scroll down to the hardware selection again this is going to be based on the type of the project that you want to deploy if you build some complex web application for example you'll probably need more resources in case you need help choosing the right Hardware digitalocean actually created a decent documentation here that can help you the good thing about it is that you can scale up or down at any moment depending on your needs all it takes is a server restart for the purposes of this course since you are deploying something really simple I'm going to choose the cheapest option for the authentication method let's choose passport and make sure you remember it after you are done you can check out the summary at the bottom to make sure everything is right you can also change the name of the droplet if you want and you can see the monthly price at the bottom if you are happy with everything click on create droplet it's going to take a few minutes to initialize after it's done you will become the proud owner of an Ubuntu Linux server and you'll be able to see its IP address right here this time you are going to use SSH to connect to our newly created Linux server as mentioned before SSH stands for secure socket shell and is basically a protocol that allows us to communicate with the server securely even if you are using an unsecured Network in order to get started copy the server's IP address from digitalocean then open up your terminal use the SSH command and after that we are going to input which user we are connecting as we will connect as the root user and then we'll separate it with at and paste the address right here SSH root at address the first time you are connecting is going to warn you about connecting to an unrecognized server just input yes and press enter it's not going to ask you again for this address then input the password that you have chosen when creating the droplet on digitalocean if you don't see anything while typing don't worry it's just invisible keep typing and when you are done press enter once you see the welcome to Ubuntu message you have successfully connected and you might notice that my terminal has now changed to root at Ubuntu which means it's now remotely inside the server and we can use it to execute commands there as you are about to see the first thing that we want to do with the server is set up a basic firewall because it's very simple and it will help us keep the dropboard secure use the sudo ufv app list command to show all the available firewall options by the way quick fact Sudo is a Linux command that gives us administrator privileges which are needed for making critical changes it stands for super user 2 so technically the correct pronunciation is sudo but everybody I know pronounces it as sudo and I'm gonna do the same because I like it also because it's a male name in Bosnia actually a great name to call your dog in case you want to listen to your commands we are going to allow certain options and the firewall will simply block all the connections that are not white listed you can see that the only option we have for now is open SSH we are going to use the sudo ufv allow command to allow SSH connections to the server making sure we can still connect to it from the terminal again once the fire will stop then we are going to use the sudo ufv enable command to make the firewall active finally you can check if everything is okay by running the sudo UFC status command you can see that the firewall status is now active and that it allows SSH connections we created a server and connected to it now it's time to purchase a domain for it my domain Marketplace of choice is namecheap.com however you can buy your domain wherever you prefer most of these websites are very similar as part of the requirements video I mentioned that you are going to need an account on namecheap so if you haven't created it yet go ahead and do that right now after you have logged in go back to the home page and search the marketplace for a domain you would like for your project let's say that for this project I want a domain that includes next demo you can see that domains for different tlds can have vastly different prices for example nextdemo.io cost 40 dollars per year but dot tax YZ costs just one and a half choose whichever domain you want I'm going to go with the cheapest one once in the cart I'm going to disable automatic renewal but you can keep it on if you are going to use the domain for more than a year then I'm going to proceed with the checkout after my purchase is complete I will navigate to My Account dashboard find the domain I just got and click on manage I want to be able to manage this domain through digitalocean and we need to add the digitalocean name servers to achieve that keep in mind that if you used another platform to buy your domain the domain management UI might be a little bit different but in general you'll still be able to find the same options somewhere in the name servers section where it says namecheap basic DNS change that to custom DNS we will need to add three name servers ns1 ns2 and ns3.digitalocean.com when you are done click on save with this we basically finished with namecheap let's go back to digitalocean now click on the green create drop down in the top right corner of the page and select domain slash DNS enter your domain in the add domain section and make sure the right project is selected once you hit the add domain button you will be taken to the domain records page we will need to create two a records here for the first one enter at in the host name and select the server you want the domain to point to this is going to be our Ubuntu server from the previous lessons for the second one we will do the same thing except the hostname will now be www it's probably going to take a couple of minutes for these changes to take effect this is called DNS propagation while we are waiting for the DNS changes to propagate we are going to install nginx on the server nginx is an open source web server that can be configured in a lot of different ways specifically we are going to configure it as a reverse proxy but I will explain what that means a little bit later you might notice that if you didn't touch the remote terminal for a while it might become unresponsive that's because it will time out the connection after a few minutes of Notting happening you can simply close the tab and connect to the server in a new one if that happens first we are going to make sure all the other packages are up to date by running the sudo apt-get update command then we can install nginx with the sudo apt-get install nginx command it will tell you which packages are going to get installed and ask you if you want to continue simply type Y which is short for yes and press enter many tasks you which Services should be restarted simply press enter once nginx is installed we are going to adjust the firewall settings again if you use the sudo ufv app list command you will notice that now we have nginx as an option we are going to allow nginx HTTP for now since we don't have https enabled yet use the sudo ufv allow nginx HTTP command make sure you put the name in quotation marks this will white list all traffic coming to Port 80 through the firewall which is basically all HTTP traffic again you can check the firewall status with sudo ufv status and make sure nginx is allowed now we are going to use the system CTL status nginx command to make sure the tangent X is running and you can see that it says that it's active right here press Ctrl C twice to exit this another way to make sure everything is okay with nginx is by grabbing the server's IP address from digitalocean and pasting it into our browser if you see the default nginx page you are good to go another thing that we will need for the next Jazz project is a node package to install it use the sudo apt-get install node.js command again it's going to ask for your confirmation simply enter Y and press enter when it asks you for restarting the services again press enter then install npm with the sudo apt-get install npm command we will also need to install ubuntu's build essential package with sudo apt get install build essential make sure that the node and npm packages are installing correctly by using the node-v and npm-v commands this would output the versions of the installed packages respectively we are going to push the next Jazz project into a GitHub repository in case you haven't done this yet but if your project is so ready in a git repository you can safely skip this lesson by the way it doesn't have to be public a private repository is fine once you are on the home screen you can create a new repository by clicking the green button in the top left corner of the screen enter a name for your project and set the visibility to private then click create we are going to grab the https repository URL open up a new tab in our terminal and navigate to the next JS project then we can use the git remote add origin command and paste the copied URL now you can simply use the git push command to transfer your changes to the repository if it complains about the Upstream just copy the command below and paste it into the terminal again if you refresh your GitHub repository now your project will be here The Next Step will be cloning this project from GitHub into the Linux server let's start by connecting to the server using SSH again if enough time has passed and the DNS settings from before have propagated you should be able to use the SSH root at whatever domain you got instead of copying the IP address all the time actually this is because whenever you go to a domain let's say udemy.com in the background is being translated to an IP address using DNS and if you remember in digitalocean we set up the domain to point to the server so the domain and the server's IP are basically the same thing now the only reason that we have domains is because it's more comfy telling somebody hey check out my new website at udemy.com instead of hey check out my new website at 104.18.106.64. domains are basically human friendly IP addresses let's get to the point now once you are connected to the server you can see what kind of files we have there by running the ls command as you can see it's basically empty we only have the snap file which can be completely ignored since this is a private repository somehow we will need to let GitHub know that it's us trying to clone the repository to a server before we could just log in through the terminal by using the username and password but now unfortunately GitHub removed support for this and we need to do it using an SSH key let's generate an SSH key pair on the server by using the ssh- Keygen command with Dash T RSA Dash b1496 this is a specific key format that is required by GitHub press enter to keep the default key location press enter again to use it without a passphrase and once again to confirm when you are done navigate to the Keys location which if you are in the home directory is going to be dot dot slash root slash dot SSH if you use the ls command here you will see that we have two key files ID underscore RSA and ID underscore rsa.pub the first one is private and should always be kept only on this machine the second one is the public key and we want to copy it we can use the sudo Vim ID underscore rsa.pub command to open the file with veeam in case you didn't know Vim is just some sort of text editor for the command line then we can just select everything from the file with your cursor and copy it to the clipboard using control plus c then you can close Vim by typing column Q exclamation mark and pressing enter then let's go back to the server's home directory by navigating to dot dot slash dot dot slash home or simply typing CD tilde confirm we are back in the home directory by using the ls command again revealing the lonely snap file now with the SSH key on the clipboard let's go back to GitHub click on your profile icon in the top right corner of the page and select settings then click on SSH and gpg keys and create a new SSH key paste the key we copied from Vim into the key text area and add whatever title we want for it I'm going to call it next demo Dash server once you have added it make sure it's on the list of authentication keys now let's get back to the repository and grab the Clone command make sure you switch it to SSH before copying now go back to the server and use the git clone command followed by pasting the repo link type yes to confirm and press enter if you use the ls command in the home directory now you will see that the next.js project was added let's navigate inside the folder first we are going to install the Project's required modules by running npm install then we are going to run the development version of the project and if you get an unexpected token error like this is probably because your node version is too old to check it type node-v you can see that I have node version 12 installed but nexgs increase the minimum node version to 16 with the next js13 release we are going to update to the latest stable version by using npm type sudo npm cache Queen Dash f then we are going to install the end package globally with sudo npm install GN then we are going to upgrade node with sudo and stable now we need to close the SSH session and open up another one if we check the node version with node-v again you can see that node has been upgraded to version 18. if you try to run the project in development mode now we shouldn't be getting errors anymore seems like everything is running just fine now press Ctrl C to stop it now we are going to use npm run build to bundle the production ready version of the project The Next Step would be running the production build of the project just like we run the development version however we need to keep it always running even when we close this remote session to achieve that we are going to install a process manager called pm2 first go back to your servers command line navigate to the home directory in case you were in the project directory before and then we are going to install pm2 globally by running the npm install gpm2 command navigate back to the project folder to run the application with pm2 use the pm2 start command and the dash dash name equals to your project name then we are going to write which package manager we are using which is npm in my case after that we are going to add just two dashes and finally we are going to add the name of the script we use for running the production version of the project which is start by default in xjs so the final command should look like this in the table below you can see that the pm2 process was created and that it's online then we are going to use the pm2 startup systemd command which will make sure that pm2 gets restarted automatically whenever we restart the server finally we are going to use the pm2 save command in this lesson we are going to configure nginx to be used as a reverse proxy what this means is basically that nginx is going to intercept each request that's coming to the server on Port 80 and after interception the reverse proxy is going to navigate the incoming request to the next JS application instead which will respond with the HTML and JS needed to display the page to the request sender to get started in the server's command line navigate to slash Etc nginx sites Dash available which is the nginx sites folder if we want to delete the default nginx page first if you use the ls command you can see that the default site is located here as deleted by using the RM default command Now navigate to slash Etc nginx slash site stash enabled and do the same thing here deleting the default site now let's go back to the site's available directory one more time we are going to create a new site by using the sudo touch command followed by the name of the site which is going to be exactly the same as the domain you got for your project in my case nextdemo.xyz after that we are going to open the new file in a text editor similar to Vim this one is called Nano and it's a little bit more intuitive he was a pseudo Nano command followed by the name of the file right now the file is empty so let's start populating it first we are going to open up a server block which kinda looks like a Json object but not really then we are going to specify on which Port is going to listen to twice the first one is for ipv4 connections and the second one is for IPv6 the next line is going to specify the location where static files are served after that we need to specify the default index file which is going to be index.html followed by all the fallback options the next line is going to be one of the two most important lines of this config it specifies the domain on which the requests are going to be handled we need to add one plane domain and the second one with www in front the next block of configuration specifies how exactly the requests are going to be handled the first line is the second most important part of the config it basically means that each request on Port 80 coming to the previously specified domain they will be redirected to localhost 3000 in this case localhost represents the Linux server and if you remember we are running the next GS application constantly in the background with pm2 on Port 3000 the remaining parts are not so important and we can skip those explanations basically configurations for caching and sockets after you are done writing the config file press Ctrl X then press y to confirm and press enter to save now we are going to create a symbolic link and enable the domain with the configuration we just wrote use the sudo ln-s slash Etc nginx slash sites available slash whatever your domain is and then the destination will be slash ATC slash nginx sites enabled slash to check if everything is okay navigate to the site's enabled directory and use the ls command if you see your site here the symbolic link was successfully created finally to avoid memory issues in the future we will want to modify an option in the nginx config open a file in Nano using the sudo Nano command and the file location is going to be slash Etc nginx nginx.com now scroll down under HTTP and you should see a commented out option called server names hash bucket size the only thing that you need to change here is uncommented by deleting the hash in front press Ctrl X press Y and then press enter use the sudo nginx Dash T command to make sure we didn't make any syntax mistakes in the config accidentally at the end we will need to restart nginx for the changes to take effect use the following command for this sudo systemctl restart nginx congratulations you are now a proud owner of a reverse proxy server now you should be able to navigate to your domain on HTTP and see your next.js application in the previous lesson we managed to get our next.js project up and running but it's only using HTTP for now this makes our website unsecure if you were using an untrusted Wi-Fi to access it or you happen to be a target of a man in the middle attack the attacker would be able to sniff the packets being sent between you and the website which could potentially reveal all kind of information from you to stop this we are going to upgrade the transfer protocol to https preventing these Shenanigans from happening go back to the server's command line and install a package called third pot by using the snap install searchbot-classic command then we are going to update all packages by using the sudo apt-get update Dash y command after that we are going to install the engine X searchbot by using the sudo apt get install Dash y Python 3 third bot nginx after everything is installed we can modify the firewall settings again we are going to allow both HTTP and https requests with the sudo ufv allow nginx full command we can then get rid of the Redundant HTTP rule with sudo UFC delete allow nginx http after the firewall is configured we can move on to obtaining the SSL certificate used by https we are going to use the new third bot packages to obtain them and they will also handle renewable automatically when the certificates expire use the sudo Search bot Dash Dash nginx Dash D whatever your domain is Dash D again www dot whatever your domain is command this will obtain the initial SSL certificate enter your email agree to the terms and decide whether you are willing to share your email you can also use the dry run feature to simulate the renewal of expired certificates and make sure everything goes good for this use the sudo third bot renew dash dash dry run command after everything is done you should now be able to access your Nexus project securely when it comes to deployment we are already done can you believe how easy that was after deploying a website the usual problems that I encounter are things that I missed while developing the next JS app or maybe things behaving a little bit differently in the production version debugging in production can be really painful and time consuming however having access to live logs of the web app makes it a little bit easier and it's certainly great to have when you are dealing with pesky bugs that came out of nowhere in order to access live logging go back to your servers command line use the pm2 list command to find the ID of your website's process in my case the ID is zero then use the pm2 monit 0 command if you keep this on whenever an error or warning occurs from the next JS project you will be able to see it right here and easier figure out what's going on the second common thing that I had to deal with after deployment is making changes to the project let's say you change the home page of your next.js app and you want those changes reflected on the live version don't worry you don't have to clone the project again or anything like that simply push your changes to the GitHub repository and since the server is already connected to your GitHub account with the SSH key you can simply navigate to the projects directory and use the git pull command to load the latest version to the server after that you'll need to use the npm Run build command again and after it's done you can again find the ID of your process by using the pm2 list command as you already know for me it's zero so I will use the pm2 restart 0 command to restart the process and apply the latest build version finally the last problem that I tend to encounter is a lack of server resources specifically I tend to run out of RAM memory especially if I'm running more than one project on the same droplet or if I'm working on a complex application if you want to increase the hardware power of your server you need to do it from digitalocean open your projects dashboard page click on the droplet select power and then turn the server off as you cannot make any hardware changes while it's running then click on resize here you can adjust your Hardware resources according to your needs I usually end up increasing it one step at a time and checking the results in action until I'm happy

Channel: Armin Sarajlic

Views: 1,507

Keywords:

Id: K80NC60gQOE

Length: 37min 31sec (2251 seconds)

Published: Wed Sep 20 2023