Introdução ao CI/CD

Continuous Integration/Continuous Deployment (CI/CD) é uma prática essencial no desenvolvimento moderno que automatiza o processo de integração, teste e deploy de código.

Por que GitHub Actions?

Vantagens

  • ✅ Integração nativa com GitHub
  • ✅ Gratuito para repositórios públicos
  • ✅ Marketplace com milhares de actions
  • ✅ Suporte a múltiplas linguagens e plataformas
  • ✅ Execução em containers Docker

Conceitos Básicos

  • Workflow: Processo automatizado
  • Job: Conjunto de steps executados em um runner
  • Step: Tarefa individual
  • Action: Bloco reutilizável de código

Configurando o Pipeline

1. Estrutura do Workflow

Crie o arquivo .github/workflows/deploy.yml:

name: Deploy to Cloudflare Pages

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

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    
    steps:
    - name: Checkout
      uses: actions/checkout@v4
      with:
        submodules: true
        fetch-depth: 0
    
    - name: Setup Hugo
      uses: peaceiris/actions-hugo@v2
      with:
        hugo-version: 'latest'
        extended: true
    
    - name: Build
      run: hugo --minify
    
    - name: Deploy to Cloudflare Pages
      uses: cloudflare/pages-action@v1
      with:
        apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
        accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
        projectName: matheuscosta-dev
        directory: public
        gitHubToken: ${{ secrets.GITHUB_TOKEN }}

2. Configuração de Secrets

No GitHub, vá em Settings > Secrets and variables > Actions e adicione:

  • CLOUDFLARE_API_TOKEN: Token da API do Cloudflare
  • CLOUDFLARE_ACCOUNT_ID: ID da sua conta Cloudflare

3. Workflow Avançado com Testes

name: CI/CD Pipeline

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

env:
  HUGO_VERSION: 0.121.1

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v4
    
    - name: Setup Hugo
      uses: peaceiris/actions-hugo@v2
      with:
        hugo-version: ${{ env.HUGO_VERSION }}
        extended: true
    
    - name: Lint Markdown
      uses: articulate/actions-markdownlint@v1
      with:
        config: .markdownlint.json
        files: 'content/**/*.md'
    
    - name: Test Build
      run: hugo --buildDrafts --buildFuture
    
    - name: HTML Validation
      uses: Cyb3r-Jak3/[email protected]
      with:
        root: public/

  deploy:
    needs: test
    runs-on: ubuntu-latest
    if: github.ref == 'refs/heads/main'
    
    steps:
    - uses: actions/checkout@v4
      with:
        submodules: true
        fetch-depth: 0
    
    - name: Setup Hugo
      uses: peaceiris/actions-hugo@v2
      with:
        hugo-version: ${{ env.HUGO_VERSION }}
        extended: true
    
    - name: Build
      run: hugo --minify
    
    - name: Deploy
      uses: cloudflare/pages-action@v1
      with:
        apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
        accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
        projectName: matheuscosta-dev
        directory: public

Otimizações e Melhores Práticas

1. Caching

- name: Cache Hugo modules
  uses: actions/cache@v3
  with:
    path: /tmp/hugo_cache
    key: ${{ runner.os }}-hugomod-${{ hashFiles('**/go.sum') }}
    restore-keys: |
      ${{ runner.os }}-hugomod-

2. Matrix Strategy

strategy:
  matrix:
    hugo-version: [0.120.4, 0.121.1, latest]

3. Conditional Deployment

- name: Deploy to Staging
  if: github.ref == 'refs/heads/develop'
  # Deploy para ambiente de staging

- name: Deploy to Production
  if: github.ref == 'refs/heads/main'
  # Deploy para produção

Monitoramento e Notificações

Slack Integration

- name: Slack Notification
  uses: 8398a7/action-slack@v3
  with:
    status: ${{ job.status }}
    channel: '#deployments'
    webhook_url: ${{ secrets.SLACK_WEBHOOK }}
  if: always()

Status Badges

Adicione ao seu README.md:

![Deploy Status](https://github.com/CosttaCrazy/matheuscosta-dev/workflows/Deploy%20to%20Cloudflare%20Pages/badge.svg)

Troubleshooting Comum

1. Submodules não carregam

- uses: actions/checkout@v4
  with:
    submodules: recursive

2. Build falha por dependências

- name: Install dependencies
  run: |
    npm install -g postcss-cli
    npm install -g autoprefixer

3. Timeout em builds grandes

- name: Build with timeout
  timeout-minutes: 10
  run: hugo --minify

Conclusão

GitHub Actions oferece uma plataforma poderosa e flexível para implementar CI/CD. A integração com Cloudflare Pages torna o deploy de sites estáticos extremamente simples e eficiente.

Próximos Passos

  1. Implementar testes automatizados
  2. Configurar ambientes de staging
  3. Adicionar análise de performance
  4. Integrar ferramentas de monitoramento

Recursos Úteis: