Deploy Nuxtjs to CPanel

Updated: 2022-10-08

Opinion: I no longer think CPanel is a good solution for hosting nuxtjs application.

Recommendation: Move to https://vercel.com/ or any other serverless hosting service provider, you will get much better page speed.

Need help: Contact Us

---

Step 0

Update package.json with following two packages (fs & path):

  "devDependencies": {
    ...
    "fs": "0.0.2",
    "path": "^0.12.7",
    ....
  }

Run npm install to install the packages.

Step 1:

Update your nuxt.config.js with following code:

var fs = require('fs');
var path = require('path');

let ENV_DEV = true;

//Development Environment
let port = <port>;
let host = 'localhost';
let https = false;

//Production Environment
if(ENV_DEV==false)
{
  port = <port>; // make sure this port is open on your server you can do that via WHM or talk to you hosting company
  host = '<domain-name>';
  https =  {
    key: fs.readFileSync(path.resolve(__dirname,
        './../../ssl/keys/<ssl-key-file-name>.key')),
    cert: fs.readFileSync(path.resolve(__dirname,
        './../../ssl/certs/<ssl-crt-file-name>.crt'))
  };
}

export default {
  mode: 'universal',
  env: {

  },
  server: {
    port: port, 
    host: host, 
    timing: false,
    https: https
  },
  //keep rest of the code as it is

Change the value of ENV_DEV to false in nuxt.config.js if you want to run the application cpanel with https otherwise to run in development environment change ENV_DEV to true, it will run with http.

Step 2:

Create .htaccess file at the root of your domain or sub domain director:

Options -Indexes
RewriteEngine On
RewriteCond %{SERVER_PORT} 443
RewriteRule ^index.php(.*) https://%{HTTP_HOST}:<port>/$1 [P,L]
RewriteRule ^(.*)$ https://%{HTTP_HOST}:<port>/$1 [P,L]

Replace <port> with the port number of your application.

Run npm run dev and open the website if you get 500 error follow Step 3.

Step 3:

Make sure SSLProxyEngine is on for you domain. If not do following from ssh:

• cd /etc/apache2/conf.d/userdata/ssl/2_4/<cpanel-domain-username>/
• check if it has a folder for your domain name like vaah.dev or sub domain like cli.vaah.dev
• if not then create mkdir <domain-name> and cd <domain-name>
• create file sudo vim 00-sslproxy.conf with only SSLProxyEngine on content and save the file
• run /usr/local/cpanel/scripts/rebuildhttpdconf to rebuild httpd.conf
• run /usr/local/cpanel/scripts/restartsrv_httpd to restart apache

Run npm run dev and open the website again should be working without any error.

Step 4:

To start server permanently, run following commands in sequence:

• npm run build
• pm2 start npm --name <app-name> -- start

Replace <app-name> to any useful name to identify the PM2 process.

Other Command

• pm2 list: to see the list
• pm2 stop all: Stop all processes
• pm2 restart all: Restart all processes
• pm2 delete all: Delete all processes

Comments

[barikhan1986]

I try to run Nuxt app with domain that connected to cloudflare? I cannot run "npm start" command, the result is

listen EADDRNOTAVAIL: address not available 104.21.20.30:48000

is there any way to fix this issue?

[amin mohamadi]

cloudflare is about dns not port i think but your cloudflare settings shoul be like nuxt doc prefer.
nuxtjs.org/docs/2.x/deployment/dep...

[Pradeep Kumar]

@barikhan1986 this tutorial is specially for CPanel. Share screenshot or more details so that I can help.

[amin mohamadi]

you can use cron jobs for when server restart or down or ....
for pm2 in nuxt you can use cluster for be stable and maybe more fast when your server is going down or ... (its about cpu you can read it)
1-creat file ecosystem.config.js
2- add this
module.exports = {
apps: [
{
name: 'NuxtAppName',
exec_mode: 'cluster',
instances: 'max', // Or a number of instances
script: './node_modules/nuxt/bin/nuxt.js',
args: 'start'
}
]
}
(----change name and etc---)
3-npm run build
4-pm2 start
5- also can use --watch

[xston]

Hi I followed your method but arrived at this step I had a lot of errors, I am new to Nuxjts, I don't have much experience LOL. Thanks for this tutorial.

[Pradeep Kumar]

@xston
you did not mention any error, did you entered the correct SSL? There is a number of steps that can go wrong. We have deployed a number of sites with the tutorial.

[Partners in Biz]

Will this work for Nuxt3?