Migración WordPress a Serverless: Vercel y Funciones AWS Lambda

Introducción: ¿Por qué migrar tu WordPress a un modelo Serverless con Vercel?

El ecosistema de WordPress ha dominado la web durante casi dos décadas, pero su arquitectura tradicional basada en un servidor LAMP (Linux, Apache, MySQL, PHP) presenta limitaciones de escalabilidad, costos y mantenimiento. Cada pico de tráfico requiere aprovisionar recursos, y las actualizaciones de seguridad o plugins pueden convertirse en una pesadilla operativa.

Aquí entra el concepto de WordPress serverless: un modelo donde el frontend se separa del backend, utilizando servicios como Vercel para servir contenido estático y AWS Lambda para ejecutar funciones bajo demanda. El resultado es una arquitectura que escala automáticamente, reduce costos y mejora drásticamente la velocidad de carga.

En este artículo, te guiaré paso a paso por el proceso de migración de un WordPress tradicional a una arquitectura serverless con Vercel, cubriendo desde la planificación hasta la puesta en producción.

¿Qué significa realmente una migración serverless para WordPress?

Antes de lanzarnos a los comandos, es crucial entender qué cambia con esta migración.

Componentes tradicionales vs serverless

Componente	WordPress Tradicional	WordPress Serverless
Frontend	PHP renderizado en servidor	HTML/CSS/JS estático (generado previamente)
Backend	Apache/Nginx + PHP	AWS Lambda (funciones sin servidor)
Base de datos	MySQL en servidor	Aurora Serverless o DynamoDB (opcional)
Caching	Plugins (W3 Total Cache, etc.)	CDN global (Vercel Edge Network)
Escalabilidad	Manual (escalado vertical/horizontal)	Automática (horizontal infinita)

[INFO] La migración no elimina WordPress por completo. Usamos su API REST como headless CMS, manteniendo el panel de administración para crear contenido.

Beneficios clave de esta arquitectura

Escalabilidad WordPress: Vercel sirve páginas desde su CDN global. Si recibes 10 o 10 millones de visitas, el costo es casi el mismo.
Costos reducidos: Pagas solo por las solicitudes a AWS Lambda y el almacenamiento de assets estáticos.
Seguridad mejorada: Sin servidor que atacar directamente. Los ataques DDoS son mitigados por Cloudflare + Vercel.
Rendimiento extremo: Tiempos de carga bajo 100ms (vs 1-3s en hosting compartido).

Planificación de la migración serverless

No migres a ciegas. Sigue este checklist antes de tocar código.

1. Auditoría del sitio actual

# Identifica plugins incompatibles con headless
wp plugin list --status=active --format=csv | grep -iE "cache|seo|form|page-builder"

# Mide el tamaño de la base de datos
wp db size --size_format=mb

2. Define el stack tecnológico

Frontend: Next.js (framework recomendado por Vercel) o Gatsby
Backend headless: WordPress con plugin WPGraphQL o REST API
Hosting serverless: Vercel + AWS Lambda (via API Gateway)
CDN: Vercel Edge Network (incluido)
Base de datos: Opcional. Puedes mantener MySQL tradicional o migrar a Aurora Serverless

3. Prepara el entorno de desarrollo

# Clona tu WordPress existente
git clone https://github.com/tu-usuario/tu-wordpress.git

# Crea un proyecto Next.js
npx create-next-app@latest wordpress-headless --typescript --tailwind

[WARNING] No migres en producción directamente. Crea un staging idéntico para pruebas.

Paso 1: Configurar WordPress como Headless CMS

El primer paso técnico es convertir tu WordPress en un backend sin interfaz gráfica pública.

Instala plugins esenciales

# Desde la terminal de tu servidor WordPress
wp plugin install wpgraphql --activate
wp plugin install wp-rest-cache --activate
wp plugin install advanced-custom-fields --activate

Configura WPGraphQL

# Consulta de prueba en GraphiQL
{
  posts(first: 5) {
    nodes {
      title
      slug
      content
      featuredImage {
        node {
          sourceUrl
        }
      }
    }
  }
}

Protege el backend

