Como escrever edge functions
Antes de começar
Para você começar e ter sucesso como um edge developer, é importante:
- Familiarizar-se com JavaScript.
- Conhecer o conceito de Strict mode.
- Ter uma conta no Azion Console.
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
Para desenvolver sua primeira edge function para Edge Application:
- 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:
Escrever 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.
- Clique no botão Save.
- No Real-Time Manager (RTM), 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:
Escrever 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.
- Clique no botão Save.
Teste e depuração
Depois de escrever suas edge functions, você pode visualizar a resposta e inspecionar o código. O preview simula uma requisição e essa simulação pode ser alterada para atender às necessidades do desenvolvedor.
Saiba mais sobre o Preview Deployment.
É possível debugar 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.
Contribuidores
