Deploying Vue App to VPS Server with Nginx

Introduction

Deploying your Vue app to VPS server with Nginx isn’t difficult. Let’s try to deploy a Vue app from scratch in this article. I assume we’re building everything from scratch and try to explain this as simple as possible by avoiding unrelated part but deploying basic Vue app to VPS server using Nginx.


Preparing The Server

First of all, I assume you’ve prepared an Ubuntu server and able to connect to the server as a root. Let’s update Ubuntu first to ensure we’re using updated dependencies:

$ apt update

Next, let’s install Nginx as the server machine:

$ apt install nginx

We need to install npm to install Vue

$ apt install npm

Install Vue js:

$ npm i -g vue-cli@2.9.6

Set default root Nginx project to point to Vue project which we’ll create later, first let’s open the default Nginx setting file:

$ nano /etc/nginx/sites-available/default

Find a line with this snippet:

root /var/www/html;

and modify it into (my Vue folder is named “project” feel free to user another name and makesure it’s equal with your Vue project name you’ll created later):

root /var/www/html/project/dist;

save the file, exit from editor and then reload Nginx:

$ systemctl restart nginx

Deploying Basic Vue App To Server

go to /var/www/html directory and let’s create a basic Vue app there using webpack:

$ cd /var/www/html

and then installed a Vue app named “project”:

$ vue init webpack project

go to “project” directory:

$ cd project