# En tu servidor Apache/Nginx original
# Bloquea acceso público al panel de admin
location /wp-admin {
    allow 123.456.789.0/24;  # Tu IP de trabajo
    deny all;
}

# Redirige tráfico no-API a Vercel
location / {
    return 301 https://tusitio.vercel.app$request_uri;
}

Paso 2: Construir el frontend con Next.js en Vercel

Aquí es donde ocurre la magia del WordPress serverless.

Configuración inicial del proyecto

# En tu máquina local
npx create-next-app@latest wordpress-frontend --typescript --tailwind --eslint
cd wordpress-frontend

# Instala dependencias
npm install @apollo/client graphql
npm install next-seo  # Para SEO dinámico

Crea el cliente GraphQL

// lib/apollo-client.ts
import { ApolloClient, InMemoryCache } from '@apollo/client';

const client = new ApolloClient({
  uri: process.env.NEXT_PUBLIC_WORDPRESS_API_URL, // Tu URL de WordPress
  cache: new InMemoryCache(),
  headers: {
    'Content-Type': 'application/json',
  },
});

export default client;

Página principal con datos de WordPress

// pages/index.tsx
import { gql, useQuery } from '@apollo/client';
import client from '../lib/apollo-client';

const GET_POSTS = gql`
  query GetPosts {
    posts(first: 10) {
      nodes {
        title
        slug
        excerpt
        date
        featuredImage {
          node {
            sourceUrl
          }
        }
      }
    }
  }
`;

export async function getStaticProps() {
  const { data } = await client.query({ query: GET_POSTS });
  
  return {
    props: {
      posts: data.posts.nodes,
    },
    revalidate: 60, // ISR: regenera cada 60 segundos
  };
}

export default function Home({ posts }) {
  return (
    <div className="container mx-auto px-4">
      <h1 className="text-4xl font-bold mb-8">Últimos artículos</h1>
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        {posts.map((post) => (
          <article key={post.slug} className="border rounded-lg p-4">
            <img 
              src={post.featuredImage?.node.sourceUrl} 
              alt={post.title}
              className="w-full h-48 object-cover rounded"
            />
            <h2 className="text-xl font-semibold mt-4">{post.title}</h2>
            <p className="text-gray-600 mt-2">{post.excerpt}</p>
            <time className="text-sm text-gray-400">{post.date}</time>
          </article>
        ))}
      </div>
    </div>
  );
}

[TIP] Usa revalidate para activar Incremental Static Regeneration (ISR). Esto permite que Vercel regenere páginas bajo demanda sin reconstruir todo el sitio.

Paso 3: Implementar Server-Side Rendering con AWS Lambda

Para funcionalidades dinámicas (búsqueda, formularios, autenticación), necesitas AWS Lambda.

Configura la función Lambda

# Crea un directorio para la función
mkdir -p functions/search
cd functions/search
npm init -y
npm install @vendia/serverless-express express

// functions/search/index.js
const serverless = require('@vendia/serverless-express');
const express = require('express');
const app = express();

app.get('/search', async (req, res) => {
  const query = req.query.q;
  
  // Llama a la API REST de WordPress
  const response = await fetch(
    `https://tu-wordpress.com/wp-json/wp/v2/posts?search=${query}`
  );
  const posts = await response.json();
  
  res.json(posts);
});

exports.handler = serverless({ app });

Integra Lambda con Vercel

// vercel.json (en la raíz de tu proyecto Next.js)
{
  "functions": {
    "api/search.js": {
      "memory": 1024,
      "maxDuration": 10
    }
  },
  "rewrites": [
    {
      "source": "/api/:path*",
      "destination": "/api/:path*"
    }
  ]
}

# Despliega la función en Vercel
vercel deploy --prod

Paso 4: Configurar la escalabilidad automática

La belleza de esta arquitectura es que la escalabilidad WordPress viene por defecto.

Estrategias de caching en Vercel

// next.config.js
module.exports = {
  async headers() {
    return [
      {
        source: '/:path*',
        headers: [
          {
            key: 'Cache-Control',
            value: 'public, max-age=3600, s-maxage=86400, stale-while-revalidate=59',
          },
        ],
      },
    ];
  },
};

Monitoreo de AWS Lambda

