Despliega una aplicación Angular 20+…

En esta guía te acompañaré por los pasos para desplegar una aplicación Angular 20+ renderizada en el servidor en Cloudflare Workers, una potente plataforma serverless que te permite ejecutar tu app de Angular en la red edge global de Cloudflare.

Requisitos previos

Necesitarás lo siguiente:

Node.js 22 o posterior
Una cuenta de Cloudflare

Aplicación de demostración

Puedes ver un ejemplo funcional de este despliegue en acción en https://angular-ssr-app.launchfast.workers.dev/posts. Demuestra una aplicación Angular totalmente renderizada en el servidor ejecutándose en Cloudflare Workers sin cold starts.

Entender la arquitectura

Al desplegar Angular SSR en Cloudflare Workers, la aplicación se divide en dos partes:

Build del navegador (dist/<app>/browser/*) - Recursos estáticos servidos directamente por el manejo de assets de Cloudflare, sin pasar por el Worker
Build del servidor (dist/<app>/server/*) - Empaquetado dentro del Worker para el renderizado en el servidor

El puente del Cloudflare Worker

Crea un punto de entrada para tu despliegue de Cloudflare en cloudflare/worker.ts. Este archivo conecta tu aplicación Angular SSR con el runtime de Cloudflare Workers. Esto es lo que hace:

import {
  AngularAppEngine,
  createRequestHandler,
  ɵsetAngularAppEngineManifest as setAngularAppEngineManifest,
} from '@angular/ssr';

// Generated build artifact containing the engine manifest
import engineManifest from '../dist/angular-ssr-app/server/angular-app-engine-manifest.mjs';

setAngularAppEngineManifest(engineManifest);

const angularApp = new AngularAppEngine();

/**
 * createRequestHandler returns a Web-standard (Request) => Response handler,
 * which is exactly the shape Cloudflare's fetch handler expects.
 */
const fetch = createRequestHandler(async (request: Request) => {
  const response = await angularApp.handle(request);
  return response ?? new Response('Not found', { status: 404 });
});

export default { fetch };

Puntos clave

AngularAppEngine se inicializa para gestionar el renderizado SSR
El engine manifest se importa desde la salida de tu build: contiene plantillas HTML incrustadas y metadatos del build
createRequestHandler envuelve el motor de Angular en un handler fetch conforme a los estándares web que Cloudflare espera
Cualquier solicitud que no coincida con una ruta devuelve un 404

Actualizar la configuración de Wrangler

Actualiza tu archivo wrangler.jsonc a lo siguiente:

{
  "$schema": "node_modules/wrangler/config-schema.json",
  "name": "angular-ssr-app",
  "main": "cloudflare/worker.ts",
  "compatibility_date": "2025-05-05",
  // Enable Node.js compatibility for Angular's SSR dependencies
  "compatibility_flags": ["nodejs_compat"],
  // Define import.meta.url for polyfills compatibility
  "define": {
    "import.meta.url": "\"file:///worker.mjs\""
  },
  // Serve browser build as static assets
  "assets": {
    "directory": "./dist/angular-ssr-app/browser",
    "binding": "ASSETS"
  },
}

Configuración explicada

compatibility_flags: ["nodejs_compat"] - Necesario porque los polyfills de servidor de Angular usan built-ins de Node.js
define - Proporciona un fallback para import.meta.url, que se colapsa durante el empaquetado
assets.directory - Apunta a tu build del navegador para servir archivos estáticos

Configuración del build para Cloudflare

Tu angular.json configura cómo Angular compila para la plataforma de Cloudflare:

{
  "projects": {
    "angular-ssr-app": {
      "architect": {
        "build": {
          "builder": "@angular/build:application",
          "options": {
            "browser": "src/main.ts",
            "server": "src/main.server.ts",
            "outputMode": "server",
            "ssr": {
              "entry": "src/server.ts"
            },
            "security": {
              "allowedHosts": [
                "localhost",
                "angular-ssr-app.launchfast.workers.dev"
              ]
            }
          }
        }
      }
    }
  }
}

Protección contra SSRF con Allowed Hosts

La opción allowedHosts evita los ataques de Server-Side Request Forgery (SSRF):

Solo los nombres de host aquí listados pueden renderizarse en el servidor
Añade tu dominio de producción y tus dominios de preview
En el momento del despliegue, puedes añadir hosts adicionales mediante la variable de entorno NG_ALLOWED_HOSTS sin recompilar

Compilar y desplegar

Tu package.json incluye scripts prácticos para probar y desplegar:

{
  "scripts": {
    "build": "ng build",
    "preview:cf": "npm run build && wrangler dev",
    "deploy:cf": "npm run build && wrangler deploy"
  }
}

Pruebas locales

Para probar tu aplicación localmente antes de desplegar:

npm run preview:cf

Esto compila tu aplicación Angular e inicia el servidor de desarrollo de Wrangler en http://localhost:8787.

Despliegue en Cloudflare

Cuando estés listo para desplegar en producción:

npm run deploy:cf

Esto:

Compila tu aplicación Angular SSR para producción
Empaqueta el código del servidor dentro del Worker usando esbuild
Sube tus recursos del navegador a Cloudflare
Despliega tu Worker globalmente en la red de Cloudflare

Variables de entorno y Allowed Hosts

Para despliegues de staging o preview con dominios distintos, puedes especificar hosts permitidos adicionales en el momento del despliegue sin recompilar:

NG_ALLOWED_HOSTS=staging.example.com,preview.example.com npm run deploy:cf

La variable de entorno acepta nombres de host separados por comas y se combina con los hosts definidos en angular.json en tiempo de ejecución.

Conclusión

¡Genial! Ahora tienes un proyecto Angular 20+ SSR que se despliega automáticamente en Cloudflare sin ninguna configuración adicional dentro del ámbito de Angular.

Si tienes preguntas o encuentras problemas, consulta la documentación de Angular SSR y la documentación de Cloudflare Workers.

Despliega una aplicación Angular 20+ renderizada en el servidor en Cloudflare Workers