---
name: azion-construa-uma-api-de-screenshot-com-functions-e-browserless
description: >-
  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.
---

# Construa uma API de screenshot com Functions e Browserless

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](/pt-br/documentacao/plataforma/functions/) não executa nenhum navegador próprio. Ela envia a URL de destino para [Browserless](https://browserless.io/), 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](/pt-br/documentacao/fundamentos/criar-uma-conta/).
- Azion CLI instalada na sua máquina. Consulte [Azion CLI](/pt-br/documentacao/devtools/cli/).
- Node.js versão 18 ou superior.
- Uma conta no Browserless e o token de API dessa conta. Para criar uma, consulte [Browserless](https://browserless.io/).
- Conhecimento prático de JavaScript.

---

## 1. Autentique Azion CLI

Faça login na sua conta Azion pelo terminal:

```bash
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:

1. **Inicialize o projeto**

   Execute o comando e responda aos prompts que aparecem:

   ```bash
   azion init --name screenshot-api
   ```

2. **Selecione Hono na lista de presets**

   O prompt lista um preset por framework:

   ```sh
   ? Choose a preset:  [Use arrows to move, type to filter]
     Angular
     Astro
     Docusaurus
     Eleventy
     Emscripten
     Gatsby
     Hexo
   > Hono
     Hugo
     Javascript
     ...
   ```

3. **Selecione o template Hono Boilerplate**

4. **Digite n no prompt de servidor de desenvolvimento local**

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

   ```sh
   Do you want to start a local development server? (y/N)
   ```

5. **Digite n no prompt de deploy**

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

   ```sh
   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:

```bash
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
import { Hono } from 'hono';

const app = new Hono();

app.get('/screenshot', async (c) => {
  const url = c.req.query('url') || 'https://www.example.com';
  const token = Azion.env.get('PUPPETEER_BROWSERLESS_IO_KEY');

  const response = await fetch(
    `https://production-sfo.browserless.io/screenshot?token=${token}`,
    {
      method: 'POST',
      headers: {
        'Cache-Control': 'no-cache',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        url,
        options: { type: 'png' },
      }),
    },
  );

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

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

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

export 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](/pt-br/documentacao/guias/desenvolvimento-de-aplicacoes/functions-e-runtime/migrar-padroes-de-handler/).

O projeto completo está no [pacote browserless do repositório de exemplos de functions](https://github.com/egermano/edge-functions-examples/tree/main/packages/browserless).

---

## 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:

```bash
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](/pt-br/documentacao/plataforma/functions/environment-variables/).

---

## 5. Faça o deploy do projeto

Construa o projeto e envie para Azion:

```bash
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](https://console.azion.com/) 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:

```bash
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 ambiente](/pt-br/documentacao/plataforma/functions/environment-variables.md): Os campos de uma variável, os limites de tamanho e todas as interfaces que criam uma.
- [Migre padrões de handler em Functions](/pt-br/documentacao/guias/desenvolvimento-de-aplicacoes/functions-e-runtime/migrar-padroes-de-handler.md): Os handlers ES Modules e Service Worker lado a lado, com os parâmetros que cada um recebe.
- [Limites de Functions](/pt-br/documentacao/plataforma/functions/limites.md): Os 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ções](/pt-br/documentacao/plataforma/functions/solucao-de-problemas.md): Leia os logs da função e encontre a causa quando uma função nunca executa ou para antes de responder.
- [Object Storage](/pt-br/documentacao/plataforma/object-storage.md): Buckets na Azion Web Platform, acessíveis pelo padrão S3, para guardar as imagens que a rota captura.
- [Deploy de aplicação Jamstack com Hono](/pt-br/documentacao/guias/desenvolvimento-de-aplicacoes/frameworks/hono.md): O restante do fluxo Hono na Azion, incluindo o servidor de desenvolvimento local.