Arreglando variables de entorno en Vercel y Supabase con GitHub Actions

Guía para despliegues preview seguros en Next.js con Supabase y Vercel: centraliza variables con GitHub Environments, añade preflight y tokens con alcance mínimo para CI/CD.

19 sept 2025 • 3 min de lectura • Equip Q2BSTUDIO

Inteligencia-Artificial-

TLDR: Los despliegues preview fallaban por variables de entorno ausentes y scopes del token mal configurados. He consolidado la gestión de variables con GitHub Environments y secretos encriptados y añadido un paso preflight para validar las variables requeridas antes del deploy para fallar rápido si algo falta.

Contexto: Estaba integrando un dashboard Next.js con Supabase y Vercel. En local todo funcionaba pero la CI/CD empezó a fallar en los builds preview. La causa principal fue que variables de entorno y scopes del token no fluían correctamente en GitHub Actions, provocando despliegues vacíos o fallidos.

Solución resumida. 1) Centralizar env y secretos: usar GitHub Environments Preview y Production para valores dependientes del entorno y almacenar en GitHub Secrets solo lo imprescindible como VERCEL_TOKEN VERCEL_ORG_ID VERCEL_PROJECT_ID SUPABASE_URL SUPABASE_ANON_KEY y las variables NEXT_PUBLIC necesarias en tiempo de build. Para proyectos y aplicaciones a medida podemos enlazar buenas prácticas con aplicaciones a medida.

2) Paso de preflight: añadir una tarea al pipeline que compruebe explícitamente la presencia de cada variable requerida y que haga exit 1 si alguna falta, así se detecta el problema antes de intentar el deploy y se evita ruido en Vercel. 3) Desplegar con token con scope limitado: crear VERCEL_TOKEN con permisos mínimos por proyecto para mejorar seguridad. 4) Flujo típico en Actions: disparar en pull_request sobre main, job preview en ubuntu-latest con environment preview y permisos mínimos, pasos: checkout, setup node 20, preflight de variables, npm ci, npm run build con NEXT_PUBLIC_SUPABASE_URL y NEXT_PUBLIC_SUPABASE_ANON_KEY inyectadas, y finalmente npx vercel pull build deploy usando el VERCEL_TOKEN almacenado en secrets.

Buenas prácticas y gotchas: no mezclar variables NEXT_PUBLIC con claves de servidor; mantener fuera del repositorio la service_role de Supabase salvo que sea absolutamente necesario; crear las variables en Vercel dentro del entorno correcto Preview o Production o el pull devolverá valores vacíos; usar tokens con el scope mínimo para reducir riesgo.

Validación del drift entre Vercel y GitHub: implementar una comprobación periódica que consulte la API de Vercel y compare con los secretos de GitHub Actions para detectar diferencias y alertar. Para escaneo ligero de secretos antes del merge recomiendo integrar un escáner como gitleaks en un job de pre-merge o usar acciones ya disponibles en el marketplace y hooks pre-commit para evitar que credenciales lleguen al repositorio. También es recomendable activar GitHub Secret Scanning si está disponible en la organización.

En Q2BSTUDIO, empresa de desarrollo de software y aplicaciones a medida, ayudamos a empresas a implementar pipelines robustos y seguros, con experiencia en inteligencia artificial, ciberseguridad y servicios cloud aws y azure. Si buscas soporte para asegurar tus despliegues, optimizar la gestión de secretos o integrar soluciones de inteligencia de negocio y power bi, contamos con servicios para ia para empresas, agentes IA y más. Consulta nuestras soluciones de inteligencia artificial en Inteligencia artificial para empresas o contacta para una auditoría de CI/CD y ciberseguridad.

Palabras clave incluidas para mejorar posicionamiento: aplicaciones a medida, software a medida, inteligencia artificial, ciberseguridad, servicios cloud aws y azure, servicios inteligencia de negocio, ia para empresas, agentes IA, power bi.

UNA PAUSA?

Juga una estona abans de marxar

ELS NOSTRES SERVEIS

Com et podem ajudar

Intel·ligència artificial

Agents d'IA, chatbots i assistents intel·ligents que automatitzen tasques i atenen els teus clients 24/7 per millorar l'eficiència del teu negoci.

Més info

Desenvolupament de programari

Aplicacions web, mòbils i d'escriptori, intranets, e-commerce, SaaS i plataformes de gestió dissenyades per a les necessitats concretes de la teva empresa.

Més info

Serveis cloud

Migració, infraestructura, hosting gestionat, alta disponibilitat i seguretat en Microsoft Azure i Amazon Web Services perquè el teu negoci escali sense límits.

Més info

Ciberseguretat i pentesting

Auditories de seguretat, test d'intrusió (pentesting) i protecció d'aplicacions, dades i infraestructura on-premise i cloud, amb hacking ètic i compliment normatiu.

Més info

Business Intelligence

Quadres de comandament i anàlisi de dades amb Power BI: integrem les teves fonts, dissenyem dashboards i KPIs i convertim les teves dades en decisions.

Més info

Automatització de processos

Automatitzem tasques repetitives i connectem les teves aplicacions amb n8n, Power Automate, Make i RPA, eliminant treball manual i augmentant la productivitat.

Més info

Formació per a empreses

Formem els teus equips en tecnologia amb criteri: desenvolupament web, bases de dades, Git, bones pràctiques i seguretat, automatització amb n8n, intel·ligència artificial per a empreses i creació de solucions d'IA amb Azure AI Foundry.

Més info

Auditoria de codi

Auditem el codi que creguis tu, el teu equip o una IA: et diem què està bé i què millorar, el securitzem i el deixem llest per a producció, web o app.

Més info

Generació d'imatges amb IA

Creem per tu les imatges que necessita el teu negoci amb intel·ligència artificial: producte, xarxes, publicitat, il·lustració i avatars. Tu ens dius què vols i t'ho lliurem llest per fer servir.

Més info

Generació de vídeos amb IA

Creem per tu vídeos amb intel·ligència artificial: promocionals, per a xarxes, presentadors virtuals, doblatge i animacions. Ens comptes la idea i t'ho lliurem muntat i llest per publicar.

Més info

Avatars conversacionals amb IA

Creem avatars conversacionals amb IA —humans digitals amb cara i veu— que atenen els teus clients i equips amb el coneixement de la teva empresa, a la teva web, monitors interactius, WhatsApp o Teams.

Més info

Màrqueting Online i IA

Google Ads, Meta Ads, LinkedIn Ads i posicionament en motors d'IA (GEO/AEO): captem clients i fem que la teva marca aparegui on et busquen, també a ChatGPT, Gemini i Perplexity.

Més info

Tens un projecte en ment?

Explica'ns la teva visió i la convertim en una solució de programari. Sigui quin sigui l'abast, fem realitat la teva idea.