Deploy Vue.js — SSR(Vuetify) on Production with Pm2 and Nginx.

6 min readJul 27, 2017

In this article I will show you how to deploy a production ready Vue.js — SSR (Vuetify) Application, using Pm2 (production process manager) for Node.JS and Nginx for reverse — proxy.

Setup

For the Vue.js application we are going to use Vuetifyjs which will provide us Vue— SSR template with material design component.

Before we start make sure you have installed below thing

Node.Js
NPM ( Node Package Manager )
Vue-cli

Let’s start by running this command

$ vue init vuetifyjs/webpack-ssr

which will clone vuetifyjs Webpack SSR template for us. For the application to run we need to install all the dependencies first.

$ npm install

For the jump start I will skip here application code part. So now we quickly build the application using webpack, which will help us to bundle all the application assets and then we will run the application.

$ npm run build
$ npm run start

now we can check the application on http://localhost:8080.

Why do we need Pm2 ?

Answer is Simply to keep the Node.js application alive all time. Pm2 is production process manager for Node.js application. Running the application with simple node command is not good choice all the time.

Problem

Restarting the application while we make changes.
What if application crashes or fail in production?
Believe me this will happens a lot!!! 😅

Pm2 resolve this problem easily:

It allows us to keep the application alive forever.
Provides monitoring and administration.
Cluster mode and hot reloading with zero downtime.

For installing Pm2 run following command:

$ npm install pm2 -g

To start the application using pm2 run:

$ pm2 start server.js

which will start process of the application. To monitor the application run:

$ pm2 monit

Deploy application on server

For deploying the application we need to automate our task, Luckily pm2 provides feature called process management. pm2 allows us to manage our application environment variable, logs, behaviours of our application via process file. To generate simple process file for the application run:

$ pm2 ecosystem

which will generate ecosystem process file for the application. Process file can be supply in Javascript, JSON or YAML format. Here we are going to use ecosystem.json which should look something like this

in apps we can pass array of applications we want to start. As we can see here we’re running the application in cluster mode with 4 instance. Pm2 manages the application load — balancing automatically. Now let’s start the application using ecosystem.json

$ pm2 start ecosystem.json

now move on to deploying process. Pm2 have powerful yet simple revision tracking deployment feature to make deployment process pain less. Now we can commit all changes and push the application code on github which also include ecosystem.json.

For deploying the application let’s login in the target server using SSH and first install pm2 globally as mentioned earlier. We also need the pm2 to start automatically on server reboot or fail. To do so run

$ pm2 startup ubuntu

Now we need deployment file which will setup the application scaffolding and start the application. Let’s create a file called deployment.json on our server.

As we see here we have two environments for deployment. We need to provide some configuration based on the application need and pm2 will handle the rest. The important thing here is post-deploy. pm2 run this script after application deploy on server which is great to install all dependencies (node_modules) for our application. To quickly deploy, let run pm2 deploy production setup.

$ pm2 deploy deployment.json production setup

Which will set up a production environment for our application in /var/www/production path. Same as if we want to run in development mode, we also need to setup development setup.

$ pm2 deploy deployment.json development setup

For now we only need to run production setup and to run actual production let run:

$ pm2 deploy deployment.json production

This will quickly start to clone our application from the github and run post-deploy script. This task will ask for the github usernme and password to make this process automatic as well, we need to set an SSH key for the github account.

Setup SSH

To generate an SSH key pair for the application run

$ ssh-keygen -t rsa -b 4096 -C "your_github@email.com"

The entire process will look like this

ssh-keygen -t rsa -b 4096 -C "your_github@email.com"
Generating public/private rsa key pair.
Enter file in which to save the key (/home/vuejs/.ssh/id_rsa): 
Enter passphrase (empty for no passphrase): 
Enter same passphrase again: 
Your identification has been saved in /vuejs/demo/.ssh/id_rsa.
Your public key has been saved in /home/vuejs/.ssh/id_rsa.pub.
The key fingerprint is:
3b:d0:0b:d6:45:32:3c:e4:22:37:7d:99:2a:44:88:62 vuejs@a
The key's randomart image is:
+--[ RSA 4096]----+
|          .oo.   |
|         .  o.E  |
|        + .  o   |
|     . = = .     |
|      = S = .    |
|     o + = +     |
|      . o + o .  |
|           . o   |
|         .  o.E  |
|        + .  o   |
|     o + = +     |
|      . o + o .  |
|           . o   |
+-----------------+

So our public key we located at /home/vuejs/.ssh/id_rsa.pub and our private key is located at /home/vuejs/.ssh/id_rsa Now sign in and add your public key in your github account. Go to your profile settings and under SSH and GPG Keys add new SSH key. To copy the public key in clipboard:

$ clip < ~/.ssh/id_rsa.pub
# Copies the contents of the id_rsa.pub file to your clipboard

So now we are good to go to check if ssh working type:

ssh -T git@github.com 
# Attempts to ssh to GitHubHi username! You've successfully authenticated, but GitHub does not
provide shell access.

Now we just set up our SSH and run our application using pm2 which is running currently on localhost but we need to access our application from outside so now we need to configure the Nginx reverse proxy.

Nginx Reverse Proxy Setup

Since the Nginx is available in Ubuntu’s default repository we can install this very simple way:

$ sudo apt-get update
$ sudo apt-get install nginx

This will ask for the Nginx profile we choose the default Nginx-Full. To adjust the firewall for the Nginx run:

$ sudo ufw allow 'Nginx HTTP'

We can now check the Nginx service status by running:

$ systemctl status nginx

Which will provide output similar like this

● nginx.service - A high performance web server and a reverse proxy server
   Loaded: loaded (/lib/systemd/system/nginx.service; enabled; vendor preset: enabled)
   Active: active (running) since Mon 2017-06-22 19:00:00 EDT; 4min 2s ago
 Main PID: 14317 (nginx)
   CGroup: /system.slice/nginx.service
           ├─14317 nginx: master process /usr/sbin/nginx -g daemon on; master_process on
           └─14318 nginx: worker process

So now the Nginx is running enter our server IP address or domain in the browser and we will see the Nginx default page.

And Last and final step we need to add configuration for the Nginx to reverse proxy all domain traffic to the application port. /etc/nginx is the Nginx Configuration directory. To modify the Nginx configuration edit file default.conf in /etc/nginx/sites-available Add following configuration.

To test the configuration before applying run:

$ sudo nginx -t

Finally, reload the actual Nginx server configuration.

$ sudo nginx -s reload

Which will reload and apply the configuration. Now you can visit https://your-server-domain.com to access the Vue.js application.

Conclusion

So now we have the Vue.js SSR application running on the server with Nginx reverse — proxy. For more complex application and additional configuration you can also refer to the official site.