Incremente seus sites no Cloudflare Pages com a disponibilidade geral do Pages Functions

Antes de lançarmos o Pages, em abril de 2021, sabíamos que seria o começo de algo mágico, uma experiência que parecia “perfeita”. Vislumbramos uma experiência tão simples e tranquila que qualquer desenvolvedor poderia disponibilizar um site em segundos e adicionar mais a ele usando o restante do nosso ecossistema Cloudflare.

Alguns meses depois, quando anunciamos que o Pages era uma plataforma full stack, em novembro de 2021, essa visão se tornou realidade. Criar uma plataforma de desenvolvimento apenas para sites estáticos não foi o fim da história do Pages e, com o Cloudflare Workers já fazendo parte do nosso ecossistema, sabíamos que estávamos diante de um potencial inexplorado. Com a introdução do Pages Functions, capacitamos os desenvolvedores a usar qualquer site estático e adicionar facilmente conteúdo dinâmico com o poder do Cloudflare Workers.

No ano passado, desde que o Functions entrou em beta aberto, exploramos quais tipos de recursos full stack os desenvolvedores buscavam para seus projetos e ajustamos a experiência do Functions para a forma como está hoje.

Temos o prazer de anunciar que o Pages Functions já está em disponibilidade geral.

Embora sejam chamadas de “Functions” no contexto do Pages, essas funções executadas na rede da Cloudflare são o Cloudflare Workers “disfarçado”. O Pages aproveita o poder e a escalabilidade do Workers e especializa os recursos para se alinharem com a experiência do Pages que nossos usuários conhecem e amam.

Com o Functions, você pode criar possibilidades de funcionalidade dinâmica para adicionar ao seu site como, integrar soluções de armazenamento, conectar serviços de terceiros, usar a renderização do lado do servidor com suas estruturas de full stack favoritas e muito mais. À medida que o Pages Functions abre suas portas para o tráfego de produção, vamos explorar alguns dos recursos interessantes que aprimoramos e adicionamos nesta versão.

Gosta de codificar? Nós cuidamos da infraestrutura e deixamos você fazer isso.

Simplesmente escreva uma função JavaScript/Typescript e insira em um diretório de funções enviando seu código para seu provedor Git. Nosso sistema de CI, extremamente rápido, cria seu código e o implanta junto com seus ativos estáticos.

Prefere desenvolver você mesmo? Tem um provedor Git especial que ainda não é compatível com o Pages? Sem problemas. Depois de inserir o Functions na sua pasta de funções, você pode criar com suas ferramentas de CI preferidas e, em seguida, carregar seu projeto no Pages para ser implantado.

Durante a versão beta, aprendemos que você e suas equipes valorizam a visibilidade acima de tudo. Assim como no Cloudflare Workers, criamos uma maneira simples de você observar suas funções enquanto elas processam solicitações. Quanto mais rápido você entende um problema, mais rápido pode reagir.

Agora você pode visualizar facilmente os registros do Functions "seguindo" seus registros. Para obter informações básicas, como resultado e IP de solicitação, você pode navegar até o painel do Pages para obter os registros relevantes.

Para filtros mais específicos, você pode usar

para receber um feed ao vivo do console e registros de exceção para cada solicitação que o Functions recebe.

wrangler pages deployment tail

No painel, o Pages agrega dados no Functions na forma de métricas de sucesso/erro de solicitações e status de invocação. Você pode consultar seu painel de métricas não apenas para entender melhor seu uso por projeto, mas também para obter uma verificação de pulso sobre a integridade do Functions, capturando volumes de sucesso/erro.

Vinculações de armazenamento

Quer se tornar realmente full stack? Sabemos que encontrar uma solução de armazenamento que atenda às suas necessidades e ao seu ecossistema não é uma tarefa fácil. Mas, pode ser.

Com o Functions, você pode aproveitar nossa ampla gama de produtos de armazenamento, incluindo Workers KV, Durable Objects, R2, D1 e, muito em breve, Queues e Workers Analytics Engine. Basta criar seu namespace, bucket ou banco de dados e adicionar sua vinculação no painel do Pages para colocar seu site full stack em funcionamento com apenas alguns cliques.

Desde a inserção de um sistema de comentários rápidos até a implantação de sua própria autenticação e a criação de sites de comércio eletrônico com base em banco de dados, a integração com produtos existentes em nossa plataforma para desenvolvedores desbloqueia um conjunto exponencial de casos de uso para seu site.

Vinculações secretas

