Migración de Vercel/Netlify a tu propio VPS: NextJS standalone

Para migrar de Vercel a su propio VPS, lo ideal es utilizar el modo standalone de NextJS, que permite empaquetar la aplicación en un contenedor Docker ligero y ejecutarla en un servidor con un coste desde $10-20 al mes, eliminando por completo los sobrecostes por Edge Functions, ancho de banda y optimización de imágenes.

La economía de la migración: por qué un VPS como alternativa a Vercel se vuelve una necesidad

Vercel y Netlify son herramientas magníficas para un inicio rápido, pero su modelo de negocio está construido sobre el "impuesto al éxito". Tan pronto como su proyecto comienza a generar un tráfico significativo o a utilizar activamente funciones de servidor, las facturas crecen exponencialmente. La razón principal para buscar una vercel alternative vps es la falta de transparencia en los precios más allá de los límites del plan Pro.

Un caso típico: un proyecto en NextJS con 500,000 visitantes únicos al mes. En Vercel, empezará a pagar no solo $20 por desarrollador, sino también por exceder los límites en los siguientes puntos:

• Bandwidth: $40 por cada 100 GB adicionales. En su propio VPS, el tráfico suele ser ilimitado o cuesta entre 10 y 20 veces menos.
• Edge Functions: Pago por tiempo de ejecución y número de llamadas. Una lógica compleja en el Middleware puede elevar la factura entre $200 y $500 al mes.
• Image Optimization: $5 por cada 1,000 imágenes optimizadas adicionales.

Cuando se da cuenta de que no tiene por qué pagar a Vercel por "aire", la transición a su propia infraestructura se convierte en un paso lógico. El uso de una alternativa a AWS EC2 para backend en forma de un VPS de alto rendimiento permite no solo ahorrar, sino también obtener una facturación fija (Fixed Billing) predecible.

Self-host NextJS: entendiendo el modo standalone

La principal dificultad con la que asustan los defensores de las soluciones PaaS es la configuración del entorno. Sin embargo, a partir de la versión 12, NextJS soporta el modo output: 'standalone'. Esta es una "killer feature" para aquellos que planean hacer self host nextjs.

En este modo, NextJS recopila automáticamente solo los archivos necesarios para el funcionamiento en producción, incluyendo una versión mínima de node_modules. El resultado de la compilación es un único archivo server.js, que reemplaza la enorme carpeta del proyecto. Esto permite reducir el tamaño de la imagen Docker de 1.5 GB a unos 150-200 MB.

Cómo activar el modo standalone

En el archivo next.config.js, añada la siguiente configuración:

module.exports = {
  output: 'standalone',
}

Después de ejecutar el comando next build, la carpeta .next/standalone contendrá todo lo necesario para iniciar el servidor. Ya no necesita copiar todo el código fuente al VPS, lo que hace que el proceso de vercel to vps sea lo más limpio y profesional posible.

Vercel to VPS: guía paso a paso para la contenerización

Para un despliegue fiable, lo mejor es utilizar Docker. Esto garantiza que la aplicación funcionará de la misma manera en su máquina y en el servidor de Valebyte. A continuación se muestra un Dockerfile optimizado para una aplicación NextJS.

FROM node:20-alpine AS base

# Instalación de dependencias
FROM base AS deps
RUN apk add --no-cache libc6-compat
WORKDIR /app
COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
RUN npm ci

# Compilación del proyecto
FROM base AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .
RUN npm run build

# Imagen final
FROM base AS runner
WORKDIR /app
ENV NODE_ENV production
RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs

COPY --from=builder /app/public ./public
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static

USER nextjs
EXPOSE 3000
ENV PORT 3000
CMD ["node", "server.js"]

Este Dockerfile implementa un multi-stage build, lo cual es crítico para el rendimiento. Si busca una alternativa a DigitalOcean, preste atención a nuestras tarifas con discos NVMe: la velocidad de construcción de la imagen en ellos será 2-3 veces mayor debido a la ausencia de límites estrictos de IOPS.

Configuración de Docker Compose

Para gestionar el contenedor y los servicios asociados (por ejemplo, Redis para el almacenamiento en caché de ISR), utilice docker-compose.yml:

version: '3.8'
services:
  nextjs:
    build: .
    ports:
      - "3000:3000"
    environment:
      - DATABASE_URL=${DATABASE_URL}
      - NEXTAUTH_SECRET=${NEXTAUTH_SECRET}
    restart: always

Cuando no hay nada que pagar a Vercel: configuración del entorno en el servidor

Una vez que el contenedor está listo, es necesario configurar la parte del frontend: servidor web, certificados SSL y protección contra ataques. En Vercel, esto es "magia" bajo el capó; en un VPS, son 10 minutos de configuración de Nginx.

Instalación de Nginx como Reverse Proxy

