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

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

Posted by

kamlesh paul

on

May 1, 2025

3 min read

Last updated on : May 1, 2025

96 views

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
  1. 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

Get updates directly to your inbox.

Join 500+ developers getting updates on Laravel & Next.js tips. No spam,
unsubscribe anytime.


Share this article:

96 views