Deploy Vue.js App And Node.js API To Digital Ocean Server

hey what's up my under in here and today we are going to deploy a VJ s app and then OJ's API on the digitalocean Ubuntu server now guys this is my first youtube tutorial so if anything goes wrong just go easy on me guys alright before you get started we need a VJ s app and then no J's API working together before you can deploy them on the digitalocean ubuntu server so I went ahead and created a simple project with a VJ app and in OJ's application with a V J's up fetching simple data from the node.js application let's go ahead and run them see how they run up okay all right application has finished launching now let's go ahead and run it in browser control click and there we go so it has one button that tells you to click click to fetch data from API so in a click it says it says that because we have not yet launched the API now let's go ahead and launch the API open a new window for the API look for it open it and also launch it not APA DOJ's since we are running it from this file the APA - Jase that's why we specify it here then enter yes server listening on port 3000 so when you come back and click again you see finally just fished our data from the API all right since that is done the next point is to deploy it to them digital ocean 2.2 server now what is the key to ocean the data ocean is a unique cloud hosting provider that offers cloud computing services to business entities so that they can scale themselves by deploying digital ocean applications that run parallel across multiple cloud servers without compromising on performance these are the reasons why developers love digital ocean one it has an aesthetic and nofas user interface to its performance is remarkable since it is one of the first providers of SSD based virtual machines and it utilized ipv6 before other service providers even considered it 3 its documentation is comprehensive concrete and very resourceful for its pricing is affordable first of all the basic plan is set at $5 per month and the choice of early and monthly payment options makes it very affordable for small startups and individual software developers to adopt their platform 5 it offers an active digital community that helps in answering queries in holding feedback discussions so everyone can benefit from them dakedo oceans provides us with droplets now digital ocean droplets are flexible linux best virtual machines that run on top of virtualized hardware each droplet you create is a new server for you now that we have our VJs app and no J's API it's time for us to deploy them on the digital ocean ubuntu server so we shall go through two steps the first step is create a digital ocean account the second step is create a droplet on the digitalocean account now if you don't have a digital ocean account go ahead and use this referral link to create an account and if you use this link you'll be credited with 50 dollars for 30 days and guys it's extremely free to create this account they won't ask you for a penny all right go on open a new tab and paste in your referral link yes it will prompt you to enter your full names email address and create a password or you can sign up using Google and github and after this step it'll prompt you to enter either your debit or credit card details or PayPal just for building sessions in the future all right since I already have an account I'll go ahead and sign in yes after signing in it say it has a default project but you create a new project now since I really have two projects I'll go and run one in horses are negative this is how your new project should look like it'll tell you get started with a droplet yes go ahead and get started with a droplet now we are creating a droplet that is going to hold our API and VJs application so you can choose any distribution any you can choose 0.2 or FreeBSD or fedora Debian or sent toys but we are going to use the Ubuntu 18 although you can also choose other versions shall choose Ubuntu 18 since it's still stable and it will choose for you 40 dollars per month by default but you can still down grid and for this case I shall use $5 per month no shall not add a storage block yes you have to choose a data center and it's advise that you choose a data center that is closest to you and I will choose London to be closest to me I shall no selectees choose one time password and now this will prompt digitalocean to send a one-time password to your email right then it come down here create let's choose a hostname this hostname is better for it to be visually and clear let's call it you know it's one droplet you can go and create as many as you want but for this case which operate one nano times one all right go ahead and create a droplet threaten boom all right I'll be back when it's done creating yes now our droplet has created successfully and it is time for us to connect to it remotely and you're going to use SSH to do that I'll go ahead and copy this IP address come open your terminal for Windows users use putty come here and type in SSH root Pat contra shift V to enter the IP address and then enter the best user go ahead and say yes all right so we've been added to the list of known hosts now it's time for us to enter the password now go ahead and open your email to get the password yes it's here in droplet yeah the Bussard is here copy the password come back here in the Tomino then control shift V to paste it there enter Oh permission denied did I copied wrongly let me go back copy it again ah okay whoo now since we told it to give us a one-time password it will prompt us to change the current password and create a new password so for us to do that we still paste the current password contra shift V enter and then we go ahead and create a new password retype it enter all right now we are in our droplet is successful go ahead and clear the terminal now since we are done creating the droplet successfully and we've accessed it successfully in time enough it is time for us to install nginx into it what is engine X engine X is a web server which can also be used as a reverse proxy load balancer mail proxy and HTTP cache now engine X is one of the most popular web servers in the world and it is responsible for hosting some of the largest and highest traffic sites on the Internet all right because engine X is available in a bundle default repositories it is possible to install it from these repositories using the apt packaging system since this is our first interaction with the apt packaging system we will update the local package index so that we have access to the most recent package listings then after that we can install nginx all right let's go ahead and update sudo apt update turned the train thing if you see me dancing alright it's done updating now it's time for us to install nginx pseudo pseudo act install nginx go ahead and say yes all right so you've successfully installed engine X before testing engine X the firewall software needs to add to be adjusted to allow access to the service and remember engine X registers itself as a service with a firewall upon installation now this makes it straight forward to allow engine X access now let's go ahead and list application configuration that the firewall knows using this command let's first clear the terminal let's list the application configurations using sudo ufw the file sorry SoDo UFW app the list you should get a list of application profiles now these in genex full nginx HTTP Ingenix HTTP and OpenSSH now you may not know this but engine x4 opens both port 80 and port port 4 4 6 8 is for no more unencrypted web traffic in 4 4 6 is for TLS / ssh encrypted traffic now nginx HTTP opens only port 80 that's for normal unencrypted web traffic then nginx https opens only port 443 and you remember that but for this case we shall allow engine X HTTP since it's the one you're going to use let's run the command sudo ufw allow it's single quote nginx HTTP close quote enter all right rules have been updated and we can verify the status by running sudo ufw status oh it's inactive the file is inactive listen about it SoDo ufw in a book command may disrupt existing SSH connections bla bla bla just go ahead and say yes alright file is now active and in the border and system stirred up yep so let's go ahead and run the status this active and you can see is now allowing this anywhere alright after enabling this let's go ahead and check if the server is running successfully nginx so system CTL status engine X and well it should be running clear well let's end it with contra see now let's go to the browser and taste it let's come back here copy this IP address since it's Dona running the droplet copy IP address if I scroll this done paste it in here then enter voila our web server nginx is running successfully and this is a check in guys remember this is the server that is going to help us serve the DJ's application now there's no application yet on the droplet that is why it is running this engine expelled by default now let's go ahead and deploy our VJ s app and the node.js application on the digitalocean Ubuntu server we shall start with the V J's app for us to deploy any application on the digitalocean Ubuntu server we need to first push it to a git repository manager like get lab or github and then go to a droplet and pull it from the gate lab git repository manager it's now time for us to push our V J's application to the git repo that's a good lab for now over you can use github or others the first step is we have to create a project at the get lab so go ahead open your browser start your get lab open your github account or github then create a new project this call it view app create project now go ahead and set up these global configurations I'll copy them at once open a new view application this is the one yes best them go ahead and push the existing four copies then paste them in here first of all this initializes our gate and then this adds the remote the repo remote URL and this adds all files to git commit commit to the message and then push now it's going to do them at once and they've been created now let's push them all right I've been pushed successfully we can go ahead and open our project refresh it and you'll be able to see them here all right now that you push them it is time for us to pull them from the droplet so go ahead copy your IP address for the droplet then access it using SSH SSH routes at Contra shift v2 enter the IP address it will prompt you to enter a password and if it takes long to prompt for the password it means our SSH access has been looked at the droplet remember we enabled the firewall for security now what you have to do is you end this by pressing ctrl ctrl shift pressing contras shift clear the terminal then go to your digital ocean droplet into the droplet and then go to access their launch console now this is giving us access outside SSH when you're here type in your user and for now it's route inter then it will prove a password enter the password now we are here we access our droplet using SSH through the port 22 now go ahead and type sudo you FW allow 22 then enter all right there is I've been added now you can exit come back try again now now he does us for the password all right enter password Canberra I think I made a mistake yes now we're there so remember because we are using view CLI we need node.js installed now first we install node.js let's first clear the terminal yes we shall after an apt install node.js why alright it a successfully installed let's create amino and check is for it for its version yes there yeah we can also check for the version of NPM and we're good to go alright since that is done we have to go and create our V J's directory in the engine X sub and our the default engine X of the page is served in the www slash HTML so let's navigate up to the CB WW HTML directory is no day for what to put slash all right so we are in here and if we say LS you're not just a the page it's an HTML page now this is the page that is being stuffed to us here but remember we wanted to create our own directory for the view and not jsapi let's go ahead and create the directory same make the directory let's call it our web app enter now let's move into our web app the directory all right now since we're in it's time for us to initialize get but let's first check if kit is already installed checking get version yes get is already installed [Music] let's go ahead and first check if it has been installed yes we already have oh no it's not there yeah we already have get all right let's clear it's now time for us to connect the Sava to get lab and that is by creating SSH keys that are going to enable to facilitate the connection now this is moved to the root and in here we are looking for further call that SSH yes it's right here so in European SSH when you move into a sausage and ll you'll notice we don't have keys square so it's now time for us to create the keys and for us to create the keys we run a command called ssh-keygen education enter and enter all right they've been successfully created or in the Ln again you'll notice that you have ID RSA then idrs a pub this is for public and we are going to need these to share we get lab so go ahead and copy them run cat ID underscore RSA the TPU be and now you're going to copy all of this copied yes sir contra sheet see then come to get lab and moved settings look for SSH keys here and then come and paste them here then add key title will be automatically added for you so add key voila so now our G club and droplet are now connected and they can communicate safely all right since that it's done it's now time for us to go ahead and pull our DJ's application from gate lab now let's navigate back into our web app for the CD it's fast clear this so it's a CD www slash HTML / our web app in turn now this is when we run how I get it git clone command to clone the app from the outside so let's say let's first go back to get lab and copy and copy the the get URL their material faces so we want to clone in SSH we have to copy this come to our terminal and say git clone paste the URL and we can give it a name that we wanted to come in to for this case wanted to come as a video tjs underscore up so it's now cloning give it time all right is now done cloning well that was fast it's now staying for us to move into our application since we created a folder called view to J's app it's now time for us to want to move into each CD view that GS app enter then I say ll all right it's right there and before you do anything you have to install everything within the package to Jesus and all the packages this is when you run npm install this is going to install all the packages that are needed for the application to run all right since it does excessively installed let us run it for production years now so I run npm run build all right it does build successfully let's clear this now it's time for us to change the engine X setting since it is currently pointing to this default page now we want it to point to our V J's application the one which we have just built and engine X is located in the ET c / nginx directory now let's move to the directory we can say CD back then CD / e t-- c / engine x engine x now within engine x if you list them you will see folders and you're looking for this folder sites available that's where we have to to check in further for the server block because the server block is it's going to help us direct all the traffic that is coming to the application and these a default server block is called default now let's go ahead and open sites available enter and if we list whatever is in here you'll see there is a default and you're looking for this default file now let us run Nano this was clear terminal so let us open the default yes right here this is why the magic goes down and we have to change this to listen to that right what we are going to change is this route remember it is pointing to this this webpage but wanted to point to our view Jay's application and our VJs application is the folder called our web app view DOJ's deist now let's go ahead and change this HTML add our web app / view the jeaious app / deist alright I hope that works well let's go ahead and save it contracts to exit yes why then enter all right this is now the time to check if nginx is working very well sudo engine X T yes configuration is OK successful and all the stuff now after making these changes remember we have to restart engine X such that it is able to see the changes that we've just made and it is about point to our VDS application go ahead and run sudo service engine X we start voila now go to language I hope the application is now running very well let's go ahead and refresh this page enter ye [Music] a vgs application is successfully running and you become a click fetch data it will say fail to connect to api that's because our api has not yet been deployed and before we continue there's another problem the problem is remember this is usually using vcli we are targeting single page applications and if you come and input a road like something like that to throw this era of not found in Jennings now we don't want it to be like that for us to overcome that we have to go back to our default default file CD look for it CD / etc' / in genetics / sites available hello you're looking for default alright let's open Nana let's open default come down here to server yes 7m and then after 7m we are going to add a line and the line is going to say error page four zero four slash terminate then exit save why default then let's check our status engine X T now what we've literally told it is if any if anyone enters a route and it goes to a route that is not found it should be directed back to the route so let us we start our engine X solo service engine X restart all right so if you come back and refresh this it will take us back to this page and if you enter any other thing it will take us back to the default page yay now let us go and upload our not jsapi it's now time for us to deploy the nodejs API ladies and gentlemen we have come a very long way for this all right mr. Stolley remember we have to first push it to get lab such that we are able to pull it from the droplet now come to get lab and create a new project create a new project call it North API create now let's go to our node API and initialize all these environment configurations it's right here come here copy this paste it here then remember we are pushing an existing folder so copy up to here since we are already in the folder here we don't need to CD into it we just need to initialize get at the remote then add all files and then commit and push so go ahead paste add the files then push voila successfully pushed when you come and check our project and i refresh it we should see it there it's right there now it's time for us to go and pull it from the droplet now move to the droplet remember in size available let's move back and our folder we are going to pull it in the same folder that we put there play the DJ's application so let's CD into each CD the www HTML / our web app then enter - forever we have only one folder this is view DOJ's an app now it's time for us to pull to clone now go ahead and say git clone enter the URL which is the yard of API which is this copy it come and paste it in here then give it the name of the folder that we want our project to be under let's call it an odd but Jas FBI clothing funny alright cloning is now done after cleaning is done we can then run each Normandy and to run actually and let me show you I can come and say node API the J's Oh sir sorry we are supposed to move into the folder so CD node.js then the same node API dot J's all right so you just listening from port three zero zero let's try and check it out from here I hope it works I hope it works fingers crossed fingers crossed three zero zero sir all right but it's raining now let's close it after this we need to install a production process manager for nodejs applications with a built in load balancer and this manager is called p.m. - it allows you to keep applications alive forever to reload them without downtime and to facilitate common system admin tasks this p.m. - runs our node API as a service which needs to be registered by engine X and the firewall so I see if you're connecting the dots here now let's go ahead and install p.m. - using the node package manager so p.m. - NPM install p.m. - and let's make it global right it has now successfully been installed now remember p.m. to helps us register did not FBI as a service and it's it's as easy as running p.m. to start API dot J s right it has been started you can see it's a it's being identified by ID zero remember Ingenix works as a front-end sava which in this case proxies the requests to a node server and oj7 and there are four you need to setup an engineer's configuration file for not these are what we call server blocks remember server blocks now when using the index web server this server blocks can be used to except when using the engine x web server this server blocks can be used to encapsulate configuration details and host more than one domain for a single server now let's go ahead and do this let's CD back into the road clear the terminal CD into where we found the default fire engine x sites available all right if we list them you see this is the default but we want to create another file that is going to direct traffic to our node jsapi let's go ahead and copy this default file into API so we are going to create a copy of it enter CD too many arguments oh it's not CD supposed to be CP CP default API now if we say arrow you will see that these another one called API another server block let's go ahead and update it to point to our API move down let's assign it to listen to 81 shall be listening from what 81 let's remove this before sir because we don't need it for now you say listen 81 and then we go ahead and comment this out because you don't need it and then let's go and change this server name server name to the droplet IP address let's go and copy it from here copy then paste it here so it will be listening to everything coming under this IP address through port 81 and then let's go and update location show off this and paste change it to that do not worry you can always copy this from the document that I put in the link below and this is the main part proxy pass make sure it points to that API location now this is how it works it would be you remember this is a droplet and it sees everything in it locally so the local IP address the default is one to seven slot at the zero zero dot one and it's listening from the port 3000 remember so all the requests that shall be coming to this IP address and they are going through this pot this pot 81 will all be transferred to this IP address which is our background process that is running the server all right they're supposed to let's comment this out alright let's go ahead and save this is it say yes save it we know that is done it is time to enable our server block such that nginx proxies the API requests to an odious API server we created a symbolic link to this file with the following command say Ln ash yes look for the file PTC nginx sites in a board say it's available sorry API and then we are going to innovate by moving it to ET c / Ingenix / sites in a bond this F this mixture that it is enabled and is sin enter voila after that is done we then let in our firewall to let in requests coming to our API through the port 81 that we are signed to eat in nginx let's go ahead and say sudo ufw allow 81 all right now our API must be running globally if he fails try stopping deleting and restarting the process using p.m. - all right let's try our API this yeah you see a 2-1 all right let us try stopping and restarting the process let's set p.m. to status let's stop it p.m. to stop process 0s the lady and then let's restart it again say let's go back CD for a boy w HTML our web app nod jeaious CPM to APA dirtiest Oh p.m. to start start API to J's all right oh wait we were supposed to enable after after allowing pseudo ufw allow each one remember that we were supposed to enable it so go ahead and say pseudo ufw enable y-yes come back kick Oh it has walked although that's an error but because our route is a phage phage yes voila now if we come back and taste the application it's not going to work application it's not going to work that's because it is pointing at localhost which is not being seen and we have to make sure I point you to our APA that we have deployed and the way we do this is we copy this IP address come back to our GIS application and look for this the link is here so it's connecting to this yet we want it to connect to this IP address IP address and what h1 because this is why now our current our current API is located let's go back and clear and add this commit APA wrote updated and then push it so I'm going to push it to get lab and then pull it again from the from the droplet so it has successfully pushed now let's come to the droplet and move to the file to the folder which is a cd4 www.h TM o our web app and it's view view VJ s up all right yeah here in our view GS application now extinct poor so go ahead and say get pool the writers it has now pulled successfully after that we need to build it again npm run build directors built successfully let's go ahead and restart nginx i if a gun bucky and refresh it should be updated thank you voila yeah all right guys we're coming to the end of our tutorial and in case you make a change to your api let's say let's do a simple change to the api let's say fetching data from no J's API is let's change it to api has been updated save it add it to get committed say FBI updated and then push it right after pushing you come back to our door plate then maneuver back to the API for CD saying nod jsapi so in the API folder git pull it all right it's not dated automatically now what you have to do is you have to stop the other the process that is running and read and studied again let's say we say p.m. to status to see the processes that are running and we are looking for this process to stop it zero so go ahead and say p.m. to stop zero and I usually prefer deleting it to p.m. to delete zero then go ahead and start it again p.m. to start API dot jeaious alright so now it's a starting other service so if I come back and refresh if I click and fetch again yeah it has been updated so my time has come you must continue your journey without me what what what are you laughter thanks for watching guys I'm sorry if I was a bit snotty or whatever that means but this was my first youtube video and I promise to make other coming great videos please subscribe and don't forget to use the referral link to create an account on digitalocean such that you can get the $50 credit for 30 days and don't forget to subscribe

Channel: Ian Mawanda

Views: 2,711

Rating: 4.7826085 out of 5

Keywords: deploy node.js app, node app deploy, nodejs deployment, node.js server, express deployment, digital ocean, nodejs digital ocean, Digital ocean ssh, digital ocean node.js, upload node js app to server, deploy express app, vue js deployment, vue js deploy, vuejs deploy to heroku, vue js digitalocean, digitalocean tutorial, ubuntu vuejs, deploy vuejs app, deploy vue js, deploy nodejs app to server, node api, node js api, host node.js, web hosting 2019, vue 2019

Id: me7De2tJcWY

Length: 54min 39sec (3279 seconds)

Published: Tue Sep 24 2019