# Configura CloudWatch para ver invocaciones
aws cloudwatch put-metric-alarm \
  --alarm-name "LambdaErrors" \
  --metric-name Errors \
  --namespace AWS/Lambda \
  --statistic Sum \
  --period 300 \
  --evaluation-periods 2 \
  --threshold 5 \
  --comparison-operator GreaterThanThreshold

[INFO] Vercel maneja automáticamente el escalado de las páginas estáticas. Solo AWS Lambda requiere configuración de límites de concurrencia.

Paso 5: Migración de la base de datos (opcional pero recomendado)

Si buscas el serverless total, migra tu MySQL a Aurora Serverless.

Exporta datos desde MySQL

wp db export --add-drop-table --no-create-info > wordpress-data.sql

Configura Aurora Serverless

# serverless.yml (usando Serverless Framework)
service: wordpress-db

provider:
  name: aws
  runtime: nodejs18.x

resources:
  Resources:
    AuroraCluster:
      Type: AWS::RDS::DBCluster
      Properties:
        Engine: aurora-mysql
        EngineVersion: 8.0.mysql_aurora.3.02.0
        ServerlessV2ScalingConfiguration:
          MinCapacity: 0.5
          MaxCapacity: 8
        DatabaseName: wordpress
        MasterUsername: ${env:DB_USER}
        MasterUserPassword: ${env:DB_PASSWORD}

Conecta Vercel con Aurora

# En Vercel Dashboard -> Environment Variables
WORDPRESS_DB_HOST=tu-cluster.cluster-xxxxx.us-east-1.rds.amazonaws.com
WORDPRESS_DB_USER=admin
WORDPRESS_DB_PASSWORD=tu-password-segura

Pruebas de rendimiento y validación

Antes de cortar el DNS, realiza pruebas exhaustivas.

Benchmark con Lighthouse

# Instala Lighthouse CI
npm install -g @lhci/cli

# Ejecuta auditoría
lhci autorun --collect.url=https://tusitio.vercel.app --collect.numberOfRuns=3

Prueba de estrés con k6

// stress-test.js
import http from 'k6/http';
import { sleep, check } from 'k6';

export const options = {
  stages: [
    { duration: '2m', target: 100 },  // Sube a 100 usuarios
    { duration: '5m', target: 100 },  // Mantén
    { duration: '2m', target: 0 },    // Baja
  ],
};

export default function () {
  const res = http.get('https://tusitio.vercel.app');
  check(res, { 'status was 200': (r) => r.status === 200 });
  sleep(1);
}

k6 run stress-test.js

[WARNING] Si notas errores 504 en Vercel, aumenta el límite de maxDuration en vercel.json o revisa las consultas GraphQL que son muy pesadas.

Costos estimados de la migración serverless

Componente	Costo mensual estimado (10k visitas/día)
Vercel Pro	$20/mes
AWS Lambda (1M invocaciones)	~$0.20
Aurora Serverless	~$15/mes (0.5 ACU mínimo)
WordPress hosting (solo admin)	$5/mes (plan básico)
Total	~$40.20/mes

Comparado con un hosting tradicional que cuesta $30-100/mes por un VPS limitado, el serverless ofrece mejor rendimiento y escalabilidad por un precio similar.

Conclusión: ¿Vale la pena la migración?

Migrar de WordPress tradicional a serverless con Vercel no es un proceso trivial, pero los beneficios son innegables para sitios con tráfico variable o que buscan rendimiento extremo.

Cuándo NO migrar

Sitios con plugins muy específicos que no tienen API REST (ej: foros bbPress complejos).
Equipos sin experiencia en Next.js o GraphQL.
Proyectos con presupuesto mínimo donde el hosting compartido es suficiente.

Cuándo SÍ migrar

Sitios de alto tráfico (más de 50k visitas/mes).
Proyectos que necesitan tiempos de carga bajo 200ms.
Equipos que quieren eliminar la gestión de servidores.
Sitios que usan WordPress solo como CMS y tienen un frontend personalizado.

La migración a WordPress serverless con Vercel y AWS Lambda representa el futuro de la web: escalable, seguro y optimizado para el rendimiento. Si tu sitio está listo para dar el salto, este artículo te ha dado el mapa de ruta completo.