Deploying Nuxt 3 App to Digital Ocean Droplet with Dokku

in this video we are going to see how we can deploy a knjs website with the server and the front Ed part in droplet no versel no netlify bare metal and we will set up everything from scratch so if you want to know more about how you can deploy your website in any Cloud platform or any Linux machine in the cloud then this video is for you so without wasting time let's get started but before starting this video you should have digital ocean account or if you're using some other cloud provider then you should have the SSH access I would recommend you to go with digital ocean I'll give you my affiliate link uh if you go through that link you will get $100 credit to test your deployment so let's get into the coding part just a quick update this tutorial is applicable to all cloud provider be it lenoe be it AWS be it Azure or gcp you can apply the same method to all your uh cloud provider and in this video we'll be using a open source solution named doku doku is basically the open source version of hiroku but here you have to set it up on your own server and you will get all the features provided by hiroku for free you just have to bear the server cost and you can host n number of application it may be one application you can probably host two application you can probably host 10 application that's totally up to you and your server requirements first thing we'll do we'll clone our blog so I'll before cloning it I'll show you how it is working in the versal so this is the deployed version of the blog in veral and this is how we are expecting it to work in our own server so as you can see we have our blog we have a single page and you can see the blog content and we have the the categories page as well and if you go to click on the category each category will have its own archive page so this is what we have and this is what we are expecting our blog to be when we deploy it inside our next inside our digital ocean droplet so few features we want in in this uh deployment flow is we want a cicd pipeline we don't want to like every time go go to SSH and then upload the code and then deploy it again we don't want to do that we will create a deployment flow where we just need to push to the particular branch and then that would be uh taken by our droplet and it will build the uh project and it will deploy it without terminating the current uh website so the idea is pretty simple first we'll set up the droplet then we'll set up a cicd flow and with the help of uh doku we will be um having a proper server management solution so first thing I'll do I'll close this thing and I will clone the repository so that I can run it on my local computer and I see uh so that I can make some edits on it so iate clone and I'll paste that link and I'll go to the particular directory I will open it in code editor and what I'll do I will close this uh window so as you can see we have the code and now I'll open the terminal by going to terminal and then clicking on new terminal once the terminal is open what you need to do you need to install all the dependency and you need to run yanev in the meantime I'll close my uh item terminal because I don't need it I will be using the inbu terminal of BS code throughout the video so you can see our project started running but one thing I have to do I have to um copy the env. example file and I have to add the environment variable so I'll just quickly create a EnV file I will copy this example dot EnV variable and I will enter my WordPress API URL so it would be like this once that is done I will open it in the browser Local Host 3000 and you can see we have our blog running in our local environment now I want the whole whole wall to see my blog so few things we need before starting to uh do the deployment work is you need a active digital ocean account if you don't have a account I will give a link to the description if you go through that link you will get $100 uh Credit in your account so that you can test it and you need a domain name as well so we'll set up the domain name in this video in my last last few videos people have complained that I didn't add any domain name so right here you will get the domain name add feature as well so let's uh open our another browser I'll close this one and so I'll be using this domain name so make sure you have the domain name and you have access uh to your uh DNS setting so that you can uh add DNS record to the uh to your domain name it can be POG bur it can be go ID it can be anything so just make sure you have the DNS access for this video I'm going to be using one of my uh testing domain which is u. Guru I have this domain linked uh with a cloud flare instance so I cannot edit the name server from here I have to go to Cloud flare so if you have any domain with Cloud flare so make sure you change it from the cloud flare not the domain itself the bottom line is you have to able to uh you should be able to uh edit the DNS record so I'll close this one and now I will head over to uh digital ocean after going to the link you will see something like this now you have to create the account if you already have a account so in that case what you need to do you need to click on sign in and you can just sign in to your your account so I will just sign into my account so after signing in you will see uh the droplet option and you'll be able to see uh your previous uh droplets that you have created or your company have created so what You' like to do would would like to click on Create and then select droplets okay now you have to select a region so if you if your traffic is coming from USA then you can probably select New York or San Francisco if you are in Netherland you can choose the European data center as well since I'm from India and my location is Bangalore so I'll be probably choosing Bangalore but it is totally based on your requirements and your audience you can choose any particular location so we'll be going with New York for this video then if you scroll down a little bit you can see a option called Data Center you can select any data center you want since we don't have any other information about this data center I'll be just going with the default selected one and then if you scroll down a little bit you will see a option called OS and Marketplace and Custom Image although we can set up Ubuntu and then on top of Ubuntu we can use uh doku we can install doku and then we can do that but doku has a pre-built image uh with the combination with the Ubuntu so what we'll do we'll just install the doku image from the marketplace to do that click on Marketplace and then scroll down a little bit there would be a search option and inside the search bar just write doku so you'll see this doku click on it so doku is selected and you can see doku will come with Ubuntu 20.4 and if you click on the detail it will show you more details about this particular stack scroll down a little bit and you'll able to see the size of the droplet this is very important and you I want you to pay attention to this section so there are so the there are three options CPU option so you can either choose SSD NVM SSD or premium AMD I to my personal use I didn't find any uh differences on performance so I'll just go with the regular and I'll choose uh uh instance that has at least 2 GB of RAM I'll tell you why because your project will be running and if you are uh triggering a deployment at that time it needs some resources to compile all your typescript files so that's why it needs at least 2 GB of RAM although it will run on 1 GB Ram but I wouldn't recommend you because sometime it the build might fail so please make sure you choose at least 2 GB of RAM in any category just at least it should have a 2 GB of memory then you scroll down a little bit and you will see additional storage option since our application is totally a frontend app we don't need any storage now very important uh parts now we come to very important and crucial section this is where you set up your SSH key so I would recommend you to go with hsh key if you don't have hsh key already set up in your drop plate what you can do you can create new SSH key and then from your uh PC from your computer just paste your s key here so to generate that the documentation is already given how you can set it up so the chances are you already have a sh key in your computer so just go to h/ ID RSA Pub copy all the content from this file and paste it here since it's already a given here I'll will not be showing you it's very simple so I'll just close it and since I already have the SSH key set up and you can see the content of the SSH key I have already set it up so you'll click on that uh H key and we are good to go now if you scroll down a little bit we don't want any recommended add-on features so I'll just scroll down and here I will name I will uh rename it to my website name which would be URI do Guru Guru something like that I don't want to add any tag if you have multiple project and you need to differentiate it with the tags then you can do that so I'm almost done I'll be now clicking on create a droplet so it will take some time almost 1 to 2 minute and after that it would be done and you can SS to the droplet as you can see our droplet has been created now we can uh HH uh into our uh server so I'll copy it now I'll open the Domin again so in our vs code terminal I'll clear all our previous application logs and I will write hsh root at our host name which is the IP address so I'll just enter now I'll write yes and it would be added to our known host list and we are already inside the server I can prove it to you by showing the task panel by running htop command and you can see this is the resource from our server this is uh not our computer's uh terminal it is uh we are using from the digital ocean droplet so we have now access to our uh droplet now what we'd like to do we would like to go to access the access this IP address on the internet so let's uh enter and see what we are getting so as you can see uh uh it will tell you to add a public SSH key that we have already added with the digital ocean if you don't have that setup then I uh then I recommend you to please add the correct s H key so that from your uh PC you can trigger the build and the deployment so public key is added now I have to uh add the host name so what I'll be doing I'll be using a virtual naming of app so every app will take uh the previous uh the as a subdomain like how we used to do in doku so let's say you are adding an app maybe uh it is a paycheck calculator so in that case it would be paycheck calculator. u.g the main domain name so subdomain dot your main host name which would be in our case just this domain okay and this is how your app will look like so in our case it would be something like if our app name is WordPress then it would be like WordPress kn3 or press- 3. u. Guru so I'll click on finish setup and it is succeed okay and you can already see we have uh this error so I'll just close it this is from the uh documentation of doku not our from our side so I'll just close it and now it's a good time to set up our domain name and name server so what I'll do I'll go to Cloud flare so guys once you inside the DNS records you need to add two records so first of all I'll just copy the ipv4 address of my digital ocean droplet and I will go to DNS management I'll add a record the first record would be at the Domain record and it would uh point to the IP address of our application of our droplet and then I'll click save and then another would be a wild card uh record which would include asri dot sorry asri dot uh the name so it would be all it would take all the all the subdomain and it would point to the same IP address once we are done with that click on Save and I would like to add another one which will be G and if you have the proxy option then turn off the proxy otherwise you will so we would be adding this git option for the deployment and if you are proxying it then uh just to let you know Cloud flare doesn't allow you to uh hshh into uh with the proxy option so you have to turn it off so just for our uh personal users so we are done with the setup now uh it's a good time to check if it is resolving it might take on a two 2 hours so you might um have some tea or coffee or some breaks and then we'll see you once our domain is resolving to the correct IP address so it's been almost uh 30 minutes since I have added these records so let's check if it is uh giving us the correct IP address so we'll ping from our local computer and as well as the server inside the server as well so I'll write ping so as you can see we are getting back the result and it is giving us the local address because we are pinging inside uh the server so let's get inside outside of the server I will exit the connection and I will now uh ping from my local computer so you should write ping u. Guru so as you can see we are getting uh the previous address so I guess we have to uh wait a little bit but our g. Guru is giving us the correct uh URL so what we'll do we'll start preparing our application for the deployment but first let's get into the server and create the application inside doku so as you already know we are using using doku for our server management and the deployment so uh if you need to know anything about doku or you need any help you can just write doku in your SSH server and if you press enter you will get all the commands so what we are interested in is the command apps so we'll write doku apps then we'll add colon create and we'll give our app name in this case it it would be next blog so let's create it so I guess our app is created you can check that by going to doku apps then if you press enter it will show you all the available uh repositories so we are interested in apps list we just want to see what we have here so as you can see we already have our blog next blog so this will create a git repository inside the server and what we need to do we need to push our code to this particular repository and it will build it and it will add it to and it will deploy it based on our uh configuration so let's do that okay so let's get outside of our server and let's uh log into our local machine and add this uh get at this repository so I'll click on exit and we are in our local machine now from here we would like to uh add the repository so what we'll do basically We'll add a remote repository so we'll write G remote add doku at the host and you remember we have set up a git uh subdomain for that so I'll write just write git do URI do Guru and your app name so what was our app name it is KN Das blog so I'll add that and there is a problem so get remote add uh I have to give a name so the name would be the remote name would be doku okay so it is added now we have to do some configuration so let's go to our package. Jon and let's see if we have a start script so yeah we have our start script and we have a node just version mentioned in the uh package.json so if you don't have a nodejs version already mentioned in the package.json do one thing add a property call engines and set the node version to whatever the version it is running on your computer and then inside the scripts make sure you have the start uh start script set up and that start script should look something like this node and the output folder server index. MJS once that is done what I will do I will push it to the doku so it would be like get push [Music] doku then our current our local branch and I will map it to the master branch of the doku so this is the master Branch so our main branch would be deployed to the master branch of doku so I'll press enter and it will ask me for the h key so I'll press s and it would start building your app application so you can see it is already cleaning up and installing all the dependency so guys as you can see our application is uh deployed and it can be accessed through this domain I'm not sure if the DNS is correctly uh resolving or not but let's just try I'll copy this and I will go to my browser and I'll past it and you can see we have a error so so let's uh try to see what's the error is I I'm pretty much sure that we have uh some SSL issue so let's go to our Cloud flare account let's uh go to SSL and you can see we have full we have the SSL mode set to full so what that means that we origin server should also have a valid SSL certificate since we don't have a valid SSL certificate in our origin server it will not work properly so in that case we have to set flexible we have to turn on the flexible option and it should probably now work so let's give it a try uh I will go here I'll refresh and I'm seeing the same thing so let's probably uh try to Ping it so in my local computer go at very end and I'll ping and you can see I'm getting the previous IP address so it will take some time but it will work so let's uh try using in some proxy site proxy site and let's try to paste it and let's see if we are getting anything and you can see we are getting our blog now there is a problem we don't see any posts right but remember we have to set up our environment variable in our server because the e.v file uh is not included with the git so we have to set it up in our application so let's SSH into our application let's clear everything so that it's clear for us and let's uh find our remote address yeah so let's log into it and from here uh to set a environment variable what you need to do you need to write doku config colon set and then you have to uh you have to add the name of your application in my case it's kn- blog and then you have to uh paste your environment variable so copy that and paste it and uh it will be set so our environment variable is set now we have to uh uh I redeploy it uh once more time so it should probably work but uh just changing the after changing the Environ variable we have to restart the application so that's why what we going to do we're going to do some dummy changes and we'll redeploy the application so let's get outside of our server so I'll create click exit and we are back to our local machine so from this local machine now I will trigger another deployment since we have uh change the environment variable of the server so let's just change something let's just add some comment or something uh so the best way to just increase the version of the of the package D since there is no version I'm just going to add a version 0 uh 1 1 Z something like that I'll save I will commit it yeah so version added now I'll push it to our uh doku server so get push doku main colon master so it will trigger the deployment so as you can see it start it started deploying our application right from our local terminal okay guys so uh our blog is live so let's uh test it in our proxy site well our blog is now live with uh in our digital ocean droplet without any help of verel without any help of digital ocean app platform so it is a normal server so you can if you are using some different cloud provider for example lenoe or AWS or Azo you can follow the same method to uh deploy your next application now you might say jahid where how can I set uh a real domain name not like this something like subdomain I don't want any subdomain I want a website like yours J.D so how can you set a main domain to it it's pretty easy so what you have to do you have to hsh into your uh server so let's do that so so I SSH into the server and from here you will have option like let's write doku and you will have options like uh domains so if you go inside go one level down to domains then you will see a lot more option so you can see uh doku domains add then you have to set the app and the domain name name so like that you can add uh any domain name so I'll just try to show you how you can add a domain name for example let's say you have a domain name called jahid dodev okay so uh for that what you have to do you have to write doku domains add and then you have to write your application name so it's next blog and then you have to to give the domain name so in my case I'll be just giving jah. Dev although this uh this website is already up and with my content so I can't show you uh changing the things but I will show you how you can do for yourself so let's say this is my domain and if I click enter it would add the domain name and now what you have to do you have to copy your server IP address from the digital ocean uh and you have to add uh a record to the domain so uh like that you click on a record in your domain of course not in this domain so so let's say my J.D domain is from uh GoDaddy or something so I'll go to GoDaddy I'll go to DNS setting and then you have to select the type as a a record and then you have to give at so it would be your root address and then you'll write the IP address so once you do the add the IP address your domain uh uh will show this website and one thing to make sure right now we have Cloud flare so our SSL will also work but if you don't have a cloud fler then uh you have to set up the SSL certificate by your own if you want a tutorial on that how to set up SSL certificate in doku with next then please comment it down or if you have any problem setting up the whole deployment flow you can always join our Discord server it is currently free and you can join it right now yeah so uh let's uh wrap it up here I guess we have showed everything we have the page we can go to the blog page as well and everything is working properly we can deploy and uh yeah pretty much it that's how uh you deploy your next application in a Linux server with the help of doku with zero down time so if I am deploying right now my website wouldn't be down it would still be accessible by the internet so let's say if I make any change here I'll just have to uh push it to my doku repository and it will deploy and it will make the website live I hope after watching this video now you can also deploy your next application to a wide range of cloud providers if you have any question or any feedback then please use the comment section or join our Discord server I'm jahid I'll meet you in the next video till then stay blessed stay happy

Channel: Jahid Anowar

Views: 2,012

Keywords: digital ocean, nodejs digital ocean, node.js server, Nuxt 3, Digital Ocean, Dokku, Deployment, Web Development, Git, CLI, Scaling, Logs, nuxt 3, nodejs deployment

Id: AXW-YW1fSlI

Length: 31min 31sec (1891 seconds)

Published: Mon Apr 03 2023