CI/CD para Projetos JavaScript: Automatizando seu Workflow
CI/CD (Continuous Integration/Continuous Deployment) é a prática de automatizar testes, builds e deploys. Para projetos JavaScript modernos, implementar um pipeline robusto economiza horas de trabalho manual e reduz erros em produção. Neste artigo, você aprenderá a configurar GitHub Actions, otimizar builds com cache e fazer deploy automático de forma profissional.
GitHub Actions: Fundamentos e Configuração
GitHub Actions é a ferramenta nativa do GitHub para automação. Você define workflows em YAML que executam em resposta a eventos (push, pull request, etc.). Um workflow consiste em jobs que rodam em runners (máquinas virtuais fornecidas pelo GitHub).
Crie a estrutura básica: na raiz do seu projeto, crie .github/workflows/ci.yml. Este será seu pipeline principal.
name: CI Pipeline
on:
push:
branches: [ main, develop ]
pull_request:
branches: [ main ]
jobs:
test:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [18.x, 20.x]
steps:
- uses: actions/checkout@v4
- name: Setup Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v4
with:
node-version: ${{ matrix.node-version }}
- name: Install dependencies
run: npm ci
- name: Run linter
run: npm run lint
- name: Run tests
run: npm run test:coverage
- name: Upload coverage
uses: codecov/codecov-action@v3
with:
files: ./coverage/coverage-final.json
Este workflow roda testes em múltiplas versões do Node.js e envia cobertura para Codecov. O evento on dispara a execução; runs-on especifica o sistema operacional; matrix permite testar em ambientes diferentes simultaneamente. Isso garante compatibilidade antes de mesclar código.
Variáveis e Segredos
GitHub Actions oferece secrets para dados sensíveis. Vá para Settings > Secrets and variables > Actions e crie variáveis como DEPLOY_KEY ou API_TOKEN. No workflow, acesse-as com ${{ secrets.DEPLOY_KEY }}.
- name: Deploy
env:
DEPLOY_TOKEN: ${{ secrets.DEPLOY_TOKEN }}
run: npm run deploy
Build Cache: Otimizando Performance
Sem cache, cada execução reinstala dependências e recompila assets do zero. Com cache, reutilizamos resultados anteriores, reduzindo tempo de build em até 80%. GitHub Actions oferece cache integrado.
O principal benefício é economizar tempo e bandwidth. Dependências instaladas podem levar 2-5 minutos; com cache, isso reduz para segundos. Para projetos Node.js, cachear node_modules e arquivos de build é essencial.
name: Build with Cache
on: [push, pull_request]
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: '20.x'
- name: Cache npm dependencies
uses: actions/cache@v3
with:
path: ~/.npm
key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}
restore-keys: |
${{ runner.os }}-npm-
- name: Install dependencies
run: npm ci
- name: Build project
run: npm run build
- name: Cache build artifacts
uses: actions/cache@v3
with:
path: dist/
key: ${{ runner.os }}-build-${{ github.sha }}
A chave do cache (key) deve incluir hashFiles() para invalidar automaticamente quando dependências mudam. restore-keys fornece fallback se não houver match exato. Este padrão garante que você sempre tem o cache mais recente relevante sem conflitos.
Deploy Automático: Do Repositório para Produção
Deploy automático elimina etapas manuais e padroniza o processo. Configuraremos deploy para Vercel (plataforma popular para Next.js/React), mas o padrão aplica-se a AWS, Netlify ou servidores próprios.
name: Deploy 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.x'
- name: Cache dependencies
uses: actions/cache@v3
with:
path: ~/.npm
key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}
restore-keys: |
${{ runner.os }}-npm-
- name: Install dependencies
run: npm ci
- name: Build
run: npm run build
- name: Deploy to Vercel
uses: amondnet/vercel-action@v25
with:
vercel-token: ${{ secrets.VERCEL_TOKEN }}
vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
working-directory: ./
production: true
Este workflow deploya automaticamente para produção quando você faz push na branch main. Os segredos são configurados no repositório; Vercel fornece IDs via dashboard. Para servidores próprios, use SSH ou ferramentas como rsync:
- name: Deploy via SSH
run: |
mkdir -p ~/.ssh
echo "${{ secrets.DEPLOY_KEY }}" > ~/.ssh/deploy_key
chmod 600 ~/.ssh/deploy_key
ssh-keyscan -H ${{ secrets.DEPLOY_HOST }} >> ~/.ssh/known_hosts
scp -r -i ~/.ssh/deploy_key ./dist/* user@${{ secrets.DEPLOY_HOST }}:/var/www/app/
Conclusão
Dominar CI/CD em JavaScript resume-se a três pilares: automação consistente com GitHub Actions reduz erros manuais; otimização com cache economiza minutos em cada build, multiplicando-se em horas por mês; deploy automatizado garante que código testado chega a produção sem fricção. Com as configurações acima, seu projeto está pronto para escala profissional. Próximo passo: monitore seus pipelines, ajuste conforme métricas reais e mantenha workflows simples e legíveis.