Despliegue de Angular en Cloudflare Pages con GitHub Actions

¡Hola, dev! Si estás aquí, es porque sabes que crear una aplicación con Angular es solo la mitad del trabajo. La otra mitad, a menudo más tediosa, es el despliegue. Quieres que tu app esté online, que sea rápida, segura y, si es posible, que no te cueste un dineral. Y sobre todo, quieres que cada `git push` a tu rama principal actualice la web sin que tengas que mover un dedo.

Suena bien, ¿verdad? Pues hoy te traigo la solución perfecta. En este tutorial, te voy a guiar paso a paso para que construyas un pipeline de despliegue continuo (CI/CD) completamente automatizado. Usaremos la potencia de Angular, la infraestructura global de Cloudflare Pages y la magia de las GitHub Actions. Olvídate de los despliegues manuales para siempre.

Contenidos

¿Qué necesitas para empezar?

Antes de meternos en faena, asegúrate de que tienes todo esto listo. No te preocupes, es todo bastante estándar y la mayoría de servicios tienen capas gratuitas generosas.

Node.js instalado en tu máquina.
Una cuenta en GitHub.
Una cuenta (puede ser la gratuita) en Cloudflare.

👉 ¡Importante! A lo largo de esta guía, usaré el placeholder your-app-name. Recuerda reemplazarlo por el nombre real de tu proyecto en todos los comandos y configuraciones.

Paso 1: Creando tu aplicación Angular desde cero

Vamos a empezar por lo básico: tener una aplicación de Angular funcional. Si ya tienes una, puedes saltar al siguiente paso, pero si no, sigue estas instrucciones.

1.1. Instalar el Angular CLI

El Angular CLI es nuestra navaja suiza. Si no lo tienes instalado globalmente, abre tu terminal y ejecuta:

npm install -g @angular/cli

Para verificar que todo ha ido bien, puedes comprobar la versión con ng version.

1.2. Crear el proyecto Angular

Ahora, vamos a crear la aplicación. Ejecuta este comando y no olvides cambiar your-app-name por el nombre que hayas elegido.

ng new your-app-name

La consola te hará algunas preguntas. Para este tutorial, mis recomendaciones son:

¿Qué formato de hoja de estilos quieres usar? Elige CSS.
¿Quieres habilitar Server-Side Rendering (SSR)? Selecciona No.
¿Quieres crear una aplicación ‘zoneless’? Selecciona No.
¿Qué herramientas de IA quieres configurar? Elige None.

👉 Mejora tus conocimientos de Angular con ChatGPT

Una vez termine el proceso, entra en el directorio de tu proyecto:

cd your-app-name

1.3. Probar la app en local

Antes de desplegar nada, vamos a asegurarnos de que la aplicación funciona. Levanta el servidor de desarrollo:

ng serve

Abre tu navegador y ve a http://localhost:4200. Deberías ver la página de bienvenida de Angular. ¡Perfecto!

Paso 2: Preparando tu cuenta de Cloudflare

Ahora toca configurar Cloudflare para que esté listo para recibir nuestra aplicación. Necesitamos dos cosas: un API Token para que GitHub pueda comunicarse con Cloudflare y tu Account ID.

2.1. Crear un API Token

Este token le dará a GitHub Actions los permisos justos y necesarios para desplegar en Pages.

Inicia sesión en tu dashboard de Cloudflare.
Ve a Mi Perfil (arriba a la derecha) → Tokens de API.
Haz clic en Crear token y luego usa la plantilla Crear token personalizado.
Configúralo así:
- Nombre del token: Algo descriptivo, como `your-app-name Deploy`.
- Permisos:
  - Cuenta
  - Cloudflare Pages
  - Editar
- Recursos de la cuenta:
  - Incluir
  - Tu cuenta
Haz clic en Continuar al resumen y luego en Crear token.

👉 ¡Ojo! Cloudflare te mostrará el token una sola vez. Cópialo y guárdalo en un lugar seguro, porque lo necesitarás en un momento.

2.2. Obtener tu Account ID

Es muy fácil. En la página principal de tu dashboard de Cloudflare, mira en la barra lateral derecha. Verás tu ID de cuenta. Cópialo también.

Paso 3: Crear el proyecto en Cloudflare Pages

Vamos a usar Wrangler, el CLI oficial de Cloudflare, para crear el proyecto de Pages desde la terminal. En mi experiencia, es la forma más rápida y directa. Ejecuta los siguientes comandos dentro de la carpeta de tu proyecto de angular.

Primero, instala Wrangler si no lo tienes:

npm install -g wrangler

Ahora, autentícate con tu cuenta de Cloudflare:

wrangler login

Y finalmente, crea el proyecto. Recuerda, usa el nombre de tu app.

wrangler pages project create your-app-name

Wrangler te preguntará el nombre de la rama de producción. Escribe main y pulsa Enter.

Paso 4: Inicializar Git y subirlo a GitHub

El Angular CLI ya inicializa un repositorio de Git por ti, pero vamos a conectarlo con GitHub y a subir nuestro código.