Nginx recibirá las peticiones en los puertos 80/443 y las redirigirá a su contenedor Docker. Ejemplo de configuración:

server {
    listen 80;
    server_name sudominio.com;

    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_cache_bypass $http_upgrade;
    }
}

Para automatizar la obtención de certificados SSL, utilice Certbot. Es gratuito y se actualiza automáticamente, a diferencia de las opciones de pago de algunos proveedores. Si planea una migración a gran escala, consulte nuestra guía: migración de AWS Lightsail/EC2 a dedicado, donde se describen detalladamente los matices de la configuración de la red para altas cargas.

Alternativa a Netlify: hosting de estáticos y SSR en hardware propio

Muchos eligen Netlify por la comodidad de trabajar con estáticos (SSG). Sin embargo, NextJS en un VPS maneja esto de manera excelente. Al usar next export, obtiene un conjunto de archivos HTML/CSS/JS que Nginx puede servir con una velocidad increíble sin la intervención del proceso Node.js.

Ventajas de un VPS como alternativa a Netlify:

1. Sin límites en formularios: En Netlify, los formularios son de pago después de 100 envíos. En su propio servidor, puede instalar un microservicio sencillo en Go o Python.
2. Custom Headers: Control total sobre Cache-Control, Security Headers y CORS sin modificar archivos de configuración YAML de la plataforma.
3. Proximidad a la BD: Si su base de datos está en el mismo centro de datos (por ejemplo, en Valebyte), la latencia en SSR será <1ms, mientras que las funciones de Vercel podrían estar en otra región.

Para quienes están acostumbrados a las soluciones gestionadas, existe una alternativa de Managed Hosting que combina la comodidad de un panel de control con el bajo coste de alquiler de un servidor.

Seguridad y escalabilidad: Cloudflare Tunnel y balanceo

Al pasar a una vercel alternative vps, es importante no olvidar la seguridad. En las soluciones PaaS, usted está protegido por su infraestructura. En su propio servidor, usted es el dueño de la situación.

Cloudflare Tunnel: ocultando el servidor de miradas indiscretas

En lugar de abrir los puertos 80 y 443 a todo el mundo, puede usar cloudflared. Esto crea un túnel entre su VPS y la red de Cloudflare. Ventajas:

• El servidor no tiene una IP pública expuesta a escáneres de puertos.
• Protección gratuita contra DDoS.
• SSL automático "out of the box".

Escalabilidad de aplicaciones NextJS

Si un solo servidor no es suficiente, el modo standalone de NextJS permite escalar horizontalmente con facilidad. Puede iniciar 5 VPS idénticos y colocar un balanceador de carga (Load Balancer) frente a ellos. Dado que las sesiones en NextJS suelen almacenarse en JWT o en un Redis externo, no habrá problemas de estado (state).

Automatización del despliegue: CI/CD sin costes adicionales

El principal argumento contra el VPS es "en Vercel solo hago git push". En su propio servidor, puede configurar un proceso similar en 15 minutos utilizando GitHub Actions.

Ejemplo de workflow para despliegue automático:

name: Deploy to VPS
on:
  push:
    branches: [ main ]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v2
      - name: Build and push Docker image
        run: |
          docker build -t my-next-app .
          docker save my-next-app | ssh user@vps "docker load"
      - name: Restart container
        run: |
          ssh user@vps "docker-compose up -d"

Este enfoque garantiza un Zero Downtime Deployment. Mientras el nuevo contenedor se construye y se inicia, el antiguo sigue atendiendo el tráfico. Esto hace que self host nextjs sea tan cómodo como usar plataformas en la nube costosas.

Optimización del rendimiento: caché y Sharp

Uno de los costes ocultos de Vercel es la optimización de imágenes. En su propio VPS, debe asegurarse de que la biblioteca sharp esté instalada correctamente. NextJS la utiliza para comprimir imágenes sobre la marcha.

En el Dockerfile, sharp debe estar instalada obligatoriamente para evitar el uso de la solución fallback lenta en JS. Esto permite procesar miles de imágenes por segundo, cargando la CPU de su servidor y no su bolsillo.

También es importante configurar el almacenamiento en caché para ISR (Incremental Static Regeneration). Por defecto, NextJS guarda el caché en el sistema de archivos. En un entorno distribuido, es mejor usar un plugin para Redis para que todas las instancias de la aplicación vean el caché de páginas actualizado.

Conclusiones

La transición de Vercel o Netlify a su propio VPS es una decisión madura para un proyecto que ha superado la etapa de MVP, permitiendo reducir los gastos de hosting entre 10 y 15 veces. Para una migración exitosa, basta con usar NextJS en modo standalone, empaquetarlo en Docker y configurar el despliegue automático a través de GitHub Actions en los servidores fiables de Valebyte.