<h2>CI/CD para Projetos JavaScript: Automatizando seu Workflow</h2>
<p>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.</p>
<h2>GitHub Actions: Fundamentos e Configuração</h2>
<p>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).</p>
<p>Crie a estrutura básica: na raiz do seu projeto, crie <code>.github/workflows/ci.yml</code>. Este será seu pipeline principal.</p>
<pre><code class="language-yaml">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</code></pre>
<p>Este workflow roda testes em múltiplas versões do Node.js e envia cobertura para Codecov. O evento <code>on</code> dispara a execução; <code>runs-on</code> especifica o sistema operacional; <code>matrix</code> permite testar em ambientes diferentes simultaneamente. Isso garante compatibilidade antes de mesclar código.</p>
<h3>Variáveis e Segredos</h3>
<p>GitHub Actions oferece <code>secrets</code> para dados sensíveis. Vá para Settings > Secrets and variables > Actions e crie variáveis como <code>DEPLOY_KEY</code> ou <code>API_TOKEN</code>. No workflow, acesse-as com <code>${{ secrets.DEPLOY_KEY }}</code>.</p>
<pre><code class="language-yaml">- name: Deploy
env:
DEPLOY_TOKEN: ${{ secrets.DEPLOY_TOKEN }}
run: npm run deploy</code></pre>
<h2>Build Cache: Otimizando Performance</h2>
<p>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.</p>
<p>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 <code>node_modules</code> e arquivos de build é essencial.</p>
<pre><code class="language-yaml">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 }}</code></pre>
<p>A chave do cache (<code>key</code>) deve incluir <code>hashFiles()</code> para invalidar automaticamente quando dependências mudam. <code>restore-keys</code> fornece fallback se não houver match exato. Este padrão garante que você sempre tem o cache mais recente relevante sem conflitos.</p>
<h2>Deploy Automático: Do Repositório para Produção</h2>
<p>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.</p>
<pre><code class="language-yaml">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</code></pre>
<p>Este workflow deploya automaticamente para produção quando você faz push na branch <code>main</code>. Os segredos são configurados no repositório; Vercel fornece IDs via dashboard. Para servidores próprios, use SSH ou ferramentas como <code>rsync</code>:</p>
<pre><code class="language-yaml">- 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/</code></pre>
<h2>Conclusão</h2>
<p>Dominar CI/CD em JavaScript resume-se a três pilares: <strong>automação consistente</strong> com GitHub Actions reduz erros manuais; <strong>otimização com cache</strong> economiza minutos em cada build, multiplicando-se em horas por mês; <strong>deploy automatizado</strong> 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.</p>
<h2>Referências</h2>
<ul>
<li><a href="https://docs.github.com/en/actions" target="_blank" rel="noopener noreferrer">GitHub Actions Documentation</a></li>
<li><a href="https://github.com/actions/cache" target="_blank" rel="noopener noreferrer">actions/cache - GitHub Marketplace</a></li>
<li><a href="https://github.com/goldbergyoni/nodebestpractices#6-best-practices" target="_blank" rel="noopener noreferrer">Node.js Best Practices - CI/CD</a></li>
<li><a href="https://vercel.com/docs/deployments/overview" target="_blank" rel="noopener noreferrer">Vercel Deployment Documentation</a></li>
<li><a href="https://12factor.net/build-release-run" target="_blank" rel="noopener noreferrer">The Twelve-Factor App - Build, release, run</a></li>
</ul>