Deploy Fullstack with Nginx on Digital Ocean
Hi folks, Let’s deploy your full-stack application around the world using Digital Ocean .
I am going to present a simple step-by-step guide to deploy a full-stack(VUE+ NODE) on Digital Ocean. We will be mostly focusing on Nginx. It’s very simple with Nginx. This guide is very much similar for React developers.
This guide assumes that you have your Digital Ocean server running.
If you don’t have a Digital Ocean server ready, then click here to setup your Digital Ocean Server: Initial Server Setup with Ubuntu 16.04
I have my full-stack application ready in my local machine.
About My Application:
Frontend: Vue.js, Backend: Node.js
My Node.js server is running on port 3000. and the Vue application is running on port 8080.
Vue.js application makes a GET request on http:localhost:3000/users?id=1
to get the details about user 1.
Upload your frontend and backend source code to github repository. In case you need help check this : Adding an existing project to GitHub .
Login to your server:
We will be using root user. I recommend you to add a sudo user and try things with that user. HOW TO CREATE SUDO USER ?
ssh root@YOUR_DROPLET_IPcd /home
We are working inside /home because Nginx will not have permissions to access files in root folder.
Preparation:
We need to set up a few things before we move to the next steps.
1: Node and NPM
2: Git
3: PM2
4: Nginx
and install them if you don’t have already.
Install Node and NPM:
Run the following command:
curl -sL https://deb.nodesource.com/setup_5.x | sudo -E bash -sudo apt-get install -y nodejs
Install Git:
sudo apt-get install git
Install PM2:
npm i -g pm2
What is PM2?
PM2 is a production process manager for Node.js applications (with a built-in load balancer). Simply, allows you to keep applications alive forever.
Install Nginx:
sudo apt-get install nginx -y
What is NGINX?
Nginx is open source high-performance HTTP Server. It is one of the most popoular web server because it is know for it’s stability, high performance, simple configuration.
Step 1: Setting up the project
1.1 Setting up Node.js project
Clone your backend project from GitHub.
git clone https://github.com/harshittpandey/backend-app
Go inside the folder and install dependencies.
cd backend-app && npm install
1.2 Setting up Vue.js project
Clone your frontend project from Github.
git clone https://github.com/harshittpandey/frontend-app
Go inside the folder and install the required dependencies.
cd frontend-app && npm install
Let’s bundle our code for production using this command.
npm run build
Step 2: Hosting Application
Step 2.1 Hosting node.js application using PM2
Before hosting your node.js application let’s check if the API is working fine.
I am running my app using npm start because I am using express-generator. You can run node app.js also.
cd backend-app && npm start
If It’s working fine then move to the next step.
It’s time to use our process management tool (PM2).
cd backend-app
pm2 start npm --name "app" -- start
If you’re using node app.js. then do,
pm2 start app.js
Now, pm2 will keep your application alive.
2.2 Deploying Vue.js application using Nginx
As we have already donenpm run build
.
We just need to configure NGINX.
cd /etc/nginx/sites-available/
nano default
Cut out all lines with Ctrl+K. and copy this code there with your IP Address.
server {
server_name YOUR_DROPLET_IP;
listen 80;
error_page 404 /index.html; location ~ ^/(api|images)/ {
proxy_pass http://localhost:3000;
proxy_http_version 1.1;
} location / {
alias /home/frontend-app/dist/;
}}
What am I doing here ?
server_name will be your dropletIP for which it will listen for requests.
then I am checking
If there is any match for /api or /img in the request, then forward the request to localhost:3000/ where our node.js server is running.
Otherwise map the url to the file(index.html) located at /home/frontend-app/dist/
Step 3: Test and Reload Nginx
3.1 First of all, check if the configurations are valid.
sudo nginx -t
Check if the test is successful.
3.2 Let’s reload Nginx
sudo systemctl restart nginx
Now It’s time to verify if our server is working or not.
Perfect, It’s working fine. NGINX is handling all the request i.e.
1: forwarding request to localhost:3000
that belongs to server like /api or /image .
2: mapping URL that belongs to vue app.
I hope that this step by step guide was easy to understand. In case you have any issue please comment.