Shubham S Nimje logo
Shubham Nimje
Apache

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

Deploy Your Nuxt.js Project with PM2 on Apache VPS Hosting
4 min read
#Apache

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:

    TypeHost/NameValue
    A@Your Remote Server IP
    AwwwYour Remote Server IP
    AAAA@Your Remote Server IPv6
    AAAAwwwYour 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.