Programación Web · Capítulo 16
Despliegue Web: De Local a Producción
Aprende cómo publicar tu aplicación web para que el mundo entero pueda acceder a ella, de forma rápida, segura y profesional.
1. ¿Qué es el Despliegue (Deployment)?
Desplegar una aplicación significa moverla de tu entorno local (tu computadora) a un servidor accesible públicamente en internet. Cuando alguien escribe tu dominio en su navegador, el servidor responde con tu aplicación.
2. Sitios Estáticos vs Dinámicos
| Tipo | Características | Ejemplos | Hosting recomendado |
|---|
| Estático | Solo HTML/CSS/JS. No ejecuta código en el servidor. | Portfolio, blog con React/Vue compilado | Netlify, Vercel, GitHub Pages |
| Dinámico | Ejecuta código en el servidor (Node.js, Python). Usa base de datos. | API REST, app fullstack | Render, Railway, Fly.io, AWS |
3. Desplegar un Sitio Estático en Vercel
Vercel es la plataforma más simple para proyectos React/Vite. Se conecta a GitHub y despliega automáticamente en cada push.
# 1. Asegúrate de que el build funciona localmente
npm run build
# Esto genera la carpeta dist/ con archivos optimizados
# 2. Sube tu código a GitHub
git add .
git commit -m "feat: proyecto listo para producción"
git push origin main
# 3. En vercel.com:
# - Conecta tu cuenta de GitHub
# - Importa el repositorio
# - Vercel detecta automáticamente que es Vite/React
# - Configura: Build Command = "npm run build", Output = "dist"
# - Haz clic en Deploy
# 4. En ~30 segundos tu sitio está en:
# https://tu-proyecto.vercel.app
# Desde ese momento, cada push a main despliega automáticamente
4. Desplegar un Backend Node.js en Render
# render.com — servicio gratuito para apps Node.js
# 1. Asegúrate de que package.json tiene el script start:
{
"scripts": {
"start": "node index.js"
}
}
# 2. El servidor debe usar el puerto de la variable de entorno:
const PORT = process.env.PORT || 3000;
app.listen(PORT);
# 3. En render.com:
# - New > Web Service
# - Conecta tu repositorio de GitHub
# - Build Command: npm install
# - Start Command: npm start
# - Añade tus variables de entorno en la sección "Environment"
# 4. Tu API estará en:
# https://tu-api.onrender.com
5. Nombres de Dominio y DNS
Un nombre de dominio (ej: miproyecto.com) es una dirección legible que apunta a la IP de tu servidor. El DNS (Domain Name System) traduce nombres de dominio a direcciones IP, como una guía telefónica de internet.
Proceso de configuración de dominio personalizado:
1. Comprar dominio en: Namecheap, Google Domains, GoDaddy
Ejemplo: miproyecto.com (~$10-15/año)
2. En el panel de tu hosting (Vercel/Render):
- Ir a Settings > Domains
- Añadir tu dominio: miproyecto.com
3. El hosting te da registros DNS para configurar:
Tipo A: @ → 76.76.21.21 (IPv4 del servidor)
Tipo CNAME: www → cname.vercel-dns.com
4. En tu proveedor de dominio, configurar esos registros DNS
5. Esperar propagación DNS: 5 minutos a 48 horas
6. Vercel/Render configuran HTTPS automáticamente con Let's Encrypt
6. HTTPS y Certificados SSL
HTTPS (HTTP Secure) cifra la comunicación entre el navegador y el servidor. Sin HTTPS, los datos viajan en texto plano — cualquier intermediario puede leerlos. Chrome marca los sitios HTTP como "No Seguros".
- Vercel, Netlify y Render configuran HTTPS automáticamente y gratis con Let's Encrypt.
- Los certificados SSL se renuevan automáticamente cada 90 días.
- HTTPS es obligatorio para: pagos, contraseñas, datos personales, PWAs, geolocalización.
7. Variables de Entorno en Producción
# NUNCA subas .env a GitHub — están en .gitignore
# En Vercel: Settings > Environment Variables
# En Render: Environment > Add Environment Variable
# Variables típicas de producción:
DATABASE_URL=postgresql://usuario:pass@host:5432/dbname
JWT_SECRET=clave_muy_larga_y_aleatoria_para_produccion
NODE_ENV=production
STRIPE_SECRET_KEY=sk_live_...
# En el código:
const esProd = process.env.NODE_ENV === "production";
const dbUrl = process.env.DATABASE_URL;
if (!dbUrl) {
throw new Error("DATABASE_URL es requerida en producción");
}
8. CI/CD con GitHub Actions
CI/CD (Continuous Integration / Continuous Deployment) automatiza las pruebas y el despliegue cada vez que haces push.
# .github/workflows/deploy.yml
name: Despliegue Automático
on:
push:
branches: [main] # Se activa en cada push a main
jobs:
test-y-build:
runs-on: ubuntu-latest
steps:
- name: Descargar código
uses: actions/checkout@v4
- name: Configurar Node.js
uses: actions/setup-node@v4
with:
node-version: "20"
cache: "npm"
- name: Instalar dependencias
run: npm ci
- name: Ejecutar pruebas
run: npm test
- name: Construir para producción
run: npm run build
- name: Desplegar a Vercel
uses: amondnet/vercel-action@v25
with:
vercel-token: ${{ secrets.VERCEL_TOKEN }}
vercel-org-id: ${{ secrets.ORG_ID }}
vercel-project-id: ${{ secrets.PROJECT_ID }}
vercel-args: "--prod"
9. Optimización del Build
# vite.config.ts — optimización automática con Vite
export default defineConfig({
build: {
rollupOptions: {
output: {
// Separar vendor (React, etc.) del código propio
manualChunks: {
vendor: ["react", "react-dom"],
router: ["react-router-dom"]
}
}
},
// Comprimir con gzip
reportCompressedSize: true,
// Alertar si un chunk supera 500KB
chunkSizeWarningLimit: 500
}
});
# El build de Vite:
# - Minifica JavaScript y CSS (elimina espacios, acorta nombres)
# - Tree shaking (elimina código no usado)
# - Code splitting (divide en chunks para carga lazy)
# - Genera hashes en nombres de archivos para cache busting
10. Monitoreo Básico en Producción
// Logging básico con timestamps en el servidor
app.use((req, res, next) => {
const inicio = Date.now();
res.on("finish", () => {
const duracion = Date.now() - inicio;
console.log(
`${new Date().toISOString()} | ${req.method} ${req.url} | ${res.statusCode} | ${duracion}ms`
);
});
next();
});
// Manejo de errores no capturados (evita caídas del servidor)
process.on("uncaughtException", (error) => {
console.error("Error no capturado:", error);
// En producción: notificar a Sentry/LogRocket antes de salir
process.exit(1);
});
// Herramientas de monitoreo gratuitas:
// - UptimeRobot: alerta si tu sitio cae
// - Sentry: captura errores de JavaScript en producción
// - Vercel Analytics: métricas de visitas y performance
Resumen del Capítulo
- Los sitios estáticos (React compilado) se despliegan gratis en Vercel o Netlify conectando el repositorio de GitHub; el despliegue es automático en cada push.
- Los backends dinámicos (Node.js/Express) se despliegan en Render o Railway; el servidor debe leer el puerto de
process.env.PORT.
- Los dominios se compran en registradores y se configuran con registros DNS (tipo A y CNAME) que apuntan al servidor de hosting.
- HTTPS es obligatorio en producción; plataformas modernas como Vercel lo configuran automáticamente con Let's Encrypt.
- Las variables de entorno (contraseñas, claves API) se configuran en el panel del hosting, nunca en el código ni en Git.
- GitHub Actions permite automatizar pruebas y despliegue (CI/CD) en cada push, garantizando que solo código que pasa las pruebas llega a producción.
- Herramientas como UptimeRobot y Sentry alertan cuando el sitio cae o ocurren errores, permitiendo respuesta rápida.