GitHub Actions

Deploy de React PWA no GitHub Pages

Objetivos da Aula

Ao final da aula o aluno deverá ser capaz de:

• Compreender o que é GitHub Actions
• Configurar um workflow de CI/CD
• Deploy de React + Vite com PWA no GitHub Pages
• Entender o conceito de Vite-PWA para build otimizado

O que é GitHub Actions?

GitHub Actions é uma plataforma de automação integrada ao GitHub que permite:

• Automatizar workflows de desenvolvimento de software
• Executar CI/CD (Integração Contínua / Deploy Contínuo)
• Testar, construir e deployar aplicações automaticamente

Por que usar GitHub Actions?

• Integrado ao GitHub: Nada de configurar serviços externos
• Gratuito para projetos públicos: Uso generoso de minutos
• YAML simples: Workflows fáceis de ler e escrever
• Marketplace: Ações prontas para usar
• Eventos: Dispara em push, PR, schedule, etc.

Conceitos Básicos

Estrutura de um Workflow

name: Nome do Workflow  # Nome do workflow

on: [push]             # Quando executar

jobs:                  # Jobs a executar
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - run: npm install

GitHub Pages

GitHub Pages é um serviço de hospedagem estática que:

• Hospeda sites estáticos gratuitamente
• Integra-se diretamente com repositórios
• Suporta domínios personalizados
• HTTPS automático via certificados Let's Encrypt

React + PWA

PWA (Progressive Web App) permite:

• Funcionar offline (Service Workers)
• Instalar no dispositivo
• Push notifications
• Experiência nativa

React PWA combina React com capacidades de app nativo.

O Problema do Deploy

Deploy manual de React PWA é trabalhoso:

1. npm run build
2. Copiar build/ para servidor
3. Configurar HTTPS
4. Configurar Service Worker
5. Atualizar versões

Com GitHub Actions

Deploy automático:

Push → Build → Test → Deploy

Tudo acontece automaticamente após cada commit.

Workflow para React PWA

O workflow para deploy de React PWA inclui:

1. Checkout do código
2. Setup de Node.js
3. Instalar dependências
4. Executar testes
5. Build da aplicação
6. Deploy no GitHub Pages

Exemplo de Workflow Completo

name: Deploy React PWA

on:
  push:
    branches: [main]

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout
        uses: actions/checkout@v3

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

Continuando o Workflow

      - name: Install dependencies
        run: npm ci

      - name: Run tests
        run: npm test -- --passWithNoTests

      - name: Build
        run: npm run build

      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist  # Vite usa dist/

Criando Projeto com Vite

npm create vite@latest meu-react-pwa -- --template react
cd meu-react-pwa
npm install

Vite: O Build Tool Moderno

Vite é uma ferramenta de build de próxima geração:

• Dev server ultra-rápido: Hot Module Replacement (HMR) instantâneo
• Build otimizado: Rollup para produção
• Configuração mínima: Funciona out-of-the-box
• Suporte nativo: TypeScript, JSX, CSS, etc.

npm create vite@latest meu-app -- --template react

Por que Vite para PWA?

Vite + PWA é a combinação ideal:

• Builds 10-100x mais rápidos que CRA
• Vite-PWA plugin: Service Worker automático
• Manifesto gerado dinamicamente
• Suporte a workbox para cache estratégico
• TypeScript integrado

Vite-PWA Plugin

Instalação:

npm install -D vite-plugin-pwa

Configuração no vite.config.js:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { VitePWA } from 'vite-plugin-pwa'

export default defineConfig({
  plugins: [
    react(),
    VitePWA({
      registerType: 'autoUpdate',
      includeAssets: ['favicon.ico', 'apple-touch-icon.png'],
      manifest: {
        name: 'Meu App PWA',
        short_name: 'MeuApp',
        theme_color: '#ffffff',
        icons: [
          {
            src: 'pwa-192x192.png',
            sizes: '192x192',
            type: 'image/png'
          }
        ]
      }
    })
  ]
})

Configuração do Package.json com Vite

{
  "name": "meu-react-pwa",
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "test": "vitest",
    "test:ui": "vitest --ui"
  },
  "devDependencies": {
    "@vitejs/plugin-react": "^4.2.0",
    "vite": "^5.0.0",
    "vite-plugin-pwa": "^0.17.0",
    "vitest": "^1.0.0"
  }
}

Workflow com Vite-PWA

      - name: Build with Vite
        run: npm run build

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist  # Vite usa dist/

Service Worker Automático

O Vite-PWA gera automaticamente o service worker durante o build:

