1 of 20
2 of 20
3 of 20
4 of 20
5 of 20
6 of 20
7 of 20
8 of 20
9 of 20
10 of 20
11 of 20
12 of 20
13 of 20
14 of 20
15 of 20
16 of 20
17 of 20
18 of 20
19 of 20
20 of 20

doc

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
  2. Instalação do Node.js
  3. Configurar uma aplicação Flareact na Azion
  4. 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 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:

  1. Inicie uma aplicação baseada num template ou clone o seu próprio projeto:

    git clone https://github.com/flareact/flareact-template

  2. 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.

  3. 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.

  4. 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 comando ls, 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.

  5. Crie um projeto utilizando o framework Flareact dentro da pasta do projeto criado no passo 1.

  6. 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.

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

  8. Após inserir as chaves, pressione a teclas CTRL + o e, em seguida, ENTER ou RETURN para salvar.

  9. 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.

  10. 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.

  11. Edite o arquivo alterando as chaves bucket, region, e path de acordo com as configurações do seu bucket Amazon S3.

  12. Salve o arquivo pressionando CTRL + o e ENTER ou RETURN.

  13. Retorne ao terminal pressionado as teclas CTRL + x.

  14. Certifique-se de ter instalado todas as dependências locais do projeto com os comandos npm install ou yarn install.

  15. 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:

  1. 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.

  2. 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

  1. React é uma marca registrada da Meta Platforms, Inc. nos EUA.
  2. Amazon Web Services, AWS, e Amazon Simple Storage Service (Amazon S3) são marcas comerciais da Amazon.com, Inc. ou de suas afiliadas.
  3. 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.