Edge Functions primeiros passos

Antes de começar

Para você começar e ter sucesso como um edge developer, é importante:

As edge functions funcionam sobre o Azion Runtime, que é um conjunto de ferramentas que permitem o desenvolvimento no edge.

É fundamental conhecer a lista de APIs, métodos e tipos disponíveis. Saiba mais sobre o Azion Runtime.

Editor de Código

O Edge Functions Code Editor fornece uma experiência de desenvolvimento semelhante à que os desenvolvedores estão acostumados. A integração entre Edge Functions e ChatGPT ajuda você a escrever, refatorar e revisar o código.

Edge Functions e Edge Application

Desenvolvendo sua primeira edge function para Edge Application:

Acesse o Real-Time Manager (RTM) e, no canto superior esquerdo, selecione Edge Functions na seção Edge Libraries.
Clique em Add Function.
Escolha um nome para sua função.
Escreva sua função. Mas espere, antes disso, continue lendo:

Escrevendo uma edge function

Primeiro, as edge functions para Edge Application funcionam com base em um fetch event. Ele é inicializado com uma função addEventListener, passando fetch como o tipo de evento e um evento. Por exemplo:

  addEventListener('fetch', event => { event.respondWith(handleRequest(event.request)); });

Em segundo lugar, é necessário definir o comportamento da função handleRequest. Esta função tem como assinatura o event.request. Esses dados podem ser usados posteriormente para implementar a lógica necessária, como:

Manipular cookies.
Implementar um comportamento com base no método de solicitação (POST, GET, PUT, DELETE).
Acessar os metadados da requisição.

A função handleRequest pode ser definida como:

  const html = `<!DOCTYPE html> <body> <h1>Hello World</h1> <p>This markup was generated by Azion - Edge Functions.</p> </body>` async function handleRequest(request) { return new Response(html, { headers: { "content-type": "text/html;charset=UTF-8", }, }) }

Neste exemplo, a resposta será o conteúdo HTML, declarado anteriormente pelo const html. Os headers também podem ser manipulados e, no exemplo, o Content-Type é definido.

Acesse o Azion Console > Edge Functions
Clique em + Edge Function.
Escolha um nome para sua função.
Escreva sua função. Mas espere, antes disso, continue lendo:

Escrevendo uma edge function

  addEventListener('fetch', event => {
      event.respondWith(handleRequest(event.request));
    });

Manipular cookies.
Implementar um comportamento com base no método de solicitação (POST, GET, PUT, DELETE).
Acessar os metadados da requisição.

A função handleRequest pode ser definida como:

  const html = `<!DOCTYPE html>
  <body>
    <h1>Hello World</h1>
    <p>This markup was generated by Azion - Edge Functions.</p>
  </body>`

  async function handleRequest(request) {
    return new Response(html, {
      headers: {
        "content-type": "text/html;charset=UTF-8",
      },
    })
  }

Neste exemplo, a resposta será o conteúdo HTML, declarado anteriormente pelo const html. Os headers também podem ser manipulados e, no exemplo, o Content-Type é definido.

Teste e depuração

Depois de escrever suas edge functions, você pode visualizar a resposta e inspecionar o código. O preview simula uma solicitação e essa simulação pode ser alterada para atender às necessidades do desenvolvedor.

Saiba mais sobre o Preview Deployment.

É possível depurar as funções através de:

Function instantiation

Depois de salvar sua edge function, é necessário instanciá-la em uma edge application.

Saiba mais sobre como instanciar uma edge function em uma edge application.