Como desenvolvedores, estamos familiarizados com o mundo acelerado e em constante mudança dos frameworks web. Às vezes, pode parecer uma situação desafiadora, pois se destacar no uso de um framework específico requer um entendimento mais profundo que vai além de apenas conhecer a linguagem de programação. Um dos obstáculos significativos é configurar o projeto para funcionar perfeitamente em diferentes ambientes.
Questões como “Isso vai funcionar na nuvem?” e “Em qual plataforma deve ser executado?” surgem frequentemente. Mas e se você pudesse implantar seu projeto no edge, aproveitando a baixa latência, segurança e disponibilidade sem se preocupar com o ambiente específico? Este post explora o conceito de adaptar projetos para serem executados no edge e apresenta uma solução que simplifica o processo.
Adaptando Projetos para Execução no edge
Para garantir uma implantação contínua, um projeto deve ser estruturado de maneira a evitar atritos com a plataforma hospedeira. Não é incomum encontrar situações em que as configurações necessárias para executar um aplicativo em uma plataforma se parecem muito pouco com as necessárias para uma plataforma diferente. Isso pode levar a um vendor lock-in, onde a troca de hosts se torna cara em termos de tempo e dinheiro, forçando os clientes a continuar com o provedor de serviços atual.
Na Azion, valorizamos o poder do software de código aberto e temos como objetivo capacitar o desenvolvimento web moderno. Nossa plataforma permite a inicialização e implantação de projetos em vários frameworks web, incluindo:
- Next.js
- React
- Vue
- Astro
- Angular
- Hexo
- Vite
- JavaScript em si
A Azion fornece seu próprio Edge Runtime projetado para fornecer uma experiência ideal para executar aplicativos no edge. Este runtime alimenta o Azion Edge Functions e abre um mundo de possibilidades para desenvolvedores e empresas. Além disso, desenvolvemos o Vulcan para preencher as lacunas e permitir que os frameworks web sejam executados nativamente no edge. O Vulcan é acionado através da Azion CLI e simplifica a integração de polyfills para Edge Computing, revolucionando o processo de criação de workers, especialmente para a plataforma da Azion.
Polyfills são trechos de código usados no JavaScript para fornecer funcionalidades modernas aos ambientes que não oferecem suporte nativo. Os polyfills preenchem as lacunas, garantindo um comportamento consistente entre diferentes navegadores. Por exemplo, vamos considerar um runtime que não oferece suporte a uma API específica do Node.js, na qual um projeto depende. Durante o processo de build, o Vulcan reconhece a assinatura dessa API e a substitui por uma API relativa, eliminando a necessidade de adaptação manual do projeto.
O Vulcan se destaca na criação de um protocolo intuitivo e simplificado para a criação de presets. É uma ferramenta de código aberto sob a licença MIT e incentiva contribuições da comunidade. Este recurso aprimora a personalização e permite que os desenvolvedores adaptem seus aplicativos aos requisitos exclusivos do projeto, fornecendo a flexibilidade necessária para otimizá-los de maneira eficaz.
Configurando um projeto
A Azion CLI é uma ferramenta excepcional que melhora muito a experiência do desenvolvedor. Com a CLI instalada em seu ambiente, inicializar um projeto é tão simples quanto executar o seguinte comando:
azion initEste comando inicia um processo interativo no qual você pode escolher o template desejado..
Depois de selecionar o template, cada framework apresentará um conjunto específico de etapas. Escolha executar o projeto localmente e instale as dependências necessárias.
Utilizando Polyfills
O Vulcan torna possível o uso de polyfills. Vamos dar uma olhada mais de perto em como configurar um projeto para utilizar esse recurso.
Exemplo: supondo que você queira iniciar um projeto JavaScript que utiliza a API Buffer do Node.js. Para conseguir isso, você precisa informar ao Vulcan que o projeto implementa polyfills.
O Vulcan lê um arquivo de configuração chamado vulcan.config.js. Crie este arquivo e inclua as seguintes propriedades:
module.exports = { entry: 'main.js', builder: 'webpack', useNodePolyfills: true,};- entry: representa o ponto de entrada principal do seu aplicativo, onde o processo de build começa. Não é aplicável para soluções Jamstack.
- builder: define a ferramenta de build a ser usada,
esbuildouwebpack. - useNodePolyfills: especifica se os polyfills do Node.js devem ser aplicados.
Depois de aplicar essas configurações, você pode importar as APIs necessárias para o seu projeto. Por exemplo, vamos considerar a importação do Buffer de Node.js:
Dentro de main.js:
// Import the Buffer class from the 'buffer' module in Node.jsimport { Buffer } from 'node:buffer';
// Define a function named 'myWorker' that takes an event as an argumentexport default function myWorker(event) { // Create a new Buffer instance 'buf1' from the string "x" var buf1 = Buffer.from("x"); // Create a new Buffer instance 'buf2' from the string "x" var buf2 = Buffer.from("x"); // Compare 'buf1' and 'buf2' using Buffer.compare method // This method returns a number indicating whether 'buf1' is equal to 'buf2' var a = Buffer.compare(buf1, buf2);
// In this case, it'll return 0, because they're equal console.log(a);
// Now, let's swap the values of 'buf1' and 'buf2' buf1 = Buffer.from("y"); buf2 = Buffer.from("x"); // Compare 'buf1' and 'buf2' again a = Buffer.compare(buf1, buf2);
// Here it returns 1 console.log(a);
// The function returns a new Response object with the string "Testing buffer polyfills" return new Response("Testing polyfills");}Para executar o projeto localmente, use o seguinte comando:
azion devAgora você pode acessar o projeto localmente.
Nota: certifique-se de estar no diretório raiz do seu projeto para que os comandos sejam executados corretamente.
O comando azion dev inicializa o processo de build, que é gerenciado de maneira transparente pelo Vulcan e retorna a porta para acessar o projeto.
O projeto de exemplo usado neste exemplo pode ser encontrado no repositório Azion Samples no GitHub.
Edge Runtime, Vulcan e Azion CLI
Processo explicado
- O usuário inicia o processo executando
azion initvia Azion CLI e seleciona o template desejado. - A Azion CLI, então, invoca o Vulcan, que se encarrega de inicializar o projeto.
- Vulcan devolve o projeto inicializado ao usuário, que decide se implanta o projeto ou o executa localmente.
- Se o usuário optar por executar o projeto localmente, Vulcan dispara o processo de build e gera o worker.
- Se o usuário decidir implantar o projeto, ele executa o comando
azion deploy. Esse comando inicia o processo de build novamente, após o qual Azion CLI cria uma edge application e a implanta na rede distribuída da Azion. - Após a implantação bem-sucedida, a Azion CLI fornece o domínio da aplicação. Depois de um breve período de espera, a aplicação se torna acessível.
Responsabilidades
Azion CLI: a interface de linha de comando que serve como principal ponto de interação entre o usuário e o sistema. Gerencia todo o processo de implantação da aplicação, garantindo um fluxo de trabalho eficiente.
Vulcan: o motor que impulsiona a inicialização do projeto, build e sua adaptação. Adequa inteligentemente o projeto com base no template selecionado, garantindo que a aplicação esteja otimamente configurado para o uso pretendido.
Azion Edge Runtime: o ambiente de execução que hospeda a aplicação e gerencia sua execução. A Edge Application é distribuída através da rede global de Edge Nodes, garantindo que ela esteja sempre perto dos usuários, maximizando assim velocidade e eficiência.
Ao utilizar a plataforma da Azion, os desenvolvedores podem desfrutar de uma melhor experiência de implantação de frameworks web no edge. Adapte seus projetos para serem executados de maneira contínua enquanto se concentra na funcionalidade principal, em vez de se preocupar com o ambiente específico. Com o Edge Runtime da Azion e a ferramenta Vulcan, os desenvolvedores ganham o poder de otimizar seus aplicativos de maneira eficaz, aproveitando a baixa latência, segurança e disponibilidade no edge.
