Deploying Next.js with MongoDB, Prisma, TailwindCSS, and shadcn/ui to VPS using GitHub Actions

RRubel Amin•October 9, 2025•

8 min read

•

0 comments

•

799 Views

Deploying Next.js with MongoDB, Prisma, TailwindCSS, and shadcn/ui to VPS using GitHub Actions

Overview

This guide provides a complete setup for deploying a Next.js application with MongoDB, Prisma, TailwindCSS, and shadcn/ui to a VPS server using GitHub Actions for continuous deployment.

Prerequisites

VPS server with Ubuntu 20.04+ (DigitalOcean, Linode, AWS EC2, etc.)
GitHub repository with your Next.js project
SSH access to your VPS
Domain name (optional)

VPS Server Setup

1. Initial Server Configuration

# Update system
sudo apt update && sudo apt upgrade -y

# Install Node.js
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt-get install -y nodejs

# Install PM2 for process management
sudo npm install -g pm2

# Install MongoDB
wget -qO - https://www.mongodb.org/static/pgp/server-6.0.asc | sudo apt-key add -
echo "deb [ arch=amd64,arm64 ] https://repo.mongodb.org/apt/ubuntu focal/mongodb-org/6.0 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-6.0.list
sudo apt update
sudo apt install -y mongodb-org

# Start MongoDB
sudo systemctl start mongod
sudo systemctl enable mongod

# Install Nginx
sudo apt install -y nginx

2. Create Deployment User

# Create a new user for deployments
sudo adduser deployer
sudo usermod -aG sudo deployer

# Switch to deployer user
su - deployer

3. SSH Key Setup

Generate SSH key pair on your VPS:

ssh-keygen -t ed25519 -C "deployer@your-domain.com"
cat ~/.ssh/id_ed25519.pub >> ~/.ssh/authorized_keys
chmod 600 ~/.ssh/authorized_keys

GitHub Repository Configuration

1. Add Secrets to GitHub

Go to your repository Settings → Secrets and variables → Actions and add:

```
VPS_HOST
```
: Your VPS IP address or domain
```
VPS_USERNAME
```
:
```
deployer
```
```
VPS_SSH_KEY
```
: The private SSH key from your VPS
```
NODE_ENV
```
:
```
production
```
```
DATABASE_URL
```
: Your MongoDB connection string

2. Environment Variables

Create

.env.production

in your project:

env

NODE_ENV=production
DATABASE_URL=mongodb://localhost:27017/your-database-name
NEXTAUTH_SECRET=your-nextauth-secret
NEXTAUTH_URL=https://your-domain.com

GitHub Actions Workflows

1. Main Deployment Workflow

Create

.github/workflows/deploy.yml

yaml

name: Deploy to VPS

on:
  push:
    branches: [ main, master ]
  pull_request:
    branches: [ main, master ]

jobs:
  deploy:
    runs-on: ubuntu-latest
    if: github.ref == 'refs/heads/main' || github.ref == 'refs/heads/master'

    steps:
    - name: Checkout code
      uses: actions/checkout@v4

    - name: Setup Node.js
      uses: actions/setup-node@v4
      with:
        node-version: '18'
        cache: 'npm'

    - name: Install dependencies
      run: npm ci

    - name: Generate Prisma client
      run: npx prisma generate

    - name: Run tests
      run: npm run test

    - name: Build application
      run: npm run build
      env:
        DATABASE_URL: ${{ secrets.DATABASE_URL }}
        NEXTAUTH_SECRET: ${{ secrets.NEXTAUTH_SECRET }}
        NEXTAUTH_URL: ${{ secrets.NEXTAUTH_URL }}

    - name: Deploy to VPS
      uses: appleboy/ssh-action@v1.0.3
      with:
        host: ${{ secrets.VPS_HOST }}
        username: ${{ secrets.VPS_USERNAME }}
        key: ${{ secrets.VPS_SSH_KEY }}
        script: |
          cd /home/deployer/app
          git pull origin main
          npm ci --only=production
          npx prisma generate
          npx prisma db push
          npm run build
          pm2 restart nextjs-app || pm2 start npm --name "nextjs-app" -- start

2. Comprehensive Deployment with Rollback

Create

.github/workflows/deploy-advanced.yml

yaml

name: Advanced Deploy to VPS

on:
  push:
    branches: [ main, master ]
  workflow_dispatch:

env:
  NODE_VERSION: '18'
  APP_DIR: '/home/deployer/app'
  APP_NAME: 'nextjs-app'

