Nuxt-js.md

How to Deploy Nuxt JS on LiteSpeed Web Server

Bayes Ahmed Shoharto

A brief description of Nuxt.js application deployment on LiteSpeed web server.

Installing / Getting started

A quick introduction of the minimal setup you need to follow these steps:

• Create Website
• Enable HTTPS
• Connect to Server with SSH
• Install Node JS & NPM
• Upload Project File
• Edit LiteSpeed Config File
• Create .htaccess File
• Starting Nuxt.js
• Nuxt & PM2: Zero Downtime Deployment
  • Getting Started
  • Configure your application
  • Build and serve the app

Step-One: Create Website

Add a new domain or subdomain in your LiteSpeed server by using web panel or terminal.

Step-Two: Enable HTTPS

To know how to set SSL for HTTPS read this SSL Documentation.

Step-Three: Connect to Server with SSH

To know how to connect the server by SSH for access, read this SSH Documentation.

Step-Four: Install Node JS & NPM

To know how to install node.js and npm read this Node.js Documentation.

Step-Five: Upload Project File

Now go to your project directory:

cd /home/your-domain.com

And create directory for the project:

mkdir ./your-project-name

Undoubtedly, you have Nuxt.js project on your local computer or GitHub, so copy it now to this directory.

OK, go back to the terminal where you are connected to the droplet and check that files exist in the proper directory:

ls ./your-project-name

You should see a list of the project files.

Step-Six: Edit LiteSpeed Config File

Open LiteSpeed server configuration file by using this command:

sudo vi /usr/local/lsws/conf/httpd_config.xml

In this file put the following content carefully.

<extProcessor>
      <type>proxy</type>
      <name>nuxtapp</name>
      <address>127.0.0.1:3000</address>
      <maxConns>100</maxConns>
      <pcKeepAliveTimeout>60</pcKeepAliveTimeout>
      <initTimeout>60</initTimeout>
      <retryTimeout>0</retryTimeout>
      <respBuffer>0</respBuffer>
</extProcessor>

Step-Seven: Create .htaccess File

Create a .htaccess file to your website directory and add Rewrite Rules.

RewriteEngine On
RewriteRule ^(.*)$ HTTP://nuxtapp/$1 [P]

Step-Eight: Starting Nuxt.js

After successfully followed previous steps let's run Nuxt.js on our server!

cd ./your-project-name
    npm run build
    npm run start

You can see your project by visit your domain or subdomain. Of course, it was great but we need more automatization. Otherwise, you need to start your website from terminal by using previous commands.

---

Nuxt & PM2: Zero Downtime Deployment

Getting Started

Make sure you have pm2 installed on your server. If not, simply globally install it from yarn or npm.

# npm pm2 install
$ npm install pm2 -g

Configure your application

module.exports = {
  apps: [
    {
      name: 'NuxtAppName',
      exec_mode: 'cluster',
      instances: 'max', // Or a number of instances
      script: './node_modules/nuxt/bin/nuxt.js',
      args: 'start'
    }
  ]
}

Build and serve the app

• Now build your app with npm run build.

• And serve it with pm2 start.

• Check the status pm2 ls.

• Your Nuxt.js application is now serving!