Automating Next.js Deployment to VPS with GitHub Actions CI/CD

GitHub Actions CI/CD streamlines Next.js auto-deployment to a VPS. This guide builds on our Next.js VPS setup guide and zero-downtime deployment scripting, automating the deploy.sh script execution via SSH for seamless updates on every push to the main branch.

#Prerequisites

Before starting, ensure you have:

• A VPS configured with Next.js, Node.js, PM2 (VPS setup guide).
• Zero-downtime deployment script set up (zero-downtime guide).
• SSH access to your VPS.
• A GitHub repository with your Next.js app.

#Setting up SSH Keys

1. Generate an SSH key pair locally:

   ssh-keygen -t rsa -b 4096 -C "your_email@example.com"  -f ./id_rsa

   Or, for enhanced security, use ED25519:

   ssh-keygen -t ed25519 -a 200 -C "your_email@example.com" -f ./id_rsa

   Leave the passphrase empty for GitHub Actions compatibility.

2. Add the public key to your VPS:

   Copy public key

   cat ./id_rsa.pub

   Login via ssh

   ssh your_username@your-vps-ip

   Add in ~/.ssh/authorized_keys

   nano ~/.ssh/authorized_keys

   Ensure correct permissions:

   chmod 700 ~/.ssh
   chmod 600 ~/.ssh/authorized_keys

3. Store the private key in GitHub Secrets: Copy the private key (id_rsa or id_ed25519) and add it as VPS_SSH_KEY in your GitHub repository under Settings > Secrets and variables > Actions > New repository secret.

#Configuring GitHub Secrets

Add the following secrets in Settings > Secrets and variables > Actions:

• VPS_HOST: Your VPS IP address or domain (e.g., 192.168.1.1 or yourdomain.com).
• VPS_USERNAME: VPS username with repository access (e.g., deployuser).
• VPS_SSH_KEY: Private SSH key from the previous step.
• (Optional) VPS_SSH_PORT: Non-standard SSH port if not 22.

#Creating the GitHub Actions Workflow

1. Create a workflow file: In your repository, create .github/workflows/deploy.yml.

2. Add the workflow configuration:

   name: Deploy to VPS
   on:
     push:
       branches:
         - main
   jobs:
     deploy:
       runs-on: ubuntu-latest
       steps:
         - name: Deploy to VPS
           uses: appleboy/ssh-action@v1
           with:
             host: ${{ secrets.VPS_HOST }}
             username: ${{ secrets.VPS_USERNAME }}
             key: ${{ secrets.VPS_SSH_KEY }}
             port: ${{ secrets.VPS_SSH_PORT || 22 }}
             script: |
               cd /home/your_username/your_nextjs_app
               ./deploy.sh

Replace /home/your_username/your_nextjs_app with the actual path to your repository on the VPS. Ensure deploy.sh is executable (zero-downtime guide):

chmod +x /home/your_username/your_nextjs_app/deploy.sh

3. Commit and push the workflow file: Commit deploy.yml to the main branch.

#Testing the Deployment

1. Update your code: Make changes to your Next.js app, commit, and push to the main branch:

   git add .
   git commit -m "Test deployment"
   git push origin main

2. Monitor the workflow: Go to your GitHub repository’s Actions tab, find the Deploy to VPS workflow, and check its status.

3. Verify the deployment: SSH into your VPS, check PM2 logs (pm2 logs nextapp), and visit your app’s URL to confirm updates.

#Conclusion

This GitHub Actions CI/CD setup automates Next.js deployments with zero-downtime, triggered on every main branch push. It builds on our VPS deployment guide and zero-downtime scripting guide, ensuring a reliable, efficient deployment process.

#Key Citations

• Next.js VPS Setup Guide
• Zero-Downtime Deployment Scripting
• appleboy/ssh-action GitHub Repository
• GitHub Actions Documentation