4.1. Crear el repositorio en GitHub

Ve a tu cuenta de GitHub y crea un nuevo repositorio. Nómbralo igual que tu proyecto: your-app-name. Es importante que no lo inicialices con un README, ya que nosotros subiremos nuestros propios archivos.

4.2. Conectar el repositorio local con GitHub

De vuelta a tu terminal, dentro del directorio de tu proyecto, ejecuta estos comandos. Sustituye YOUR_USERNAME y your-app-name con tus datos.

git remote add origin https://github.com/YOUR_USERNAME/your-app-name.git
git branch -M main
git push -u origin main

Si refrescas la página de tu repositorio en GitHub, verás que tu código ya está allí.

👉 Cómo saber qué versión de Node.js tengo instalada: 32 ó 64 bits

Paso 5: Configurar los Secrets en GitHub

Ahora vamos a guardar de forma segura el API Token y el Account ID de Cloudflare en GitHub. Usaremos los «Secrets» del repositorio, que son variables de entorno cifradas.

Ve a tu repositorio de GitHub y haz clic en la pestaña Settings.
En el menú de la izquierda, navega a Secrets and variables → Actions.
Haz clic en New repository secret y añade los siguientes dos secretos:
- Name: CLOUDFLARE_API_TOKEN | Value: (Pega aquí el token que guardaste antes).
- Name: CLOUDFLARE_ACCOUNT_ID | Value: (Pega aquí tu ID de cuenta).

Paso 6: Crear el Workflow de GitHub Actions

¡Llegamos a la parte más emocionante! Aquí es donde definimos la automatización. Crearemos un fichero YAML que le dirá a GitHub qué hacer cada vez que subamos cambios.

6.1. Crear el fichero de workflow

En la raíz de tu proyecto, crea la siguiente estructura de carpetas y ficheros: .github/workflows/deploy-cloudflare.yml.

Abre el fichero deploy-cloudflare.yml y pega este contenido. Lee el comentario, ¡es importante!

name: Deploy to Cloudflare Pages

on:
  push:
    branches: [ "main" ] # Se activa con cada push a la rama main
  pull_request:
    branches: [ "main" ] # Tambi&eacute;n se activa en Pull Requests a main
  workflow_dispatch: # Permite lanzarlo manualmente

jobs:
  deploy:
    runs-on: ubuntu-latest
    name: Deploy Angular App

    steps:
      - name: Checkout repository
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20' # Puedes usar una versi&oacute;n m&aacute;s reciente si quieres
          cache: 'npm'

      - name: Install dependencies
        run: npm ci

      - name: Build Angular app
        run: npm run build

      - name: Deploy to Cloudflare Pages
        uses: cloudflare/wrangler-action@v3
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          # &#9888;&#65039; &iexcl;OJO! Cambia 'your-app-name' dos veces en la siguiente l&iacute;nea
          command: pages deploy dist/your-app-name/browser --project-name=your-app-name

👉 Fíjate bien en el último comando. Debes reemplazar your-app-name tanto en la ruta del directorio dist/your-app-name/browser como en el parámetro --project-name.

6.2. Subir el workflow a GitHub

Guarda los cambios y súbelos a tu repositorio. Esto activará el primer despliegue.

git add .github/workflows/deploy-cloudflare.yml
git commit -m "feat: Add Cloudflare Pages deployment workflow"
git push origin main

Paso 7: ¡A disfrutar de la magia!

En cuanto hagas el push, la acción de GitHub se pondrá en marcha. Puedes ver el progreso en tiempo real:

Ve a la pestaña Actions de tu repositorio de GitHub.
Verás un workflow en ejecución llamado «Deploy to Cloudflare Pages». Haz clic en él para ver los logs.
Paralelamente, en tu dashboard de Cloudflare, ve a Workers & Pages y selecciona tu proyecto. Verás el estado del despliegue.

Cuando el proceso termine (suele tardar uno o dos minutos), tu aplicación estará disponible en una URL como: https://your-app-name.pages.dev.

¡Y ya está! A partir de ahora, cada vez que hagas un git push a la rama main, GitHub Actions construirá tu aplicación de Angular y la desplegará en Cloudflare Pages de forma totalmente automática.

Mi consejo personal

Has montado un pipeline de CI/CD robusto, gratuito y rapidísimo. La combinación de Angular, GitHub Actions y Cloudflare Pages es, en mi opinión, una de las mejores opciones para desplegar proyectos frontend hoy en día. Te da una velocidad de carga brutal para tus usuarios gracias a la CDN de Cloudflare y una experiencia de desarrollo de primera.

Ahora te toca a ti experimentar. Intenta hacer un cambio en tu componente app.component.html, súbelo a GitHub y observa cómo tu web se actualiza sola en segundos.

¿Y tú? ¿Ya estás usando Cloudflare Pages para tus proyectos? ¿Qué otra combinación de herramientas te gusta para los despliegues? ¡Cuéntame tu experiencia en los comentarios!

Desplegar tu App de Angular en Cloudflare Pages con GitHub Actions – Guía detallada