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

site

doc

blog

success stories

Flareact4azion: crie uma aplicação JAMStack no Azion Cells com framework Flareact

Edit on GitHub

O 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 projectos globais.

O 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 comparado a Containers e outros serviços; além de um cold start time de zero, que o torna ideal para uso em IA, como reconhecimento facial e de objetos.

A Azion agora oferece suporte ao JAMStack usando o framework Flareact por meio do Flareact4azion, uma ferramenta de linha de comando que constrói projetos Flareact direcionados às Edge Functions da Azion. Ele permite que você renderize suas aplicações 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.

Instalação

A partir da fonte, clonando o repositório git

Certifique-se de baixar a versão nvm 14.18 do Node.js.

install nvm
nvm install v14.18 
nvm use v14.18

Utilização

Clone o template flareact4azion init ./site git@github.com:aziontech/flareact4azion-template.git to create the library.

Conteúdo do template

| |- azion.json |- index.js |- package.json |- pages |- index.js

O pacote de template contém três arquivos: o azion.json, necessário para definir as credenciais, o index.js, que contém os ativos que ele precisa para rodar, e o package.json, que possui diversos dados pertinentes ao projeto. Há também a pasta pages, contendo um arquivo index.js, útil para testar os componentes do React.

azion.json

{
  "kv": {
    "bucket": "azion-cells-dev",
    "region": "us-east-1",
    "path": "__static_content"
  },
  "azion": {
    "function_name": "FlareactTemplate",
  },
  "args": {
  }
}

index.js

import { handleEvent } from "flareact";

/**
 * The DEBUG flag will do two things that help during development:
 * 1. we will skip caching on the edge, which makes it easier to
 *    debug.
 * 2. we will return an error message on exception in your Response rather
 *    than the default 404.html page.
 */
const DEBUG = false;

addEventListener("fetch", (event) => {
  try {
    event.respondWith(
      handleEvent(event, require.context("./pages/", true, /\.(js|jsx|ts|tsx)$/), DEBUG)
    );
  } catch (e) {
    if (DEBUG) {
      return event.respondWith(
        new Response(e.message || e.toString(), {
          status: 500,
        })
      );
    }
    event.respondWith(new Response("Internal Error", { status: 500 }));
  }
});

package.json

{
  "name": "flareact-project",
  "version": "1.0.0",
  "license": "MIT",
  "description": "A template for kickstarting a Flareact project",
  "main": "index.js",
  "private": true,
  "scripts": {
    "build": "flareact4azion build",
    "deploy": "flareact4azion publish"
  },
  "dependencies": {
    "flareact": "^1.2.1",
    "react": "^17.0.0",
    "react-dom": "^17.0.0"
  }
}

Pages folder - index.js

export default function Index() {
  return (
    <h1>
      You're running React on the Edge!
    </h1>
  );
}

Criação

A integração da Azion foi criada usando o S3 da AWS. Portanto, você deve ter uma conta na Amazon Web Services para continuar. Para compilar as informações, você precisará de um bucket no o S3 da AWS , sua access key (chave de acesso) e sua secret access key (senha secreta de acesso).

Comece abrindo o arquivo azion.json, definindo as credenciais desse arquivo dentro do projeto ou definindo as variáveis de ambiente AWS_ACCESS_KEY_ID e AWS_SECRET_ACCESS_KEY. A primeira variável especifica uma chave de acesso da AWS associada a um usuário ou função do IAM. A segunda chave é essencialmente a “senha” da chave de acesso.

As credenciais de acesso ao bucket serão armazenadas no código enviado à Azion, e a Edge Function as utilizará para recuperar as páginas necessárias armazenadas durante a etapa de publicação. Da mesma forma, você precisará de credenciais para implantar seu projeto na Azion, podendo defini-las no arquivo azion.json ou definir as variáveis de ambiente AZION_ID e AZION_SECRET. As credenciais da Azion não são armazenadas no código construído.

Passos para a criação

cd ./site
npm install
flareact4azion build
cat > ./azion.json << EOF 
{
 "kv": {
  "accessKeyId": "<AWS_ACCESS_KEY_ID>", 
  "secretAccessKey": "<AWS_SECRET_ACCESS_KEY>", 
  "bucket":      "my-bucket-name",
  "region": "my-region",
  "path": "__static_content"
},
 "azion": {
  "id": "<AZION_ID>",
  "secret": "<AZION_SECRET>", 
  "function_name": "my-function-name"
  } 
}
EOF

Publicação

Após a instalação, execute o seguinte comando: flareact4azion publish.

Utilização da função criada no Edge Application

Sua função recém criada agora irá interegir com uma edge application. Após construir e publicar seu código na Azion, você deve fazer login no Real-Time Manager da Azion e criar uma Edge Application que utilize sua Edge Function publicada recentemente. As compilações subsequentes seguidas pela publicação correspondente atualizarão automaticamente a sua edge application.


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