De la desarrollo local a la producción: despliegue de aplicaciones TypeScript en 2024

Entrenador de Python en Línea para Principiantes

Aprende Python fácilmente sin sobrecargarte de teoría. Resuelve tareas prácticas con verificación automática, recibe pistas y escribe código directamente en el navegador, sin instalar nada.

Start Course

¿Tu código TypeScript está listo para conquistar el mundo? Es hora de enviarlo a producción

\n\n

Escribiste la aplicación TypeScript perfecta. Localmente todo vuela, los tipos son estrictos, el código es hermoso. Pero cuando surge la pregunta «¿Y cómo ejecuto esto en el servidor?», muchos desarrolladores se quedan en blanco. ¿Te suena familiar?

\n\n

El despliegue de aplicaciones TypeScript no es rocket science, pero tampoco es «solo copiar la carpeta». En este artículo, analizaremos tres enfoques principales: el VPS clásico, el Docker moderno y las plataformas en la nube. Aprenderás cómo compilar correctamente un proyecto TypeScript, configurar el entorno y automatizar el lanzamiento de actualizaciones. ¡Allá vamos!

\n\n

Paso 1: Preparación de la aplicación TypeScript para el despliegue

\n\n

Antes de pensar en servidores, debes asegurarte de que tu aplicación esté lista para funcionar fuera del entorno local. TypeScript es una capa adicional que se compila a JavaScript. En el servidor, Node.js no entiende los archivos .ts directamente (a menos que uses ts-node, lo cual no se recomienda para producción).

\n\n

Compilación del proyecto

\n\n

Asegúrate de que en tu package.json estén definidos los scripts correctos:

\n\n
{\n  "scripts": {\n    "build": "tsc",\n    "start": "node dist/index.js",\n    "dev": "ts-node-dev --respawn src/index.ts"\n  },\n  "main": "dist/index.js"\n}
\n\n

El comando npm run build creará la carpeta dist con el código JS listo. Esa es la carpeta que desplegaremos.

\n\n

Consejo: agrega "outDir": "./dist" en tsconfig.json y configura exclude para node_modules:

\n\n
{\n  "compilerOptions": {\n    "outDir": "./dist",\n    "rootDir": "./src",\n    "target": "ES2020",\n    "module": "commonjs",\n    "strict": true,\n    "esModuleInterop": true\n  },\n  "include": ["src/**/*"],\n  "exclude": ["node_modules", "dist"]\n}
\n\n

Método 1: VPS clásico — control total

\n\n

VPS (Virtual Private Server) es un servidor alquilado donde tú eres el rey y el señor. Es adecuado para proyectos que necesitan control total sobre el entorno. Veamos el despliegue en Ubuntu 22.04.

\n\n

Configuración del servidor

\n\n
    \n
  • Nos conectamos por SSH: ssh root@tu_IP
  • \n
  • Actualizamos los paquetes: apt update && apt upgrade -y
  • \n
  • Instalamos Node.js 20.x: \n curl -fsSL https://deb.nodesource.com/setup_20.x | bash - && apt install -y nodejs\n
  • \n
  • Instalamos PM2 — el gestor de procesos para Node.js:\n npm install -g pm2\n
  • \n
\n\n

Despliegue de la aplicación

\n\n

La forma más sencilla es copiar los archivos mediante SCP o Git. Recomiendo Git:

\n\n
git clone https://github.com/tu-repositorio/proyecto.git /var/www/miapp\ncd /var/www/miapp\nnpm install\nnpm run build\npm2 start dist/index.js --name "miapp"\npm2 save\npm2 startup
\n\n

Importante: configura Nginx como reverse proxy para que la aplicación esté disponible en el puerto 80:

\n\n
server {\n    listen 80;\n    server_name tu-dominio.es;\n\n    location / {\n        proxy_pass http://localhost:3000;\n        proxy_http_version 1.1;\n        proxy_set_header Upgrade $http_upgrade;\n        proxy_set_header Connection 'upgrade';\n        proxy_set_header Host $host;\n        proxy_cache_bypass $http_upgrade;\n    }\n}
\n\n

No olvides configurar SSL con Certbot — es gratuito y obligatorio para la web moderna.

\n\n

Método 2: Docker — contenedorización para reproducibilidad

\n\n

Docker resuelve el principal problema del VPS: «¡En mi máquina funciona!». El contenedor contiene todo lo necesario — Node.js, dependencias, código compilado. El entorno es idéntico en cualquier sistema operativo.

\n\n

Dockerfile para TypeScript

\n\n

Creamos una compilación multi-etapa (multi-stage build) — esto reduce la imagen final:

\n\n
# Etapa 1: compilación de TypeScript\nFROM node:20-alpine AS builder\nWORKDIR /app\nCOPY package*.json ./\nRUN npm ci\nCOPY . .\nRUN npm run build\n\n# Etapa 2: imagen de producción                

Blogs

Book Recommendations