Construa uma API de screenshot com Functions e Browserless

Faça o deploy de um projeto Hono em Functions que captura o screenshot de uma página pela API do Browserless e retorna a imagem PNG.

Última atualização

Ver como Markdown Configurar agente

Neste tutorial, você vai construir uma API de screenshot que retorna uma página web como uma imagem PNG. Você vai criar o projeto a partir do template Hono, escrever a rota, armazenar o token da API, fazer o deploy do projeto e requisitar o endpoint.

A função não executa nenhum navegador próprio. Ela envia a URL de destino para Browserless, um serviço hospedado que renderiza a página e responde com a imagem. A função retorna esses bytes para o cliente.

Pré-requisitos

  • Uma conta Azion. Para criar uma, consulte Como criar uma conta na Azion.
  • Azion CLI instalada na sua máquina. Consulte Azion CLI.
  • Node.js versão 18 ou superior.
  • Uma conta no Browserless e o token de API dessa conta. Para criar uma, consulte Browserless.
  • Conhecimento prático de JavaScript.

1. Autentique Azion CLI

Faça login na sua conta Azion pelo terminal:

azion login

Azion CLI abre um fluxo pelo navegador quando você omite as flags de credencial. Ela armazena as credenciais localmente, e elas autorizam todos os comandos seguintes.

2. Crie o projeto a partir do template Hono

Azion CLI inicializa o projeto a partir de um template inicial. Para criá-lo:

Inicialize o projeto

Execute o comando e responda aos prompts que aparecem:

azion init --name screenshot-api
Selecione Hono na lista de presets

O prompt lista um preset por framework:

Shell
01? Choose a preset: [Use arrows to move, type to filter]
02 Angular
03 Astro
04 Docusaurus
05 Eleventy
06 Emscripten
07 Gatsby
08 Hexo
09> Hono
10 Hugo
11 Javascript
12 ...
Selecione o template Hono Boilerplate
Digite n no prompt de servidor de desenvolvimento local

O prompt aparece depois que Azion CLI obtém e configura o template:

Do you want to start a local development server? (y/N)
Digite n no prompt de deploy

A rota e o token da API ainda não estão prontos:

Do you want to deploy your project? (y/N)

Azion CLI cria o diretório screenshot-api e escreve o projeto Hono nele. Acesse esse diretório:

cd screenshot-api

Os comandos restantes são executados a partir dele.

3. Escreva a rota de screenshot

O campo entry do azion.config.js indica o arquivo de entrada do projeto. Abra esse arquivo e substitua o conteúdo dele pela rota que captura a página:

JavaScript
01import { Hono } from 'hono';
02
03const app = new Hono();
04
05app.get('/screenshot', async (c) => {
06 const url = c.req.query('url') || 'https://www.example.com';
07 const token = Azion.env.get('PUPPETEER_BROWSERLESS_IO_KEY');
08
09 const response = await fetch(
10 `https://production-sfo.browserless.io/screenshot?token=${token}`,
11 {
12 method: 'POST',
13 headers: {
14 'Cache-Control': 'no-cache',
15 'Content-Type': 'application/json',
16 },
17 body: JSON.stringify({
18 url,
19 options: { type: 'png' },
20 }),
21 },
22 );
23
24 if (!response.ok) {
25 return c.html(await response.text(), response.status);
26 }
27
28 const image = new Uint8Array(await response.arrayBuffer());
29
30 return c.body(image, {
31 status: 200,
32 headers: { 'Content-Type': 'image/png' },
33 });
34});
35
36export default app;

A rota lê a página de destino no parâmetro de consulta url e usa https://www.example.com como valor padrão. export default app é o padrão de handler ES Modules, que Azion recomenda em vez do padrão Service Worker. Para comparar os dois padrões, consulte Migre padrões de handler em Functions.

O projeto completo está no pacote browserless do repositório de exemplos de functions.

4. Armazene o token do Browserless em uma variável de ambiente

Uma variável de ambiente mantém o token fora do código da função e fora do controle de versão. Para criá-la:

azion create variables --key "PUPPETEER_BROWSERLESS_IO_KEY" --value "[TOKEN VALUE]" --secret true

Azion armazena a variável na conta, e Azion.env.get() retorna o valor dela em tempo de execução. Uma variável cuja chave contém password, pwd, secret, key, hash, encrypted, passcode, auth ou token é enviada como secret por padrão. A flag --secret true repete esse padrão aqui.

Uma alteração em uma variável não alcança uma função que já está em execução. Faça um novo deploy da função para o novo valor ter efeito. Azion Runtime também lê uma variável por process.env. Para as duas interfaces, os campos de uma variável e as outras interfaces de gerenciamento, consulte Variáveis de ambiente.

5. Faça o deploy do projeto

Construa o projeto e envie para Azion:

azion deploy

O comando faz upload do código da função e configura a aplicação e as regras de roteamento dela. Ele retorna um domínio de workload no formato https://xxxxxxx.map.azionedge.net.

nota — Azion abre uma página em Azion Console que mostra os logs do deploy. Abra o link exibido quando o navegador não abrir sozinho.

A aplicação responde nesse domínio alguns minutos depois, quando a propagação de DNS termina.

6. Verifique a resposta com o screenshot

Requisite a rota com o endereço da página a ser capturada:

curl -s -o screenshot.png -w '%{content_type}\n' "https://<seu-dominio-azion>/screenshot?url=https://www.example.com"

O comando imprime o tipo de conteúdo da resposta:

image/png

O arquivo screenshot.png contém a captura de https://www.example.com. Uma requisição sem o parâmetro url captura a mesma página, porque a rota usa esse valor padrão. Quando Browserless recusa uma requisição, a rota responde com o corpo e o código de status que Browserless retornou.

Próximos passos

Variáveis de ambienteOs campos de uma variável, os limites de tamanho e todas as interfaces que criam uma.Migre padrões de handler em FunctionsOs handlers ES Modules e Service Worker lado a lado, com os parâmetros que cada um recebe.Limites de FunctionsOs limites de tempo de CPU, tempo de execução, sub-requisições e memória de uma única invocação.Solução de problemas de execução e logs de funçõesLeia os logs da função e encontre a causa quando uma função nunca executa ou para antes de responder.Object StorageBuckets na Azion Web Platform, acessíveis pelo padrão S3, para guardar as imagens que a rota captura.Deploy de aplicação Jamstack com HonoO restante do fluxo Hono na Azion, incluindo o servidor de desenvolvimento local.