Deploy Contínuo na Cloudflare Pages e Vercel — aula do módulo Deploy Gratuito na Nuvem, na trilha Seus Primeiros Projetos Práticos com IA da formação Formação…
Leitura de aproximadamente 4 minutos.
Módulo: Deploy Gratuito na Nuvem · Curso: Seus Primeiros Projetos Práticos com IA · Formação: Formação Nível Zero: Ferramentas Essenciais e Gratuitas de IA e Código
Na aula anterior, você aprendeu a publicar seu site no GitHub Pages. Para uma página inicial ou documentação simples, ele é excelente. No entanto, quando você avança para projetos profissionais e ferramentas web mais sofisticadas, entram em cena plataformas especializadas em hospedagem de ponta: Cloudflare Pages e Vercel.
Essas plataformas operam através de uma Rede de Distribuição de Conteúdo (CDN — Content Delivery Network). Em vez de seus arquivos ficarem guardados em um único servidor distante (por exemplo, nos Estados Unidos), cópias automáticas do seu site são distribuídas para mais de 300 centros de dados pelo mundo — incluindo São Paulo, Rio de Janeiro e Fortaleza.
Quando um visitante do Brasil entra no seu site, ele baixa a página do servidor mais próximo da cidade dele em milissegundos.
+-------------------------------------------------------------+
| FLUXO DE DEPLOY CONTÍNUO (CI/CD) |
+-------------------------------------------------------------+
| |
| [ 1. DESENVOLVEDOR ] ──> git push origin main |
| │ |
| ▼ |
| [ 2. GITHUB REPOSITÓRIO ]──> Notifica via Webhook |
| │ |
| ▼ |
| [ 3. CLOUDFLARE / VERCEL ] ──> Processa e replica cópias |
| │ |
| ┌────────────────────────┴────────────────────────┐ |
| ▼ ▼ |
| [ Servidor São Paulo ] [ Servidor Lisboa ]
| └─ Acesso em 15ms └─ Acesso em 12ms
| |
+-------------------------------------------------------------+
A tabela abaixo compara as três principais opções gratuitas do mercado para hospedar seus sites e projetos:
| Recurso | GitHub Pages | Cloudflare Pages | Vercel | |---|---|---|---| | Custo | 100% Gratuito | 100% Gratuito | 100% Gratuito (Plano Hobby) | | Limite de Tráfego | 100 GB / mês | Ilimitado no plano grátis | 100 GB / mês | | Velocidade Global | Boa | Ultra-Rápida (Anycast CDN) | Ultra-Rápida | | Ambientes de Teste | Apenas branch principal | Links de teste para cada branch | Links de teste para cada commit | | Domínio Próprio | Suportado | Suportado com proteção DDoS | Suportado com SSL automático |
A Cloudflare é a maior empresa de infraestrutura e segurança da internet, e seu serviço Pages oferece largura de banda ilimitada e proteção contra ataques de negação de serviço (DDoS).
1. Crie uma conta gratuita em pages.cloudflare.com. 2. No painel principal, clique em Create a project (Criar um projeto) -> Connect to Git (Conectar ao Git). 3. Autorize a conexão com sua conta do GitHub e selecione o repositório minha-landing-page. 4. Na tela de configurações de build (Build Settings):
/.5. Clique em Save and Deploy.
Em menos de 15 segundos, seu site estará ativo com uma URL no formato https://minha-landing-page.pages.dev.
A Vercel é a criadora do famoso framework Next.js e é referência mundial em experiência do desenvolvedor (DX — Developer Experience).
1. Acesse vercel.com e faça login com sua conta do GitHub. 2. Clique em Add New... -> Project. 3. Localize o repositório da sua página e clique em Import. 4. Deixe todas as opções de build padrão e clique em Deploy. 5. Em segundos, uma animação de confetes anunciará que sua página está viva em uma URL https://minha-landing-page.vercel.app.
[!WARNING]
**Preencher comandos de compilação (Build Command) em sites de HTML puro**: Se o seu projeto é composto apenas de arquivosindex.html,style.cssescript.jsnativos, você não deve preencher comandos comonpm run buildna Vercel ou Cloudflare. Tentar compilar um projeto que não possuipackage.jsoncausará uma falha no processo de deploy (Build Failed). Mantenha o campo de comando de build completamente vazio.
Vamos conectar seu projeto a uma plataforma profissional de CDN:
1. Escolha uma plataforma: Crie sua conta gratuita na Cloudflare Pages ou na Vercel. 2. Conecte seu repositório: Importe o repositório da sua landing page do GitHub. 3. Realize o primeiro deploy: Verifique a geração do link público (.pages.dev ou .vercel.app). 4. Faça um teste de atualização: Altere uma linha de texto no arquivo index.html no seu computador, faça git commit e git push origin main. 5. Observe a mágica do CI/CD: Abra o painel da plataforma e veja o deploy acontecendo sozinho em tempo real sem você precisar clicar em nenhum botão.