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® ¹ 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:

Pré-requisitos

Instalação do Node.js

Configurar uma aplicação Flareact na Azion

Publicar uma aplicação Flareact na Azion

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 S3² na Amazon Web Services² (AWS) com permissões de gravação e leitura.
Uma conta na plataforma da Azion com Edge Functions habilitadas.
O Node.js³ 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 webapp 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 comando ls, que apresentará o resultado abaixo:
```
 azion	 package.json	...
```
A resposta da CLI ao comando webapp 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 ou RETURN para salvar.
Pressione as teclas CTRL + x para sair do editor de textos nano 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, e path de acordo com as configurações do seu bucket Amazon S3.
Salve o arquivo pressionando CTRL + o e ENTER ou RETURN.
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 ou yarn install.
Execute o seguinte comando:

azioncli webapp 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 webapp 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.

Não encontrou o que procurava? Abra um ticket.