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

Now we’re going to build Vue App to run into production mode

$ npm run build

Your Vue app is ready in production server now. You can access it either using your domain name or the server’s IP Address.

Conclusion

Deploying Vue App to VPS server isn’t difficult.

The key is you need to point Nginx server root to point to your Vue app project then build Vue app inside it.

Thank you for reading!

#vue #vue-js #node-js #nginx #ubuntu