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
-
Login to Your Domain Provider Website.
-
Navigate to Manage DNS.
-
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
-
Login to Remote Server via SSH:
ssh -p PORT USERNAME@HOSTIP
-
Verify Required Software:
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:
sudo ufw status verbose
3. Configure GitHub Access
-
Generate SSH Keys:
ssh-keygen -t ed25519 -C "your_email@example.com"
-
If Permission Denied, Change Ownership:
sudo chown -R user_name .ssh
-
Copy Public SSH Key:
cat ~/.ssh/id_ed25519.pub
-
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.
-
Verify SSH Connection:
ssh -T git@github.com
4. Clone and Setup Your Project
-
Clone Your GitHub Project:
-
Using HTTPS:
git clone https_repo_path
-
Using SSH:
git clone ssh_repo_path
-
-
Move Project Folder to Web Server Public Directory:
sudo mv project_folder_name /var/www
-
Navigate to Project Directory:
cd /var/www/project_folder_name
-
Clear npm Cache (Optional):
npm cache clean --force
-
Install Dependencies:
npm install
-
Create Production Build:
npm run build
5. Configure Apache Virtual Host
-
Create Virtual Host File:
sudo nano /etc/apache2/sites-available/your_domain.conf
-
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>
-
Enable Proxy Modules:
sudo a2enmod proxy sudo a2enmod proxy_http
-
Enable Virtual Host:
sudo a2ensite your_domain.conf
-
Check Configuration:
sudo apache2ctl configtest
-
Restart Apache2:
sudo service apache2 restart
6. Setup PM2 for Nuxt.js
-
Create PM2 Configuration File:
sudo nano /var/www/project_folder_name/ecosystem.config.js
-
Add Configuration:
module.exports = { apps : [ { name: "myapp", script: ".output/server/index.mjs", port: 3001, watch: true } ] }
-
Start Application with PM2:
pm2 start ecosystem.config.js
-
Save PM2 Process:
pm2 save
-
Check PM2 Status:
pm2 status
7. Automate Deployment with GitHub Actions
-
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
-
-
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"
-
-
Add Repository Secrets on GitHub:
- Go to GitHub Repo > Settings > Secrets and Variables > Actions.
- Add secrets:
HOST
,PORT
,USERNAME
, andSSHKEY
.
-
Generate SSH Key for GitHub Actions:
ssh-keygen -f key_path -t ed25519 -C "your_email@example.com"
-
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.
-
Commit and Push Changes to GitHub Repo.
- Deployments should now be automated. Check the GitHub Actions tab for logs and status.