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_IP
cd /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.

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.

NGINX handling all type of requests

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.

Congratulations your app is live and accessible to everyone out there.

I hope that this step by step guide was easy to understand. In case you have any issue please comment.