// src/main.jsx
import { registerSW } from 'virtual:pwa-register'

// Service Worker com auto-update
registerSW({
  onNeedRefresh() {
    if (confirm('Nova versão disponível. Atualizar?')) {
      window.location.reload()
    }
  }
})

Secrets no GitHub

Para deploy seguro, use secrets:

1. Vá em Settings → Secrets
2. Adicione GITHUB_TOKEN (já existe)
3. Para serviços externos, adicione suas próprias

GitHub fornece GITHUB_TOKEN automaticamente para workflows.

Estratégias de Cache Vite-PWA

O Vite-PWA usa Workbox para cache estratégico:

VitePWA({
  workbox: {
    globPatterns: ['**/*.{js,css,html,ico,png,svg,webp}'],
    runtimeCaching: [
      {
        urlPattern: /^https:\/\/api\.example\.com\/.*/i,
        handler: 'NetworkFirst',
        options: {
          cacheName: 'api-cache',
          expiration: { maxEntries: 10, maxAgeSeconds: 60 }
        }
      }
    ]
  }
})

Ativar GitHub Pages no Repositório

1. Vá em Settings → Pages
2. Source: GitHub Actions
3. O workflow fará o deploy automaticamente

Ou use branch gh-pages:

Versionamento Automático

Cada novo deploy gera uma nova versão:

      - name: Create Release
        uses: softprops/action-gh-release@v1
        with:
          tag_name: v${{ github.run_number }}
          files: ./dist/**  # Vite usa dist/

Cache de Dependências

Otimizar builds com cache:

      - name: Cache node modules
        uses: actions/cache@v3
        with:
          path: ~/.npm
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}

Workflow Otimizado Completo

name: React PWA CI/CD

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

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '18'
          cache: 'npm'
      - run: npm ci
      - run: npm test -- --passWithNoTests

Job de Deploy

  deploy:
    needs: test
    runs-on: ubuntu-latest
    if: github.ref == 'refs/heads/main'

    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '18'
          cache: 'npm'
      - run: npm ci
      - run: npm run build
      - uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist  # Vite usa dist/

Fluxo Completo CI/CD

Developer faz push
    ↓
GitHub detecta mudança
    ↓
Job TEST executa
    ↓
  - Instala dependências
  - Roda testes (Vitest)
    ↓
Se testes passam:
    ↓
Job DEPLOY executa
    ↓
  - Build com Vite
  - Deploy no GitHub Pages

Monitorando os Workflows

Acompanhe em:

• Actions tab: Ver histórico de execuções
• Badges: Adicione badge no README
• Notificações: Receba email em falhas

Badge example:

![CI/CD](https://github.com/user/repo/workflows/React%20PWA%20CI/CD/badge.svg)

Rollback Automático

Em caso de falha:

      - name: Deploy
        id: deploy
        continue-on-error: true
        uses: peaceiris/actions-gh-pages@v3
        ...

      - name: Rollback on failure
        if: failure() && steps.deploy.outcome == 'failure'
        run: echo "Deploy falhou - preservando versão anterior"

Estrutura do Projeto Vite + PWA

Estrutura recomendada:

meu-react-pwa/
├── .github/
│   └── workflows/
│       └── deploy.yml
├── public/
│   ├── vite.svg
│   └── pwa-192x192.png
├── src/
│   ├── App.jsx
│   ├── main.jsx
│   └── assets/
├── vite.config.js
├── package.json
└── README.md

Comandos Úteis

# Testar workflow localmente
act push

# Ver logs do workflow
gh run view

# Listar workflows
gh workflow list

# Re-executar workflow
gh run rerun

Boas Práticas

• Testes antes de deploy: Nunca deploy sem testar
• Versionamento: Use tags para releases
• Branch protection: Proteja main com CI obrigatória
• Cache: Use cache para builds mais rápidos
• Secrets: Nunca coloque senhas no código

Resumo da Aula

GitHub Actions permite:

• Automatizar CI/CD
• Deploy automático de React + Vite PWA
• Integração nativa com GitHub Pages
• Workflows em YAML simples
• Build ultra-rápido com Vite-PWA

Próximos Passos

• Criar seu primeiro workflow
• Configurar Vite-PWA no seu projeto
• Experimentar diferentes estratégias de cache
• Adicionar testes com Vitest
• Configurar domínio personalizado

Referências

• GitHub Actions Docs
• Vite Docs
• Vite-PWA Plugin
• PWA Builder

Dúvidas?

Documentação: docs.github.com/actions

Comunidade: github.community

Pratique: Crie seu primeiro workflow hoje!