Pular para conteúdo

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

Objetivo

Objetivo: Aprender a transformar seu código de desenvolvimento em um pacote otimizado para produção, gerenciar segredos com variáveis de ambiente e colocar sua aplicação no ar para o mundo todo ver.

1. O que é o Build de Produção? 🏗️

Durante o desenvolvimento (npm run dev), o Vite prioriza a velocidade e facilita o seu trabalho. Para o usuário final, precisamos priorizar a performance e o tamanho do arquivo.

O comando npm run build faz: * Minificação: Remove espaços e encurta nomes de variáveis. * Tree Shaking: Remove código que não está sendo usado. * Otimização de Imagens: Reduz o peso dos arquivos estáticos.

2. Diferença entre Dev e Prod (Mermaid) 📊

graph LR
    subgraph "Desenvolvimento (Local)"
        D1[Código Sujo] --> D2[Vite Dev Server]
        D2 --> D3[Navegador]
    end

    subgraph "Produção (Mundo)"
        P1[Código Limpo] -- "npm run build" --> P2[Pasta /dist]
        P2 -- "Upload" --> P3[Servidor Web / CDN]
        P3 --> P4[Usuário Final]
    end

3. Variáveis de Ambiente (.env) 🔐

Nunca coloque senhas ou chaves de API diretamente no código. Use arquivos .env. No Svelte (via Vite), as variáveis devem começar com VITE_.

# Arquivo .env
VITE_API_URL=https://api.meusite.com
VITE_CHAVE_SECRETA=123456

// Acessando no código
const url = import.meta.env.VITE_API_URL;

4. Rodando o Build Localmente 💻

<div id="termynal" data-termynal>
    <span data-ty="input">npm run build</span>
    <span data-ty="progress"></span>
    <span data-ty>✔ Vite v5.0.0 built in 1.4s</span>
    <span data-ty># Uma pasta /dist foi criada!</span>
    <span data-ty="input">npm run preview</span>
    <span data-ty># Testando a versão final no localhost:4173</span>
</div>

5. Onde hospedar meu App? 🌍

Existem serviços que fazem o deploy automático assim que você envia o código para o GitHub:

  1. Vercel / Netlify: Os favoritos para Svelte. Basta conectar o repositório e pronto.
  2. GitHub Pages: Ótimo para sites estáticos e portfólios.
  3. Hospedagem Comum: Você pode apenas dar upload na pasta /dist via FTP.

Nota

A maioria desses serviços oferece um plano gratuito vitalício para projetos pequenos e estudantes.

6. Mini-Projeto: Launch Day 🚀

Sua missão final antes do projeto: 1. Crie um repositório no GitHub para o seu projeto atual. 2. Crie uma conta na Vercel ou Netlify. 3. Conecte seu repositório do GitHub ao serviço escolhido. 4. Veja o build acontecer automaticamente e compartilhe o link do seu site!

Dica de Segurança

Adicione o arquivo .env ao seu .gitignore. Você deve configurar as variáveis de ambiente manualmente no painel de controle da Vercel/Netlify.

7. Exercício de Fixação 📝

  1. Qual a função da pasta /dist gerada após o build?
  2. Por que devemos prefixar variáveis de ambiente com VITE_?
  3. O que é "Minificação" e como ela ajuda o usuário final?

Próxima Aula: O grande encerramento! Projeto Final do Curso 🏆