Data Codes through Eyeglasses

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

How to Point Domain and Host NuxtJS Project using GitHub and PM2 on Apache Web Server VPS Hosting

What is PM2 ?

PM2 is a powerful, widely-used, and feature-rich, production-ready process manager for Node.js. Restarting PM2 with the processes it manages every time your server boots/reboots is critical. One of PM2’s key features is support for a startup script (generated dynamically based on the default init system on your server), that restarts PM2 and your processes at every server restart.

  • Login to Your Domain Provider Website
  • Navigate to Manage DNS
  • Add Following Records:
TypeHost/NameValue
A@Your Remote Server IP
AwwwYour Remote Server IP
AAAA@Your Remote Server IPv6
AAAAwwwYour Remote Server IPv6
  • Push your Poject to You Github Account as Private Repo
  • To Access Remote Server via SSH
Syntax:- ssh -p PORT USERNAME@HOSTIP
Example:- ssh -p 22 nim@216.32.44.12

Note:- Run Below Commands on Your Remote Server Linux Machine or VPS, Not on Your Local Windows Machine

  • Verify that all required softwares are installed
apache2 -v
node -v
npm -v
pm2 --version
git --version
  • Install Apache
sudo apt install apache2
  • Install Node and npm
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash - &&\
sudo apt-get install -y nodejs
  • Install PM2
sudo npm install -g pm2@latest
  • Add PM2 Process on Startup
sudo pm2 startup
  • Install Git
sudo apt install git
  • Verify Apache2 is Active and Running
sudo service apache2 status
  • Verify Web Server Ports are Open and Allowed through Firewall
sudo ufw status verbose
  • Make Connection between Remote Server and Github via SSH Key
  • Generate SSH Keys
ssh-keygen -t ed25519 -C "your_email@example.com"
  • If Permission Denied then Own .ssh then try again to Generate SSH Keys
Syntax:- sudo chown -R user_name .ssh
Example:- sudo chown -R nim .ssh
  • Open Public SSH Keys then copy the key
cat ~/.ssh/id_ed25519.pub
  • Go to Your Github Repo
  • Click on Settings Tab
  • Click on Deploy Keys option from sidebar
  • Click on Add Deploy Key Button and Paste Remote Server’s Copied SSH Public Key then Click on Add Key
  • Verify the Connection, Go to Your Server Terminal then run below
ssh -T git@github.com
// OR
ssh -vT git@github.com
  • You may get an error git @ github.com: Permission denied (publickey) If you will try to clone it directly on Web Server Public Folder /var/www So we will clone github repo in User’s Home Directory then Move it to Web server Public Directory
  • Clone Project from your github account
- Using HTTPS Path It doesnt require to setup SSH Key on Github
Syntax:- git clone https_repo_path
Example:- git clone https://github.com/geekyshow1/miniblog.git

- Using SSH Path It requires to setup SSH Key on Github
Syntax:- git clone ssh_repo_path
Example:- git clone git@github.com:geekyshow1/miniblog.git
  • Run ls command to verify that the project is present
ls
  • Move Project Folder to Web Server public directory
Syntax:- sudo mv project_folder_name /var/www
Example:- sudo mv miniblog /var/www
  • Go to Your Project Directory
Syntax:- cd /var/www/project_folder_name
Example:- cd /var/www/miniblog
  • Clear NPM Cache (Optional)
npm cache clean --force
  • Install Dependencies
npm install
  • Create Production Build
npm run build
  • Create Virtual Host File
sudo nano /etc/apache2/sites-available/your_domain.conf
  • Add Following Code in Virtual Host File
  • Change the IP and Port According to your Node Application Code
<VirtualHost *:80>
    ServerName www.example.com
    ServerAdmin contact@example.com
    ProxyPreserveHost On
    #Write Your own Port
    ProxyPass / http://127.0.0.1:3001/
    ProxyPassReverse / http://127.0.0.1:3001/
    <Directory "/var/www/project_folder_name">
        AllowOverride All
    </Directory>
</VirtualHost>
  • Enable the Proxy module with Apache
