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

Get $50 credit on Digital Ocean when using this

DigitalOcean is a unique cloud hosting provider that offers cloud computing services to business entities so that they can scale themselves by deploying DigitalOcean applications that run parallel across multiple cloud servers without compromising on performance!

Install nginx:
sudo apt update
sudo apt install nginx

List the application configurations that ufw knows how to work with by typing:
sudo ufw app list

You can enable this by typing:
sudo ufw allow 'Nginx HTTP'
sudo ufw enable

You can verify the change by typing:
sudo ufw status

Then we check if the server is running successfully
systemctl status nginx

Because we are using vue-cli, we need nodejs installed
sudo apt-get install curl

Check node and npm version
node -v
npm -v

our nginx default served page is found in
cd /var/www/html
ls
mkdir our_web_app
cd our_web_app

Initialise the git. Check if it exists
git –version

Connect our server to gitlab. So, cd back to root
cd

Check if you have .ssh directory
ll

Go into that directory
cd .ssh
ll

You can see we do not have any keys here, so let us create them
ssh-keygen
ll

After they have been created, we need to view the public key and copy it

Move into project directory and pull project
cd var/www/html/our_web_app
ll
git clone URL /* Custom Name */ vue_application
cd vue_application
npm install
npm run build

Change the nginx setting since it is currently pointing to the default page. Nginx is located at etc/nginx
cd
cd /etc/nginx
ll
cd /sites-available
ll
nano default //If it fails, try runing with sudo

Move back to the application folder
cd var/www/html/our_web_app/vue_application
ll //To view the dist folder

Check if nginx is working fine
sudo nginx -t

We then restart nginx such that it is able to notice the changes we have made
sudo service nginx restart

Go to browser and enter the ip address of our app, when it works ‘API is not available’,

NODE.JS
Move into project directory and pull node js api project
cd var/www/html/our_web_app
ll
git clone URL /* Custom Name */ vue_api
cd api

Install PM2
npm install pm2 -g
This pm2 runs our node api as a service, which needs to be registered by nginx and firewall

Create API server block

cd
cd /etc/nginx/sites-available/
cp default api
ll
nano api

assign it a port to use when live
listen 81;
comment out the default one
#listen [::]:81 default_server;
Comment out root
change the server name to ip address or domain name
server_name droplet-ip-address

change location to this
location / {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-NginX-Proxy true;
proxy_set_header Host $http_host;
proxy_cache_bypass $http_upgrade;
proxy_redirect off;
}

ln -s /etc/nginx/sites-available/api /etc/nginx/sites-enabled/

We then let our firewall to let in requests coming to our api, through the port 81
sudo ufw allow 81
sudo ufw enable

––––––––––––––––––––––––––––––
Creative Commons — Attribution 3.0 Unported — CC BY 3.0
––––––––––––––––––––––––––––––

🎵 Track Info:

Title: Lights by Sappheiros
Genre and Mood: Dance & Electronic + Inspirational

———

🎧 Available on:

———

😊 Contact the Artist:

———

[uaimarcinho]

This video was one of the best things I've ever watched. It was so easy even being in Brazil and o dont speak English.

[pureethiopia]

I have not experience to comment for youtuber but I cannot for you it's awesome

[RasceGSalasG]

Nice video! so helpful, the celebration in the minute 31:30 it was super fun ... thanks, bro !

[kevin]

Best explanation ever, you're pleasant to listen to and it wasnt boring. I was looking for a React tutorial but this one helped just as good. Thank you sir

[ifahddev]

thank you for this great tutorial, you save my time, and answer my big question for spilt backend and frontend on same server.

[vincentadipo]

Awesome, simple, and to the point. This is really good. Thank you and great job.

[renelagunajr]

Thank you very much Ian. This really helped me in doing my current project.

[mysterOrel]

nice tuto man. pls next time reduice the background song volume !

[djmonteur]

your video is great. it really helped me. thanks

[tharindumadhushan]

i really danced when after vue app successfully deployed. 🤣❤️

[mrti]

Thanks for the tut, but I think the easier way to proxy your request to the API would just be to define a location in your NGINX server block and point proxy_pass to the API server. No need to create another site file with a different port.

[djcali]

Thanks Man, Just what I needed to get express working with Vue and Nginx. Couldn't find a tutorial anywhere until now. Great job.

[jlvargas]

Is it a same process when I use laravel as an API? Thank you in advance

[patriciakanana]

Why did you stop posting.This was such good content.