Além de adicionar variáveis de ambiente que estão disponíveis para o seu projeto em tempo de desenvolvimento e em tempo de execução, agora você também pode adicionar “segredos” ao seu projeto. Essas são variáveis de ambiente criptografadas que não podem ser visualizadas por nenhuma interface de painel e são um ótimo local para dados confidenciais, como tokens de API ou senhas.

Nosso objetivo com o Pages é sempre atender você onde estiver quando se trata das ferramentas que adora usar. Durante esse período beta, também notamos alguns padrões consistentes na forma como você estava empregando o Functions para integrar-se a serviços comuns de terceiros. Os Pages Plugins, nossos snippets de código prontos, oferecem uma experiência plug and play para você construir o ecossistema de sua escolha em torno de seu aplicativo.

Na essência, o Pages Plugins é uma parte reutilizável, e personalizável, de código de tempo de execução que pode ser incorporado em qualquer lugar dentro de seu aplicativo Pages. É um Pages Functions “combinável”, concedendo ao Plugins todo o poder do Functions (ou seja, Workers), incluindo a capacidade de configurar middleware, rotas parametrizadas e ativos estáticos.

Com o Pages Plugins, você pode se integrar a uma infinidade de aplicativos de terceiros, incluindo Sentry, Honeycomb, Stytch, MailChannels e muitos mais.

Temos o ideal de ajudar os desenvolvedores em qualquer ponto que estejam, isso também se reflete na forma de frameworks Javascript. Como grandes apoiadores não apenas de estruturas amplamente adotadas, mas também de estruturas emergentes, nossa equipe trabalha com uma infinidade de autores de estruturas para criar oportunidades para você experimentar sua nova tecnologia e implantar no Pages imediatamente.

Agora compatível com Next.js 13 e outros

Recentemente, anunciamos nossa compatibilidade com aplicativos Next.js que aceitam o Edge Runtime. Hoje, temos o prazer de anunciar que agora somos compatíveis com o Next.js 13. O Next.js 13 traz alguns paradigmas modernos mais solicitados para a estrutura do Next.js, incluindo roteamento aninhado, componentes de servidor do React 18 e streaming.

Prefere outra estrutura? Sem problemas.

Use a full stack no Pages para aproveitar a renderização do lado do servidor (SSR) com uma das muitas outras estruturas oficialmente compatíveis, como Remix, SvelteKit, QwikCity, SolidStart, Astro e Nuxt. Você pode conferir nosso post no blog sobre compatibilidade com SSR no Pages e como começar a usar algumas dessas estruturas.

Embora o Pages Functions seja desenvolvido no Workers, entendemos que, superficialmente, eles não são exatamente a mesma coisa. No entanto, para os usuários que talvez já usem o Workers e queiram experimentar o Cloudflare Pages, temos um caminho direto para começar rapidamente.

Se você já tem o Workers e quer uma maneira fácil de obter uma full stack no Pages, pode usar o “modo avançado” do Pages Functions. Gere um módulo ES no Workers chamado _worker.js no diretório de saída do seu projeto e implante.

Isso pode ser muito útil se você for um autor de estrutura ou talvez tenha um caso de uso mais complexo que não se encaixe em nosso roteador baseado em arquivos.

Assim, hoje, ao anunciarmos o Functions com disponibilidade geral, estamos entusiasmados em permitir que seu tráfego seja ampliado. Durante o período de beta aberto, determinamos um limite diário de 100 mil solicitações gratuitas por dia para permitir que você experimentasse o recurso. Hoje, as 100 mil solicitações por dia continuam sendo o limite gratuito, mas agora você pode pagar para ter acesso ilimitado.

Como o Functions é apenas um Workers “especial”, a partir deste comunicado você vai começar a ver o uso do Functions mostrado em sua fatura na assinatura do Workers pago ou através de seu contrato do Workers Enterprise. Assim como no Workers, em um plano pago, você tem a opção de escolher entre nossos dois modelos de uso, Bundled e Unbound, e vai ser cobrado de acordo com sua escolha.

Ao manter o Pages na marca como o “presente para a internet” da Cloudflare, você vai receber solicitações ilimitadas de ativos estáticos gratuitos e será cobrado somente pelas solicitações dinâmicas. Você pode ler mais sobre como o faturamento do Functions funciona em nossa documentação.

Para começar a improvisar, acesse os documentos do Pages Functions e confira nosso post no blog sobre algumas das melhores estruturas a serem usadas para implantar seu primeiro aplicativo full stack. Ao começar a desenvolver seus projetos, informe-nos no canal #functions em Pages do nosso Discord para desenvolvedores da Cloudflare. Divirta-se desenvolvendo!