Source Code: cohen.ro

Deploy a Nuxt Web App with PM2 and NGINX?

We need all the time to deploy apps, but after we build them, how we can deploy them? This is a tutorial about deploying Nuxt JS or Vue JS apps with PM2 and NGINX on a VPS.

Let's Get Started!

First we need to install pm2 globally on the server. You might need to deploy many apps on your VPS, therefore globally is better to save the tool

npm install pm2 -g

In the root of your working folder you will have to create a ecosystem.config.js file with this code in it. I set the app to ron on localhost port 3000 in order to grab that traffic and put it on NGINX.

module.exports = {
  apps: [
    {
      name: 'appName', // The name of your app
      exec_mode: 'cluster', // Optional
      instances: 'max', // Or a number of instances.
      // 'max' auto detects how many CPU cores there are.
      // The previous option must exist to use the above.
      script: './node_modules/nuxt/bin/nuxt.js',
   
      args: 'start',
    
      env: {
          "PORT": 3000,
          "NODE_ENV": "production",
      },
    
      
    },
  ],

}

Now you can start the app directly from pm2.

pm2 start

NGINX Installation

Ok! one part is done, now you need to install and NGINX. NGINX will help you to provide the outside traffic from World Wide Web directly to your local host app, running on port 3000

sudo apt-get install nginx

Now we need to edit the NGINX configs in order to grab the traffic from port 3000.

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

Here we will have to put these configs.

default

server {
    listen 443 ssl;
    listen 80 default_server;
    listen [::]:80 default_server;
    server_name test.ro www.test.ro;  #these are your required url name
    location / {

        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
        
    }

Now we have to link the settings

sudo ln -s /etc/nginx/sites-available/default /etc/nginx/sites-enabled

and test them with nginx -t If all until now is ok and you got no error, then you are good to go!

Install your SSL certificates

Next we have to setup the SSL certificates in order to have your site on HTTPS. Now should run properly on HHTP. I've used the certificates provided from https://www.sslforfree.com/ by using a 3 months free of charges certificates, before buying stand alone ones, therefore after you follow their registration steps, you simply need to download the files and paste them on your VPS. I've pasted them on /etc/ssl folder and from there I've updated the nginx settings as follows, by adding two lines ssl_certificate /etc/ssl/certificate.crt; and ssl_certificate_key /etc/ssl/private.key;

Configure Your Server

Some software requires you to put your site's certificate chain in the same file. You can generate the combined file with a command such as:

cat certificate.crt ca_bundle.crt >> new_certificate.crt

This is how now my server settings look like

server {

    listen 443 ssl;
    ssl_certificate /etc/ssl/new_certificate.crt; 
    ssl_certificate_key /etc/ssl/private.key;
    listen 80 default_server;
    listen [::]:80 default_server;
    server_name test.ro www.test.ro;  #these are your required url name
    location / {

        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
        
    }

You can test if all is fine with nginx -t. If you see something like this: nginx: the configuration file /etc/nginx/nginx.conf syntax is ok, then everything is fine! Now you should have your site up and running on WWW on https as well. These are the steps I followed in order to have the site www.cohen.ro to be online.

Last step is to restart your NGINX server sudo /etc/init.d/nginx restart

Adding more Items to your App

Whenever you add something you have to restart pm2 pm2 restart AppName and restart also nginx service with sudo systemctl restart nginx

pm2 restart cohen && sudo systemctl restart nginx

All in one line

cd nuxt_blog && npm run build && pm2 restart cohen && sudo systemctl restart nginx