Faça deploy do seu site Astro com Cloudflare Pages

Você pode fazer o deploy do seu projeto Astro na Cloudflare Pages, uma plataforma para desenvolvedores frontend colaborarem e fazerem deploy de websites estáticos (JAMstack) e SSR.

Este guia inclui:

Como fazer o deploy através do painel de controle da Cloudflare Pages
Como fazer o deploy utilizando Wrangler, a CLI da Cloudflare
Como fazer o deploy de um site SSR utilizando @astrojs/cloudflare

Pré-requisitos

Para começar, você vai precisar de:

Uma conta da Cloudflare. Se você já não tem uma, você pode criar uma conta gratuita da Cloudflare durante o processo.
O código da sua aplicação em um repositório do GitHub ou GitLab.

Como fazer deploy de um site utilizando Git

Configure um novo projeto na Cloudflare Pages.
Faça push do seu código para seu repositório git (GitHub, GitLab).
Inicie a sessão no painel de controle da Cloudflare e selecione sua conta em Account Home > Pages.
Selecione Create a new Project e a opção Connect Git.
Selecione o projeto git que você quer fazer deploy e clique Begin setup.
Use as seguintes configurações de build:
- Framework preset: Astro
- Build command: npm run build
- Build output directory: dist
Clique no botão Save and Deploy.

Como fazer deploy de um site utilizando Wrangler

Instale a CLI Wrangler.
Autentique Wrangler com sua conta da Cloudflare utilizando wrangler login.
Execute seu comando de build.
Faça o deploy utilizando npx wrangler pages deploy dist.

# Instale a CLI Wrangler
npm install -g wrangler
# Faça login com a conta da Cloudflare pela CLI
wrangler login
# Execute seu comando de build
npm run build
# Crie um novo deploy
npx wrangler pages deploy dist

Depois dos seus assets serem enviados, Wrangler irá te dar uma URL de pré-visualização para inspecionar seu site. Quando você entrar no painel de controle da Cloudflare Pages, você verá o seu novo projeto.

Habilitando Pré-visualização local com Wrangler

Para a pré-visualização funcionar, você precisa instalar wrangler

pnpm add wrangler --save-dev

Após, é possível atualizar o script “preview” para executar wrangler ao invés do comando “preview” integrado do Astro:

"preview": "wrangler pages dev ./dist"

Como fazer deploy de um site SSR

Você pode fazer build de um site Astro SSR para deploy na Cloudflare Pages utilizando o adaptador @astrojs/cloudflare.

Siga os passos abaixo para configurar o adaptador. Você pode então fazer o deploy utilizando qualquer uma das abordagens documentadas acima.

Instalação Rápida

Adicione o adaptador para Cloudflare para habilitar SSR no seu projeto Astro com o seguinte comando astro add. Ele irá instalar o adaptador e fazer as mudanças apropriadas ao seu arquivo astro.config.mjs em uma etapa.

npx astro add cloudflare

Instalação Manual

Se você prefere instalar o adaptador manualmente, complete as duas seguintes etapas:

Adicione o adaptador @astrojs/cloudflare nas dependências do seu projeto utilizando seu gerenciador de pacotes de preferência. Se você estiver utilizando npm ou não tem certeza, execute isso no terminal:
Terminal window
```
npm install @astrojs/cloudflare
```

Adicione o seguinte no seu arquivo astro.config.mjs:

import { defineConfig } from 'astro/config';
import cloudflare from '@astrojs/cloudflare';

export default defineConfig({
  output: 'server',
  adapter: cloudflare()
});

Modos

Há atualmente dois modos suportados ao utilizar Pages Functions com o adaptador @astrojs/cloudflare.

Modo Advanced: Este modo é utilizado quando você quer executar sua função no modo advanced que pega o _worker.js em dist, ou um modo diretório onde as páginas irão compilar o worker para fora de um diretório functions na raiz do projeto.

Se nenhum modo for definido, o padrão é "advanced".
Modo directory: Este modo é utilizado quando você quer executar sua função no modo directory, que significa que o adaptador irá compilar a parte do cliente da sua aplicação da mesma forma, porém ele irá mover o script do worker para um diretório functions na raiz do projeto. O adaptador irá colocar apenas uma [[path]].js naquele diretório, te permitindo adicionar plugins e middleware de páginas que podem ser verificados em controle de versão.
astro.config.mjs
```
export default defineConfig({
  adapter: cloudflare({ mode: "directory" }),
});
```

Utilizando Pages Functions

Pages Functions te permitem executar código server-side para habilitar funcionalidade dinâmica sem executar um servidor dedicado.

Para começar, crie um diretório /functions na raiz do seu projeto. Escrevendo seus arquivos Functions nesse diretório automaticamente gera um Worker com funcionalidade customizada nas rotas pré-designadas. Para aprender mais sobre como escrever Functions, veja a documentação de Pages Functions.

📚 Leia mais sobre SSR no Astro.

Solução de Problemas

Se você estiver encontrando erros, verifique novamente se a versão do node que você está utilizando localmente (node -v) é igual a versão que você está especificando na variável de ambiente.

Cloudflare requer Node v16.13, que é uma versão mais recente que o mínimo por padrão do Astro, então verifique novamente que você está utilizando pelo menos a v16.13.

Hidratação no lado do cliente pode falhar como resultado da opção Auto Minify da Cloudflare. Se você ver Hydration completed but contains mismatches no console, certifique-se de desabilitar Auto Minify nas configurações da Cloudflare.