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 firstname.lastname@example.org
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:
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):
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.
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!