Pular para conteúdo

Aula 15 – Build, Deploy e Produção 🚀

Sua aplicação está pronta no seu computador, mas como mostrá-la para o mundo? Nesta aula, aprenderemos o processo de transformar nosso código de desenvolvimento em um pacote otimizado para produção.

🏗️ O Processo de Build

Quando rodamos npm run build, o Vite realiza várias otimizações: 1. Minificação: Remove espaços e encurta nomes de variáveis (diminui o tamanho do arquivo). 2. Tree Shaking: Remove código que não está sendo usado. 3. Chunking: Divide o código em arquivos menores para carregar mais rápido.

# Gere a versão de produção
$ npm run build

# O resultado estará na pasta /dist

🌐 Variáveis de Ambiente (.env)

Nunca coloque senhas ou URLs de produção diretamente no código. Use arquivos .env.

# .env.production
VITE_API_URL=https://meu-servidor-real.com/api

No Vue: import.meta.env.VITE_API_URL

🚢 Estratégias de Deploy

Temos várias opções excelentes e gratuitas para hospedar SPAs:

  1. Vercel / Netlify: Conectam ao seu GitHub e fazem deploy automático a cada git push.
  2. GitHub Pages: Ótimo para projetos estáticos e portfólios.
  3. Docker: Para quando você precisa de controle absoluto do servidor.
graph LR
    A[Código no VS Code] --> B[Git Push GitHub]
    B --> C[CI/CD: Build Automático]
    C --> D[Deploy: Vercel/Netlify]
    D --> E[Usuário acessa URL Pública]

🧪 Boas Práticas de Produção

Segurança

Certifique-se de que as ferramentas de desenvolvedor (Vue DevTools) estão desativadas em produção (o Vite faz isso automaticamente no build).

Performance

Use imagens otimizadas e carregamento preguiçoso (Lazy Loading) para rotas que o usuário raramente acessa.

💻 Mão na Massa

  1. Crie uma conta na Vercel ou Netlify.
  2. Conecte seu repositório do GitHub.
  3. Configure o comando de build (npm run build) e a pasta de saída (dist).
  4. Veja seu site ganhar uma URL pública!

📝 Exercício

  1. Para que serve a pasta dist gerada após o build?
  2. Por que devemos usar arquivos .env para URLs de API?
  3. O que é CI/CD e como ele facilita a vida do desenvolvedor?

🚀 Chegou a Hora! Na próxima aula, você apresentará seu Projeto Final: Um sistema Kanban completo!