jobs:
  test:
    runs-on: ubuntu-latest
    
    steps:
    - name: Checkout code
      uses: actions/checkout@v4

    - name: Setup Node.js
      uses: actions/setup-node@v4
      with:
        node-version: ${{ env.NODE_VERSION }}
        cache: 'npm'

    - name: Install dependencies
      run: npm ci

    - name: Generate Prisma client
      run: npx prisma generate

    - name: Run type check
      run: npx tsc --noEmit

    - name: Run tests
      run: npm run test

    - name: Run linting
      run: npm run lint

    - name: Build application
      run: npm run build
      env:
        DATABASE_URL: ${{ secrets.DATABASE_URL }}
        NEXTAUTH_SECRET: ${{ secrets.NEXTAUTH_SECRET }}
        NEXTAUTH_URL: ${{ secrets.NEXTAUTH_URL }}

  deploy:
    runs-on: ubuntu-latest
    needs: test
    if: github.ref == 'refs/heads/main' || github.ref == 'refs/heads/master'

    steps:
    - name: Checkout code
      uses: actions/checkout@v4

    - name: Setup deployment environment
      run: |
        mkdir -p deploy
        cp -r ./* deploy/
        cd deploy && tar -czf ../app.tar.gz .

    - name: Create deployment script
      run: |
        cat > deploy.sh << 'EOF'
        #!/bin/bash
        set -e
        
        APP_DIR="/home/deployer/app"
        BACKUP_DIR="/home/deployer/backups"
        TIMESTAMP=$(date +%Y%m%d_%H%M%S)
        
        # Create backup
        if [ -d "$APP_DIR" ]; then
          tar -czf "$BACKUP_DIR/backup_$TIMESTAMP.tar.gz" -C /home/deployer app
        fi
        
        # Extract new version
        tar -xzf app.tar.gz -C $APP_DIR
        
        # Install dependencies
        cd $APP_DIR
        npm ci --only=production
        
        # Setup database
        npx prisma generate
        npx prisma db push
        
        # Build application
        npm run build
        
        # Restart application
        pm2 describe nextjs-app > /dev/null 2>&1 && pm2 reload nextjs-app || pm2 start npm --name "nextjs-app" -- start
        
        # Save PM2 configuration
        pm2 save
        pm2 startup
        EOF

        chmod +x deploy.sh

    - name: Copy files to VPS
      uses: appleboy/scp-action@v0.1.7
      with:
        host: ${{ secrets.VPS_HOST }}
        username: ${{ secrets.VPS_USERNAME }}
        key: ${{ secrets.VPS_SSH_KEY }}
        source: "app.tar.gz,deploy.sh"
        target: "/home/deployer/"
        strip_components: 1

    - name: Execute deployment script
      uses: appleboy/ssh-action@v1.0.3
      with:
        host: ${{ secrets.VPS_HOST }}
        username: ${{ secrets.VPS_USERNAME }}
        key: ${{ secrets.VPS_SSH_KEY }}
        script: |
          cd /home/deployer
          chmod +x deploy.sh
          mkdir -p backups
          ./deploy.sh
          rm -f app.tar.gz deploy.sh

    - name: Verify deployment
      uses: appleboy/ssh-action@v1.0.3
      with:
        host: ${{ secrets.VPS_HOST }}
        username: ${{ secrets.VPS_USERNAME }}
        key: ${{ secrets.VPS_SSH_KEY }}
        script: |
          sleep 10
          curl -f http://localhost:3000/api/health || exit 1

  notify:
    runs-on: ubuntu-latest
    needs: deploy
    if: always()
    
    steps:
    - name: Notify deployment status
      uses: 8398a7/action-slack@v3
      with:
        status: ${{ job.status }}
        text: Deployment ${{ job.status }} for ${{ github.repository }}
      env:
        SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}

3. Database Migration Workflow

Create

.github/workflows/migrate-db.yml

yaml

name: Database Migration

on:
  workflow_dispatch:
  push:
    branches: [ main, master ]
    paths:
      - 'prisma/**'

jobs:
  migrate:
    runs-on: ubuntu-latest
    
    steps:
    - name: Checkout code
      uses: actions/checkout@v4

    - name: Setup Node.js
      uses: actions/setup-node@v4
      with:
        node-version: '18'

    - name: Install dependencies
      run: npm ci

    - name: Deploy database changes
      uses: appleboy/ssh-action@v1.0.3
      with:
        host: ${{ secrets.VPS_HOST }}
        username: ${{ secrets.VPS_USERNAME }}
        key: ${{ secrets.VPS_SSH_KEY }}
        script: |
          cd /home/deployer/app
          git pull origin main
          npm ci
          npx prisma generate
          npx prisma migrate deploy
          npx prisma db seed

VPS Application Setup Script

Create

setup-app.sh

on your VPS:

bash

#!/bin/bash

set -e

APP_DIR="/home/deployer/app"
LOG_DIR="/home/deployer/logs"

echo "Setting up Next.js application..."

# Create directories
mkdir -p $APP_DIR $LOG_DIR

# Clone repository (initial setup)
cd $APP_DIR
if [ ! -d ".git" ]; then
    git clone https://github.com/your-username/your-repo.git .
fi

# Install dependencies
npm ci --only=production

# Generate Prisma client
npx prisma generate

# Push database schema
npx prisma db push

# Build application
npm run build

# Create PM2 ecosystem file
cat > ecosystem.config.js << 'EOF'
module.exports = {
  apps: [{
    name: 'nextjs-app',
    script: 'npm',
    args: 'start',
    instances: 'max',
    exec_mode: 'cluster',
    env: {
      NODE_ENV: 'production',
      PORT: 3000
    },
    error_file: '/home/deployer/logs/err.log',
    out_file: '/home/deployer/logs/out.log',
    log_file: '/home/deployer/logs/combined.log',
    time: true
  }]
}
EOF

# Start application with PM2
pm2 start ecosystem.config.js
pm2 save
pm2 startup

echo "Application setup completed!"

Nginx Configuration

Create

/etc/nginx/sites-available/your-domain.com

nginx

server {
    listen 80;
    server_name your-domain.com www.your-domain.com;

    # Security headers
    add_header X-Frame-Options "SAMEORIGIN" always;
    add_header X-XSS-Protection "1; mode=block" always;
    add_header X-Content-Type-Options "nosniff" always;
    add_header Referrer-Policy "no-referrer-when-downgrade" always;
    add_header Content-Security-Policy "default-src 'self' http: https: data: blob: 'unsafe-inline'" always;

    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_cache_bypass $http_upgrade;
    }

    # Cache static assets
    location /_next/static/ {
        proxy_cache STATIC;
        proxy_pass http://localhost:3000;
        proxy_ignore_headers Cache-Control;
        proxy_cache_valid 200 60d;
    }

    location /api/ {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

Enable the site:

bash

sudo ln -s /etc/nginx/sites-available/your-domain.com /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl reload nginx

Monitoring and Logs

PM2 Monitoring

bash

# PM2 commands
pm2 status                 # Check application status
pm2 logs nextjs-app       # View application logs
pm2 monit                 # Monitor resources
pm2 restart nextjs-app    # Restart application

Log Rotation

Create

/etc/logrotate.d/nextjs-app

text

/home/deployer/logs/*.log {
    daily
    missingok
    rotate 7
    compress
    delaycompress
    notifempty
    copytruncate
}

Troubleshooting

Common Issues

Build failures: Check Node.js version compatibility
Database connection issues: Verify MongoDB service is running
Permission errors: Ensure deployer user has correct permissions
Port conflicts: Check if port 3000 is available

Debugging Steps

bash

# Check application status
pm2 status

# Check logs
pm2 logs nextjs-app --lines 100

# Verify MongoDB
sudo systemctl status mongod
mongo --eval "db.adminCommand('ismaster')"

# Check Nginx
sudo nginx -t
sudo systemctl status nginx

# Verify network
curl http://localhost:3000

Security Considerations

Use strong SSH keys and disable password authentication
Configure firewall (UFW) to allow only necessary ports
Keep system and dependencies updated
Use environment variables for sensitive data
Implement rate limiting and DDoS protection
Regular security audits and updates

Conclusion

This setup provides a robust, automated deployment pipeline for Next.js applications with MongoDB, Prisma, TailwindCSS, and shadcn/ui. The GitHub Actions workflows ensure consistent deployments with proper testing, building, and deployment steps.

The configuration includes:

Automated testing and building
Zero-downtime deployments
Database migrations
Comprehensive monitoring
Security best practices

With this setup, you can focus on development while GitHub Actions handles the deployment process automatically.

Deploying Next.js with MongoDB, Prisma, TailwindCSS, and shadcn/ui to VPS using GitHub Actions

Overview

Prerequisites

VPS Server Setup

1. Initial Server Configuration

2. Create Deployment User

3. SSH Key Setup

GitHub Repository Configuration

1. Add Secrets to GitHub

2. Environment Variables

GitHub Actions Workflows

1. Main Deployment Workflow

2. Comprehensive Deployment with Rollback

3. Database Migration Workflow

VPS Application Setup Script

Nginx Configuration

Monitoring and Logs

PM2 Monitoring

Log Rotation

Troubleshooting

Common Issues

Debugging Steps

Security Considerations

Conclusion

Discussion (0)