Automatizando Deploys de Sites com GitHub Actions: Um Guia Completo de CI/CD

github actions
hostoo

CI/CD (Integração Contínua/Entrega Contínua) é uma prática essencial no desenvolvimento moderno de software, permitindo a automação de testes, builds e deploys. Para projetos web, o GitHub Actions é uma ferramenta poderosa que simplifica a implementação de pipelines de CI/CD, garantindo atualizações rápidas e seguras.

Nesta matéria, exploraremos como configurar um fluxo automatizado de deploy para sites estáticos (HTML, CSS, JS) e dinâmicos (Node.js, PHP, etc.) usando GitHub Actions.


1. O que é CI/CD?

  • CI (Integração Contínua): Automatiza a construção e teste do código sempre que novas alterações são enviadas ao repositório.
  • CD (Entrega Contínua): Automatiza a implantação do código em um ambiente de produção ou staging após os testes.

Vantagens do CI/CD

✔ Redução de erros (testes automatizados)
✔ Deploys mais rápidos (sem intervenção manual)
✔ Maior confiabilidade (processo padronizado)


2. GitHub Actions: Conceitos Básicos

GitHub Actions permite criar workflows (fluxos de trabalho) em arquivos YAML (.yml) dentro do diretório .github/workflows/.

Componentes Principais

  • Workflow: Um processo automatizado definido em um arquivo YAML.
  • Job: Conjunto de etapas executadas em um mesmo ambiente.
  • Step: Tarefa individual dentro de um job (ex: instalar dependências).
  • Action: Bloco de código reutilizável para executar tarefas comuns.

3. Configurando CI/CD para um Site Estático

Vamos criar um workflow para fazer deploy de um site estático (HTML/CSS/JS) no GitHub Pages.

Passo a Passo

  1. Crie um repositório com seus arquivos estáticos.
  2. Adicione um workflow em .github/workflows/deploy.yml:
name: Deploy to GitHub Pages

on:
  push:
    branches: ["main"]  # Executa apenas no branch main

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

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'

      - name: Install dependencies (se necessário)
        run: npm install

      - name: Build (se usar geradores como Jekyll, Next.js, etc.)
        run: npm run build

      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist  # Pasta de build
  1. Commit e push: O GitHub Actions executará automaticamente e publicará o site em https://<seu-usuario>.github.io/<repositorio>.

4. Configurando CI/CD para um Site Dinâmico (Node.js + Vercel/AWS)

Se o site usa um backend (Node.js, PHP, Python), podemos automatizar o deploy em serviços como VercelAWS, ou Heroku.

Exemplo: Deploy na Vercel

name: Deploy to Vercel

on:
  push:
    branches: ["main"]

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

      - name: Install Vercel CLI
        run: npm install -g vercel

      - name: Deploy to Vercel
        run: vercel --prod --token ${{ secrets.VERCEL_TOKEN }}

Onde obter o VERCEL_TOKEN?

  1. Acesse Vercel Dashboard.
  2. Crie um token e adicione como segredo no GitHub (Settings > Secrets > New repository secret).

5. Boas Práticas para CI/CD

  • Testes automatizados: Adicione etapas de teste no workflow.
  • Ambientes separados: Use devstaging e production.
  • Rollback automático: Configure notificações em caso de falha.
  • Cache de dependências: Acelere os workflows com caching.

Conclusão

GitHub Actions é uma ferramenta versátil para automatizar deploys de sites, reduzindo erros manuais e acelerando o processo de entrega. Seja para sites estáticos ou dinâmicos, a automação de CI/CD garante maior eficiência e confiabilidade.

Experimente configurar seu próprio workflow e veja como o deploy se torna mais ágil! 🚀


Recursos Adicionais

Pronto para automatizar seus deploys? 💻⚡