0Pricing
React Academy · Lección

CI/CD de GitHub Actions para React

Automatice los pasos de lint, pruebas, compilación y despliegue en un flujo de trabajo de GitHub Actions con cada push.

CI/CD de GitHub Actions para React es una lección gratuita de React Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de React Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de React Academy incluye 4 lecciones en total.

¿Qué es GitHub Actions?

GitHub Actions es una plataforma de CI/CD integrada en GitHub. Defina flujos de trabajo en archivos YAML dentro de .github/workflows/ que se ejecuten al hacer push, crear una solicitud de incorporación de cambios o según un horario.

Flujo de trabajo básico de CI

Un flujo de trabajo mínimo que instala las dependencias, ejecuta el linting y ejecuta las pruebas en cada push y solicitud de incorporación de cambios.

# .github/workflows/ci.yml
name: CI

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'npm'
      - run: npm ci
      - run: npm run lint
      - run: npm test -- --coverage

Almacenamiento en caché de node_modules

Almacene en caché ~/.npm (la caché de npm, no node_modules) para acelerar la instalación de dependencias. actions/setup-node se encarga de ello mediante la opción cache.

- uses: actions/setup-node@v4
  with:
    node-version: 20
    cache: 'npm' # caches ~/.npm based on package-lock.json hash

Paso de compilación

Añada un paso de compilación después de las pruebas para verificar que el proyecto se compila sin errores.

- name: Build
  run: npm run build

# For Next.js — catch TypeScript errors:
- name: Type Check
  run: npx tsc --noEmit

Implementación en Vercel al fusionar

Implemente en Vercel cuando se hagan pushes a main usando la CLI de Vercel en el flujo de trabajo.

- name: Deploy to Vercel
  env:
    VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
    VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
    VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
  run: |
    npm install -g vercel
    vercel pull --yes --environment=production --token=$VERCEL_TOKEN
    vercel build --prod --token=$VERCEL_TOKEN
    vercel deploy --prebuilt --prod --token=$VERCEL_TOKEN

Implementación en S3 al fusionar

Sincronice la salida de compilación con S3 e invalide CloudFront después de una compilación correcta en main.

- name: Deploy to S3
  if: github.ref == 'refs/heads/main'
  env:
    AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
    AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
  run: |
    aws s3 sync dist/ s3://my-bucket/ --delete
    aws cloudfront create-invalidation --distribution-id ${{ secrets.CF_ID }} --paths "/*"

Pruebas E2E de Playwright en CI

Ejecute las pruebas E2E de Playwright en CI después de compilar. Instale los binarios de los navegadores mediante un paso específico.

- name: Install Playwright Browsers
  run: npx playwright install --with-deps chromium

- name: Run E2E Tests
  run: npx playwright test

- uses: actions/upload-artifact@v4
  if: failure()
  with:
    name: playwright-report
    path: playwright-report/

Trabajos de matriz en paralelo

Use una estrategia de matriz para ejecutar pruebas en paralelo en varias versiones de Node.js o entornos.

jobs:
  test:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [18, 20, 22]
    steps:
      - uses: actions/setup-node@v4
        with:
          node-version: ${{ matrix.node-version }}

Gestión de secretos

Almacene los valores confidenciales (claves de API y tokens de implementación) como GitHub Secrets (repositorio → Settings → Secrets). Acceda a ellos en los flujos de trabajo mediante ${{ secrets.MY_SECRET }}.

Pasos condicionales

Use condiciones if: para ejecutar pasos únicamente en ramas específicas, ante determinados eventos de solicitudes de incorporación de cambios o después de que los pasos anteriores se completen correctamente.

- name: Deploy
  if: github.ref == 'refs/heads/main' && github.event_name == 'push'
  run: npm run deploy

Insignias de estado

Añada una insignia del estado de compilación a su README para mostrar el estado de CI de un vistazo.

<!-- README.md -->
![CI](https://github.com/myorg/myrepo/actions/workflows/ci.yml/badge.svg)

Comprobación rápida

¿Qué función de GitHub Actions ejecuta simultáneamente el mismo trabajo con varias configuraciones (por ejemplo, distintas versiones de Node.js)?

Resumen

Defina flujos de trabajo de CI en archivos YAML dentro de .github/workflows/. Use actions/setup-node con cache: 'npm' para agilizar las instalaciones. Añada pasos de lint, comprobación de tipos, pruebas y compilación. Implemente condicionalmente cuando se hagan pushes a la rama main. Almacene los secretos en GitHub Secrets y use compilaciones de matriz para probar varias versiones.

Preguntas frecuentes

¿La lección «CI/CD de GitHub Actions para React» es gratis?

Sí — el texto completo de «CI/CD de GitHub Actions para React» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de React Academy, actualiza a CoddyKit PRO. El curso de React Academy incluye 4 lecciones en total.

¿Qué aprenderé en «CI/CD de GitHub Actions para React»?

Automatice los pasos de lint, pruebas, compilación y despliegue en un flujo de trabajo de GitHub Actions con cada push. Practicas React Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar React Academy?

No se requiere experiencia previa. React Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.

¿Cuánto tiempo toma la lección «CI/CD de GitHub Actions para React»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de React Academy?

Sí. Cada lección de React Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Desplegar en Vercel: configuración cero y URL de preview
  2. Alojar una SPA de React en AWS S3 y CloudFront
  3. Contenerizar una aplicación React/Next.js
  4. CI/CD de GitHub Actions para React
← Volver a React Academy