sudo a2enmod proxy
sudo a2enmod proxy_http
  • Enable Virtual Host
cd /etc/apache2/sites-available/
sudo a2ensite your_domain.conf
  • Check Configuration is correct or not
sudo apache2ctl configtest
  • Restart Apache2
sudo service apache2 restart
  • Create pm2 config File
sudo nano /var/www/project_folder_name/ecosystem.config.js
  • Write below code in ecosystem.config.js file
module.exports = {
  apps : [
      {
        name: "myapp",
        script: ".output/server/index.mjs",
        port: 3001,
        watch: true
      }
  ]
}
  • Start NuxtJS Application using pm2
pm2 start ecosystem.config.js
  • Save PM2 Process
pm2 save
  • Check PM2 Status
pm2 status
  • Now you can make some changes in your project local development VS Code and Pull it on Remote Server
  • Pull the changes from github repo
cd /var/www/project_folder_name
git pull
  • Create Production Build
npm run build
  • Reload using PM2
pm2 reload app_name

How to Automate NuxtJS Deployment using Github Action

  • On Your Local Machine, Open Your Project using VS Code or any Editor
  • Create A Folder named .scripts inside your root project folder e.g. miniblog/.scripts
  • Inside .scripts folder Create A file with .sh extension e.g. miniblog/.scripts/deploy.sh
  • Write below script inside the created .sh file
#!/bin/bash
set -e

echo "Deployment started..."

# Pull the latest version of the app
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!"
  • Go inside .scripts Folder then Set File Permission for .sh File
git update-index --add --chmod=+x deploy.sh
  • Create Directory Path named .github/workflows inside your root project folder e.g. miniblog/.github/workflows
  • Inside workflows folder Create A file with .yml extension e.g. miniblog/.github/workflows/deploy.yml
  • Write below script inside the created .yml file
name: Deploy

# Trigger the workflow on push and
# pull request events on the master branch
on:
  push:
    branches: ["master"]
  pull_request:
    branches: ["master"]

# Authenticate to the the server via ssh
# and run our deployment script
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"
  • Go to Your Github Repo Click on Settings
  • Click on Secrets and Variables from the Sidebar then choose Actions
  • On Secret Tab, Click on New Repository Secret
  • Add Four Secrets HOST, PORT, USERNAME and SSHKEY as below
Name: HOST
Secret: Your_Server_IP
Name: PORT
Secret: Your_Server_PORT
Name: USERNAME
Secret: Your_Server_User_Name
  • You can get Server User Name by loging into your server via ssh then run below command
whoami
  • Generate SSH Key for Github Action by Login into Remote Server then run below Command OR You can use old SSH Key But I am creating New one for Github Action
Syntax:- ssh-keygen -f key_path -t ed25519 -C "your_email@example.com"
Example:- ssh-keygen -f /home/nim/.ssh/gitaction_ed25519 -t ed25519 -C "gitactionautodep"
  • Open Newly Created Public SSH Keys then copy the key
cat ~/.ssh/gitaction_ed25519.pub
  • Open authorized_keys File which is inside .ssh/authroized_keys then paste the copied key in a new line
cd .ssh
nano authorized_keys
  • Open Newly Created Private SSH Keys then copy the key, we will use this key to add New Repository Secret On Github Repo
cat ~/.ssh/gitaction_ed25519
Name: SSHKEY
Secret: Private_SSH_KEY_Generated_On_Server
  • Commit and Push the change to Your Github Repo
  • Get Access to Remote Server via SSH
Syntax:- ssh -p PORT USERNAME@HOSTIP
Example:- ssh -p 22 nim@216.32.44.12
  • Go to Your Project Directory
Syntax:- cd /var/www/project_folder_name
Example:- cd /var/www/miniblog
  • Pull the changes from github just once this time.
git pull
  • Your Deployment should become automate.
  • On Local Machine make some changes in Your Project then Commit and Push to Github Repo It will automatically deployed on Live Server
  • You can track your action from Github Actions Tab
  • If you get any File Permission error in the action then you have to change file permission accordingly.
  • All Done