Deploy Your Nuxt.js Project with PM2 on Apache VPS Hosting

How to Deploy Your Nuxt.js Project with PM2 on Apache VPS Hosting

What is PM2?

PM2 is a powerful, widely-used process manager for Node.js that supports various features including automatic restarts and clustering. It ensures that your Node.js application stays up and running and provides a startup script for automatic management.

Steps to Deploy Your Nuxt.js Project

1. Point Your Domain

1. Login to Your Domain Provider Website.

2. Navigate to Manage DNS.

3. Add the Following Records:

   Type	Host/Name	Value
   A	@	Your Remote Server IP
   A	www	Your Remote Server IP
   AAAA	@	Your Remote Server IPv6
   AAAA	www	Your Remote Server IPv6

2. Setup Remote Server

1. Login to Remote Server via SSH:

   ssh -p PORT USERNAME@HOSTIP

2. Verify Required Software:

   apache2 -v
   node -v
   npm -v
   pm2 --version
   git --version

3. Install Apache:

   sudo apt install apache2

4. Install Node and npm:

   curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash - &&
   sudo apt-get install -y nodejs

5. Install PM2:

   sudo npm install -g pm2@latest

6. Add PM2 Process on Startup:

   sudo pm2 startup

7. Install Git:

   sudo apt install git

8. Verify Apache2 is Active and Running:

   sudo service apache2 status

9. Verify Web Server Ports are Open:

   sudo ufw status verbose

3. Configure GitHub Access

1. Generate SSH Keys:

   ssh-keygen -t ed25519 -C "your_email@example.com"

2. If Permission Denied, Change Ownership:

   sudo chown -R user_name .ssh

3. Copy Public SSH Key:

   cat ~/.ssh/id_ed25519.pub

4. Add Deploy Key on GitHub:

   • Go to GitHub Repo > Settings > Deploy Keys.
   • Click Add Deploy Key, paste the SSH public key, and click Add Key.

5. Verify SSH Connection:

   ssh -T git@github.com

4. Clone and Setup Your Project

1. Clone Your GitHub Project:

   • Using HTTPS:

     git clone https_repo_path

   • Using SSH:

     git clone ssh_repo_path

2. Move Project Folder to Web Server Public Directory:

   sudo mv project_folder_name /var/www

3. Navigate to Project Directory:

   cd /var/www/project_folder_name

4. Clear npm Cache (Optional):

   npm cache clean --force

5. Install Dependencies:

   npm install

6. Create Production Build:

   npm run build

5. Configure Apache Virtual Host

1. Create Virtual Host File:

   sudo nano /etc/apache2/sites-available/your_domain.conf

2. Add Configuration:

   <VirtualHost *:80>
       ServerName www.example.com
       ServerAdmin contact@example.com
       ProxyPreserveHost On
       ProxyPass / http://127.0.0.1:3001/
       ProxyPassReverse / http://127.0.0.1:3001/
       <Directory "/var/www/project_folder_name">
           AllowOverride All
       </Directory>
   </VirtualHost>

3. Enable Proxy Modules:

   sudo a2enmod proxy
   sudo a2enmod proxy_http

4. Enable Virtual Host:

   sudo a2ensite your_domain.conf

5. Check Configuration:

   sudo apache2ctl configtest

6. Restart Apache2:

   sudo service apache2 restart

6. Setup PM2 for Nuxt.js

1. Create PM2 Configuration File:

   sudo nano /var/www/project_folder_name/ecosystem.config.js

2. Add Configuration:

   module.exports = {
     apps : [
         {
           name: "myapp",
           script: ".output/server/index.mjs",
           port: 3001,
           watch: true
         }
     ]
   }

3. Start Application with PM2:

   pm2 start ecosystem.config.js

4. Save PM2 Process:

   pm2 save

5. Check PM2 Status:

   pm2 status

7. Automate Deployment with GitHub Actions

1. Create Deployment Script:

   • Create .scripts/deploy.sh:

     #!/bin/bash
     set -e
     
     echo "Deployment started..."
     
     git pull origin master
     echo "New changes copied to server !"
     
     echo "Installing Dependencies..."
     npm install --yes
     
     echo "Creating Production Build..."
     npm run build
     
     echo "PM2 Reload"
     pm2 reload app_name
     
     echo "Deployment Finished!"

   • Set file permissions:

     git update-index --add --chmod=+x deploy.sh

2. Create GitHub Actions Workflow:

   • Create .github/workflows/deploy.yml:

     name: Deploy
     
     on:
       push:
         branches: ["master"]
       pull_request:
         branches: ["master"]
     
     jobs:
       deploy:
         runs-on: ubuntu-latest
         steps:
           - uses: actions/checkout@v3
           - name: Deploy to Server
             uses: appleboy/ssh-action@master
             with:
               host: ${{ secrets.HOST }}
               username: ${{ secrets.USERNAME }}
               port: ${{ secrets.PORT }}
               key: ${{ secrets.SSHKEY }}
               script: "cd /var/www/project_folder_name && ./.scripts/deploy.sh"

3. Add Repository Secrets on GitHub:

   • Go to GitHub Repo > Settings > Secrets and Variables > Actions.
   • Add secrets: HOST, PORT, USERNAME, and SSHKEY.

4. Generate SSH Key for GitHub Actions:

   ssh-keygen -f key_path -t ed25519 -C "your_email@example.com"

5. Add SSH Key to GitHub and Remote Server:

   • Copy public key and add it as a new deploy key on GitHub.
   • Copy private key for repository secrets and add it to GitHub Actions.

6. Commit and Push Changes to GitHub Repo.

   • Deployments should now be automated. Check the GitHub Actions tab for logs and status.

---