Apoya mi contenido:

Cómo configurar CI/CD con GitHub Actions para proyectos React y WordPress

Automatizar pruebas, build y despliegues reduce errores y acelera entregas. Con GitHub Actions puedes montar un pipeline de CI/CD para React y WordPress en minutos, usando workflows versionados en tu repositorio.

CI/CD para React (Vite/CRA/Next como SPA)

Estructura del workflow

Crea .github/workflows/ci-react.yml:

name: CI - React

on:
  pull_request:
  push:
    branches: [main]

jobs:
  test-build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Use Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'npm'

      - name: Install
        run: npm ci

      - name: Lint & Tests
        run: |
          npm run lint --if-present
          npm test --if-present -- --ci --watchAll=false

      - name: Build
        run: npm run build

      - name: Upload artifact
        uses: actions/upload-artifact@v4
        with:
          name: build
          path: |
            dist
            build

Deploy automático a Vercel

Añade .github/workflows/deploy-vercel.yml y configura VERCEL_TOKEN, VERCEL_ORG_ID, VERCEL_PROJECT_ID en Repository > Settings > Secrets:

name: CD - React to Vercel

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: 20, cache: 'npm' }
      - run: npm ci && npm run build
      - name: Deploy
        run: |
          npm i -g vercel
          vercel pull --yes --environment=production --token=$VERCEL_TOKEN
          vercel deploy --prod --token=$VERCEL_TOKEN
        env:
          VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}

Deploy estático por S3/CloudFront (opcional)

Para sitios estáticos (Vite/CRA), sube dist/ a S3 y purga CDN:

name: CD - React to S3

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    permissions: { id-token: write, contents: read }
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: 20, cache: 'npm' }
      - run: npm ci && npm run build
      - name: Configure AWS
        uses: aws-actions/configure-aws-credentials@v4
        with:
          role-to-assume: ${{ secrets.AWS_ROLE_ARN }}
          aws-region: us-east-1
      - name: Sync to S3
        run: aws s3 sync dist s3://mi-bucket --delete
      - name: Invalidate CloudFront
        run: aws cloudfront create-invalidation --distribution-id ${{ secrets.DIST_ID }} --paths "/*"

CI/CD para WordPress

1) Plugins o temas (repo propio) con pruebas, build y codestandards

Workflow .github/workflows/wp-ci.yml validando PHP y WP Coding Standards:

name: CI - WordPress Theme/Plugin

on:
  pull_request:
  push:
    branches: [main]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Setup PHP
        uses: shivammathur/setup-php@v2
        with:
          php-version: '8.2'
          coverage: none
          tools: composer, wp, phpcs

      - name: Install deps
        run: composer install --no-interaction --no-progress

      - name: Lint PHP (PHPCS)
        run: vendor/bin/phpcs --standard=WordPress --warning-severity=0 .

      - name: Unit tests (PHPUnit) -- opcional
        run: vendor/bin/phpunit --testsuite unit --colors=always || true

2) Despliegue del tema/plugin a un servidor (SFTP + WP-CLI)

Perfecto para sitios gestionados en Hostinger, cPanel o VPS. Añade secretos: SFTP_HOST, SFTP_USER, SFTP_PASS, SFTP_PATH.

name: CD - Deploy Theme via SFTP

on:
  push:
    branches: [main]
    paths:
      - 'wp-content/themes/mi-tema/**'

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Zip theme
        run: |
          cd wp-content/themes
          zip -r mi-tema.zip mi-tema -x "**/*.map" "**/node_modules/**" "**/.git/**"

      - name: Upload via SFTP
        uses: SamKirkland/FTP-Deploy-Action@v4
        with:
          server: ${{ secrets.SFTP_HOST }}
          username: ${{ secrets.SFTP_USER }}
          password: ${{ secrets.SFTP_PASS }}
          local-dir: wp-content/themes/mi-tema/
          server-dir: ${{ secrets.SFTP_PATH }}/wp-content/themes/mi-tema/

      - name: Clear cache (opcional)
        run: |
          echo "Purgar cachés del hosting/LSCache aquí si aplica"

3) Despliegue a WordPress.org (plugins/temas públicos)

Si publicas en el directorio oficial usa SVN con un action dedicado. Ejemplo para plugins (requiere SVN_URL, SVN_USERNAME, SVN_PASSWORD):

name: Release to WordPress.org

on:
  push:
    tags:
      - 'v*.*.*'

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
        with: { fetch-depth: 0 }

      - name: Build assets (si aplica)
        run: npm ci && npm run build || true

      - name: Deploy
        uses: 10up/action-wordpress-plugin-deploy@stable
        with:
          svn_username: ${{ secrets.SVN_USERNAME }}
          svn_password: ${{ secrets.SVN_PASSWORD }}
          slug: mi-plugin

4) Copia de BD y media en workflows (staging → producción)

En VPS/SSH puedes ejecutar WP-CLI para mantenimiento y migraciones:

# Ejemplo de comandos que puedes invocar por SSH (auto):
wp maintenance-mode activate
wp plugin update --all
wp search-replace "staging.midominio.com" "midominio.com" --all-tables --precise
wp cache flush
wp maintenance-mode deactivate

Buenas prácticas de CI/CD

Principio de mínimo secreto: usa Actions secrets y/o OIDC con roles temporales.
Ambientes separados: dev → staging → prod con reglas de aprobación en PRs.
Artefactos inmutables: compila en CI y despliega el artefacto (no recompiles en prod).
Smoke tests post-deploy: verifica ruta /health, homepage y API críticas.
Observabilidad: guarda logs de Action y añade notificaciones (Slack/Discord).

Checklist rápido

✓ Workflows separados: CI (tests/lint) y CD (deploy).
✓ Cache de dependencias (actions/setup-node, Composer).
✓ Secrets configurados (tokens, SFTP/SSH, claves API).
✓ Rollback sencillo (mantén release anterior o usa versionado de artefactos).

Conclusión

Con GitHub Actions puedes estandarizar CI/CD tanto en React como en WordPress. Empieza con el pipeline mínimo (lint, tests, build) y añade despliegue a Vercel, S3 o SFTP/SSH según tu escenario. La automatización te dará entregas más rápidas, seguras y repetibles.

👉 ¿Quieres que montemos tu pipeline de CI/CD (React, WordPress, VPS o serverless) y lo dejemos listo para producción?
Contáctanos aquí.