Deploy Nuxt to Ubuntu Server

Nuxt is an intuitive Vue framework. It lets you build Vue application quickly as it has features such as Single Page application and creating Server rendered application. Nuxt was first released on October 26, 26 and has come along way. We are currently on our way to Nuxt 3 with the release candidate recently launched. Nuxt 2 in the most recent LTS version

Nuxt js can be deployed in two different ways depending on your deployment platform:

• Static Site: 

This is where you application pages will be converted to static html code that can be deployed to any platform. The advantage of static site is that you have fast load time as nothing is processed. However, it is not suitable for sites whose content keep changing or is updated frequently.

• Dynamic

You can deploy on a node server which will render the application. This method is suitable for applications that have dynamic content such as e-commerce  and also applications with many pages.

 

Prerequisites:

• Node js installed (latest LTS version)

• Digital Ocean Droplet with ssh access

• Nginx Server

 

Ssh to the server 

ssh  server_user@server_ip 

 

Move to html directory, this is where we shall set up the application

Cd /var/www/html

 

Setup a New Nuxt Project

First we  are going to create a Nuxt project using npx

 

npx nuxi init nuxt-app

This creates a nuxt-app directory in your present working directory.

Cd into the project root

cd nuxt-app

 

Run npm install to install the required dependencies

npm install

 

Inside you can also run the following commands:

Npm run dev: to run the application in development mode

npm run build: to build the application from the apps package.json

 

Run The app in development mode

 

npm run dev 

 

To be able to view the application we need to configure nginx to point to the application folder, cd to /etc/nginx/sites-available

 

Update the content within the location configuration to look like this

 

    location / {

        proxy_redirect                      off;

        proxy_set_header Host               $host;

        proxy_set_header X-Real-IP          $remote_addr;

        proxy_set_header X-Forwarded-For    $proxy_add_x_forwarded_for;

        proxy_set_header X-Forwarded-Proto  $scheme;

        proxy_read_timeout          1m;

        proxy_connect_timeout       1m;

        proxy_pass                          http://127.0.0.1:3000; # set the address of the Node.js instance here

    }

 

Nuxt normally runs on port 3000 

 

To see if the nginx configuration is correct run

nginx -t

 

Reload Nginx for the changes to reflect

 systemctl reload nginx

 

Run the Nuxt application for production

 npm run build

 

Install Pm2

Pm2 is a daemon process manager which keeps an application online, we shall install using

npm install pm2@latest -g

For Nuxt 3 you need to create a ecosystem.config.js with the following content

module.exports = {

  apps: [

    {

      name: 'NuxtAppName',

      exec_mode: 'cluster',

      instances: 'max', // Or a number of instances

      script: './node_modules/nuxt/bin/nuxt.js',

      args: 'start'

    }

  ]

}

 

Start pm2 to view the application

 

pm2 start