Crie uma aplicação Jamstack no Azion Cells com o framework Flareact
Jamstack é um conjunto de melhores práticas e fluxos de trabalho para maximizar a eficiência da construção de sites. Milhões de programadores e empresas utilizam o Jamstack através de diferentes plataformas para executar projetos globais.
Visite o site oficial da arquitetura Jamstack para maiores informações.
Cells é o framework e runtime da Azion para aplicações serverless. Ao usá-lo, os clientes podem executar seu código em nossa Edge Network global, construída para aplicações edge-native de latência ultrabaixa e para análise de dados em tempo real.
Algumas de suas características incluem baixo impacto e baixo consumo de memória, principalmente quando comparada a Containers e outros serviços. Além disso, o Cells possui um cold start time igual a zero, que o torna ideal para uso com sistemas de IA como reconhecimento facial e de objetos.
A Azion oferece suporte à arquitetura Jamstack com uma ferramenta de linha de comando (CLI) que constrói projetos Flareact direcionados às Edge Functions da Azion.
Visite o site oficial do framework Flareact para maiores informações.
O framework Flareact permite que você renderize suas aplicações utilizando a biblioteca React® 1 no edge e não no servidor. Ele também suporta roteamento de página baseado em arquivo, paths de página dinâmicos, e APIs de busca de dados edge-side.
Visite o site da biblioteca React para maiores informações.
Veja como instalar, configurar, e publicar uma aplicação web na Azion usando o framework Flareact:
1. Pré-requisitos
Para criar uma aplicação com a arquitetura Jamstack no Azion Cells utilizando o framework Flareact, você precisa de:
- Um bucket Amazon S32 na Amazon Web Services2 (AWS) com permissões de gravação e leitura.
- Uma conta na plataforma da Azion com Edge Functions habilitadas.
- O Node.js3 runtime environment, versão 16.x ou superior, instalado em ambiente de compilação build.
- A Azion CLI instalada.
Para instalar a Azion CLI, visite a página da sua documentação de referência.
2. Instalação do Node.js
Você pode baixar o Node.js no site oficial ou com a ferramenta Node Version Manager (NVM). Após baixar o arquivo, instale o Node.js runtime environment no seu computador seguindo as instruções contidas no site.
Visite o projeto open-source do NVM no repositório NVM para maiores informações.
Nota: certifique-se de utilizar a versão versão 16.x ou superior do Node.js. Você também precisa ter permissão para instalar pacotes globais com o gerenciador de pacotes
npm
do Node.js no seu sistema operacional.
3. Configurar uma aplicação Flareact na Azion
Para configurar e publicar uma aplicação web com o framework Flareact na plataforma da Azion, siga os seguintes passos:
-
Inicie uma aplicação baseada num template ou clone o seu próprio projeto:
git clone https://github.com/flareact/flareact-template
-
Crie um Personal Token no Real-Time Manager (RTM).
Nota: você poderá utilizar um Personal Token já existente na plataforma da Azion. Caso necessite criar um novo, acesse Account Menu > Personal Tokens ou acesse a documentação de referência para maiores informações.
-
Execute o comando a seguir para configurar o Personal Token:
azioncli configure --token azionxxxxxxxxxxx
Este comando configura o seu Personal Token para uso com os comandos da CLI. Um token é uma sequência aleatória de caracteres com o formato
azionxxxxxxxxxxx
.Nota: Todos os comandos a partir do passo 4 devem ser executados dentro do diretório do projeto.
-
Execute o comando a seguir:
azioncli edge_applications init --name "flareact-azion" --type flareact
Este comando instalará todas as bibliotecas e recursos necessários para executar o framework Flareact na plataforma da Azion. Ele também criará um diretório denominado
azion
na pasta da sua aplicação web.Para verificar a criação da pasta
azion
, execute o comandols
, que apresentará o resultado abaixo:azion package.json ...
A resposta da CLI ao comando
edge_applications init
é longa. O final da resposta deve conter as informações abaixo, que confirmam que o comando foi bem sucedido:... ... ... added 1 package, and audited 3 packages in 832ms found 0 vulnerabilities /Users/<user_name>/repository/my-flareact-app Installed azion-framework-adapter successfully Command exited with code 0
O diretório
<user_name>
na resposta da CLI é o diretório do usuário no sistema operacional do computador. -
Crie um projeto utilizando o framework Flareact dentro da pasta do projeto criado no passo 1.
-
Execute o comando a seguir a fim de editar o arquivo
azion/webdev.env
diretamente pelo terminal:nano ./azion/webdev.env
Visite o site do editor de textos nano para maiores informações e acesse a sua documentação.
O editor de textos
nano
será aberto no seu terminal com duas linhas relativas às chaves do seu bucket Amazon S3:AWS_ACCESS_KEY_ID= AWS_SECRET_ACCESS_KEY=
Nota: não se preocupe se você nunca utilizou o editor de textos
nano
. Você precisará apenas de comandos simples para fazer as alterações necessárias, salvá-las, e retornar ao terminal. -
Utilizando as teclas de direção do teclado, digite nas linhas “AWS_ACCESS_KEY_ID=” e “AWS_SECRET_ACCESS_KEY=” as respectivas chaves do seu bucket Amazon S3 da sua conta na AWS.
-
Após inserir as chaves, pressione a teclas
CTRL + o
e, em seguida,ENTER
ouRETURN
para salvar. -
Pressione as teclas
CTRL + x
para sair do editor de textosnano
e retornar ao terminal.Cuidado: certifique-se de não versionar suas credenciais diretamente nos seus arquivos por razões de segurança. Você pode usar o recurso
VCS SECRETS
do seu versionador de software para essa finalidade. -
Abra o arquivo
kv.json
para edição com o comando:nano ./azion/kv.json
A resposta do comando será um arquivo JSON com conteúdo semelhante ao apresentado a seguir:
{ "kv": { "bucket": "azion-flareact", "region": "us-east-1", "path": "__static_content" }
Visite o site do formato JSON para maiores informações.
-
Edite o arquivo alterando as chaves
bucket
,region
, epath
de acordo com as configurações do seu bucket Amazon S3. -
Salve o arquivo pressionando
CTRL + o
eENTER
ouRETURN
. -
Retorne ao terminal pressionado as teclas
CTRL + x
. -
Certifique-se de ter instalado todas as dependências locais do projeto com os comandos
npm install
ouyarn install
. -
Execute o seguinte comando:
azioncli edge_applications build
A CLI constrói a sua aplicação.
4. Publicar uma aplicação Flareact na plataforma da Azion
Depois de construir a sua aplicação web usando o framework Flareact, o próximo passo é publicá-la no RTM.
Para publicar a sua aplicação web, siga os seguintes passos:
-
Execute o comando:
azioncli edge_applications publish
Resposta da CLI:
... ... ... Your Domain name: <edge_application_id>.map.azionedge.net
Nota: a publicação de uma aplicação web pelo RTM ou pela CLI não é um processo instantâneo. Existe um tempo de propagação e configuração da aplicação nas edge locations da Azion. Pode ser necessário aguardar alguns minutos para a ativação da URL e a efetiva visualização da aplicação no navegador.
-
Acesse seu aplicativo web através da URL
<edge_application_id>.map.azionedge.net
Pronto! Sua aplicação web utilizando o framework Flareact já está disponível na plataforma da Azion!
Para verificar o endereço do domínio recém-criado, acesse o menu Products Menu > Domains no site da Azion. Outras configurações criadas pela publicação também podem ser visualizadas no Real-Time Manager.
Trademarks
- React é uma marca registrada da Meta Platforms, Inc. nos EUA.
- Amazon Web Services, AWS, e Amazon Simple Storage Service (Amazon S3) são marcas comerciais da Amazon.com, Inc. ou de suas afiliadas.
- Node.js é uma marca registrada da OpenJS Foundation® nos EUA e/ou em outros países.
Todos os direitos reservados.
Não encontrou o que procurava? Abra um ticket.