ContatoSign in

Como construir uma aplicação browserless com Edge Functions

Este guia demonstra como criar uma aplicação browserless usando Azion Edge Functions. Aplicações browserless permitem executar tarefas de automação web, scraping e operações baseadas em navegador sem a sobrecarga de executar uma instância completa de navegador, tornando-as ideais para ambientes de edge computing.

Requisitos

Antes de começar, certifique-se de ter:

Código

Este é um exemplo de código de como usar o Browserless com Edge Functions da Azion para tirar uma screenshot. O exemplo completo de código pode ser encontrado neste repositório do GitHub.

import { Hono } from "hono";
import { fire } from "hono/service-worker";
const app = new Hono();
const TOKEN = process.env.PUPPETEER_BROWSERLESS_IO_KEY!;


app.get("/screenshot", async (c) => {
  const url = c.req.query("url");
  const headers = {
    "Cache-Control": "no-cache",
    "Content-Type": "application/json",
  };


  const response = await fetch(
    `https://production-sfo.browserless.io/screenshot?token=${TOKEN}`,
    {
      method: "POST",
      headers: headers,
      body: JSON.stringify({
        url: url || "https://www.example.com",
        options: {
          type: "png",
        },
      }),
    }
  );


  if (!response.ok) {
    const status = response.status;
    return c.html(await response.text(), status as any);
  }


  const arrayBuffer = await response.arrayBuffer();
  const imageBuffer = new Uint8Array(arrayBuffer);


  return c.body(imageBuffer, {
    status: 200,
    headers: {
      "Content-Type": "image/png",
    },
  });
});


fire(app);

Deploy na Azion

Passo 1: Autentique-se na Azion

  1. Faça login na sua conta Azion via CLI:
Terminal window
azion login
  1. Siga os prompts de autenticação para conectar sua CLI com sua conta Azion.

Passo 2: Crie uma nova Edge Application de um template

  1. Inicie o processo de criação de uma Edge Application:
Terminal window
azion init

  1. Selecione o template Hono Boilerplate para sua browserless application.

  2. Siga os prompts para configurar sua nova Edge Application.

Passo 3: Faça o deploy da Edge Function

Faça o deploy de sua aplicação browserless na rede edge da Azion:

Terminal window
azion deploy

O processo de deploy irá:

  • Fazer upload do código da sua Edge Function
  • Configurar a edge application
  • Configurar as regras de roteamento necessárias
  • Fornecer um domínio único

Passo 4: Acesse sua aplicação

Após o deploy, você receberá um domínio como https://xxxxxxx.map.azionedge.net. Sua aplicação browserless estará disponível nesta URL em alguns minutos após a propagação do DNS.

Entendendo a implementação

Estrutura da Edge Function

A Edge Function browserless tipicamente inclui:

  • Manipulação de requisições: Processamento de requisições HTTP recebidas
  • Lógica de automação de navegador: Implementação de operações browserless
  • Formatação de resposta: Retorno de resultados no formato apropriado
  • Tratamento de erros: Gerenciamento de falhas e casos extremos

Principais benefícios

  • Performance: Executa no edge, reduzindo latência
  • Escalabilidade: Escala automaticamente com a demanda
  • Custo-efetivo: Não há necessidade de manter instâncias de navegador
  • Segurança: Ambiente de execução isolado

Casos de uso comuns

  • Web scraping e extração de dados
  • Geração de PDF a partir de HTML
  • Captura de screenshots
  • Automação de formulários
  • Testes de API e monitoramento

Testando sua aplicação browserless

  1. Testes de funcionalidade: Verifique se todos os recursos de automação funcionam corretamente
  2. Testes de performance: Certifique-se de que os tempos de resposta atendem aos seus requisitos
  3. Tratamento de erros: Teste casos extremos e cenários de erro
  4. Limitações de memória: Garanta que suas operações permaneçam dentro dos limites de memória das Edge Functions

Solução de problemas

Problemas comuns e soluções

  • Falhas de deployment: Verifique suas variáveis de ambiente e processo de build
  • Erros de runtime: Revise os logs da Edge Function no Console Azion
  • Problemas de performance: Otimize suas operações browserless para execução no edge
  • Limitações de memória: Certifique-se de que suas operações permaneçam dentro dos limites de memória das Edge Functions

Próximos passos

  • Explore técnicas avançadas de automação browserless
  • Implemente monitoramento e logging para sua aplicação
  • Considere integração com outros produtos Azion como Edge Storage
  • Dimensione sua aplicação baseada nos padrões de uso