Pular para conteúdo
🖥️ Abrir Apresentação Interativa em Tela Cheia

Build, Deploy e Produção 🚢

Aula 15 - Tirando a aplicação do seu computador

🏭 O Processo de Build

  • O navegador não entende arquivos .vue nativamente
  • O Vite compila, minifica e otimiza tudo
  • Transforma seu projeto em HTML, JS e CSS puros

🚀 NPM Scripts

No package.json: - dev: Inicia servidor local rápido - build: Gera os arquivos finais para o servidor - preview: Testa o build localmente antes de subir

📁 A pasta dist/

  • É o resultado final do comando npm run build
  • Contém apenas o essencial para o site rodar
  • Tudo o que está aqui é estático (Jamstack)

🌪️ Minificação e Tree-Shaking

  • Minificação: Remove espaços e encurta nomes de variáveis
  • Tree-Shaking: Remove código de bibliotecas que você não usou
  • Resultado: Um site que carrega em milissegundos

🌍 Onde hospedar? (Gratuito/Econômico)

  • Vercel / Netlify: Focados em frontend, deploy via GitHub
  • GitHub Pages: Ótimo para portfólios simples
  • Firebase Hosting: Integração fácil com o ecossistema Google

🔄 CI/CD (Continuous Deployment)

graph LR
    A[Programador] -- git push --> B[GitHub]
    B -- Webhook --> C[Vercel/Netlify]
    C -- Auto Build --> D[Site no Ar!]
- Você foca no código, o deploy é automático

⚙️ Variáveis de Ambiente (.env)

  • URLs de API diferentes para local e produção
  • Local: localhost:3000
  • Produção: api.meusite.com
  • Vite exige o prefixo VITE_ para segurança

🚦 Configuração de Fallback (History Mode)

  • PROBLEMA: Se o usuário der F5 em /contato, o servidor procura o arquivo contato.html e dá erro 404.
  • SOLUÇÃO: Configurar o servidor para redirecionar tudo para o index.html.

🕵️ Lighthouse: Auditoria de Qualidade

  • Ferramenta do Google Chrome
  • Mede:
  • Performance
  • Acessibilidade
  • SEO
  • Boas Práticas

🛡️ HTTPS e Segurança

  • Sites em produção DEVEM usar HTTPS!
  • Plataformas como Vercel e Netlify já dão o certificado SSL grátis por padrão

📈 SEO no Vue

  • SPAs podem ser difíceis para o Google ler
  • Usar tags meta dinâmicas (ex: unhead ou vue-meta)
  • Considerar SSR (Nuxt.js) se o SEO for o objetivo principal do negócio

🏁 Checklist de Produção

  • Console logs removidos
  • Imagens otimizadas (WebP)
  • Erros de build resolvidos
  • Variáveis .env configuradas
  • Favicon e Título conferidos

🏗️ Desafio da Aula

  • Realizar o build do seu projeto atual
  • Fazer deploy no Netlify ou Vercel
  • Rodar um teste do Lighthouse e tentar subir a nota de performance

🏁 Resumo

  • Build transforma código em site real
  • Deploy via Git facilita a vida
  • Meça a qualidade com Lighthouse

🏁 Dúvidas?

O mundo agora pode ver seu site! Próxima aula: Revisão Final e Projeto Kanban.