Como usar um bucket do Edge Storage como origem de uma edge application estática

Edge Storage da Azion permite que você crie buckets e os use como fonte de conteúdo através de Origins. Este guia abrange como criar e servir uma aplicação estática recuperada de um bucket do Edge Storage usando a API da Azion e o Azion Console.

Consulte os guias Como criar e modificar um bucket do Edge Storage para operações de bucket e Como fazer o upload e download de objetos de um bucket do Edge Storage para operações de objetos.


Criar um bucket e fazer upload de arquivos

Seção intitulada Criar um bucket e fazer upload de arquivos

Esta seção descreve como você pode fazer upload de objetos para um bucket e manter a estrutura do projeto usando a API da Azion. Neste cenário, você criará uma aplicação estática usando dois arquivos, distribuídos em pastas da seguinte forma:

src/index.html
src/styles/style.css
  1. Crie o seguinte arquivo index.html dentro de um diretório local src:
src/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styles/style.css">
</head>
<body>
<h1>Hello world!</h1>
<p>I am an object from a bucket.</p>
</body>
</html>
  1. Agora crie o arquivo style.css, que é referenciado no HTML, sob a pasta styles no mesmo diretório:
src/styles/style.css
body {
background-color: black;
}
h1, p {
color: #F3652B;
}
  1. Execute a seguinte requisição POST no seu terminal, substituindo [TOKEN VALUE] pelo seu personal token e name pelo nome desejado do bucket para criar um bucket de leitura e escrita:
Terminal window
curl --location 'https://api.azion.com/v4/storage/buckets' \
--header 'Accept: application/json; version=3' \
--header 'Content-Type: application/json' \
--header 'Authorization: Token [TOKEN VALUE]' \
--data '{
"name": "app-origin",
"edge_access": "read_write"
}'
  1. Você deverá receber a seguinte resposta:
{
"state": "executed",
"data": {
"name": "app-origin",
"edge_access": "read_write"
}
}
  1. Execute as seguintes requisições POST no seu terminal para cada arquivo, substituindo <nome_do_bucket> pelo nome do bucket que você acabou de criar:

    • Para o arquivo index.html, execute o comando a seguir utilizando src/index.html como a object key e adicionando o path do objeto como data:
    curl --location 'https://api.azion.com/v4/storage/buckets/<bucket_name>/objects/src/index.html' \
    --header 'Accept: application/json; version=3' \
    --header 'Content-Type: text/html' \
    --header 'Authorization: Token [TOKEN VALUE]' \
    --data '@./src/index.html'
    
    • Para o arquivo styles.css, execute o seguinte comando utilizando src/styles/style.css como a object key e adicionando o path do objeto como data:
    curl --location 'https://api.azion.com/v4/storage/buckets/<bucket_name>/objects/src/styles/style.css' \
    --header 'Accept: application/json; version=3' \
    --header 'Content-Type: text/css' \
    --header 'Authorization: Token [TOKEN VALUE]' \
    --data '@./src/styles/style.css'
    
  2. Você deverá receber as seguintes respostas para os arquivos:

{
"state": "executed",
"data": {
"object_key": "src/index.html"
}
}
{
"state": "executed",
"data": {
"object_key": "src/styles/style.css"
}
}

Criando uma edge application e definindo a origem tipo Edge Storage

Seção intitulada Criando uma edge application e definindo a origem tipo Edge Storage

Agora que seu bucket está populado com arquivos, você pode criar uma nova edge application e um domínio para definir o bucket como a origem do conteúdo e servir esses objetos.

Para facilitar esse processo, use o template Edge Application Proxy:

  1. Acesse o Azion Console.
  2. Na página inicial, selecione a opção Start with a template.
  3. Encontre o card do Edge Application Proxy e selecione-o.
  4. Clique na aba Settings para abrir o formulário de configuração.
  5. Dê à sua application um nome fácil de lembrar.
  6. Em Origin Address, digite httpbin.org.
    • Esta origem é provisória e será substituída mais tarde por uma origem de Edge Storage.
  7. Em Route to bypass, digite / para especificar o caminho raiz da aplicação.
  8. Aguarde o processo de deploy terminar.
  9. Copie o domínio da application, no formato http://xxxxxxxxxx.map.azionedge.net/.

Agora você precisa configurar uma nova origem tipo Edge Storage e determinar que sua aplicação deve recuperar o conteúdo do bucket e prefixo que você criou. Para fazer isso:

  1. Acesse o Azion Console > Edge Application.
  2. Clique na proxy edge application que você criou nos passos anteriores.
  3. Navegue até a aba Origins.
  4. Clique no botão Add Origin.
  5. Dê à sua origem um nome fácil de lembrar.
  6. Em Origin Type, selecione Edge Storage.
  7. Em Bucket Name, adicione o nome do bucket que você criou nos passos anteriores.
  8. Em Prefix, adicione /src, que é o prefixo que você adicionou às object keys enviadas anteriormente.
  9. Clique no botão Save.

Para ativar a origem na sua edge application:

  1. Navegue até a aba Rules Engine.
  2. Selecione a Default Rule.
  3. Em Behaviors, no comportamento Set Origin, substitua a Default Rule pela origem que você criou para o seu bucket.
  4. Clique no botão Save.
  5. Aguarde algum tempo para que as mudanças se propaguem pelo edge.

Uma vez feitas as mudanças, acesse http://xxxxxxxxxx.map.azionedge.net/index.html para visualizar o arquivo HTML que você fez upload com o estilo CSS aplicado.

  1. Execute a seguinte requisição POST no seu terminal, substituindo [TOKEN VALUE] pelo seu personal token:
Terminal window
curl --location 'https://api.azionapi.net/edge_applications' \
--header 'Accept: application/json; version=3' \
--header 'Authorization: Token [TOKEN VALUE]' \
--header 'Content-Type: application/json' \
--data '{
"name": "edge storage app",
"delivery_protocol": "http",
"http3": false,
"origin_type": "single_origin",
"address": "httpbin.org",
"origin_protocol_policy": "preserve",
"host_header": "${host}",
"browser_cache_settings": "honor",
"browser_cache_settings_maximum_ttl": 0,
"cdn_cache_settings": "overwrite",
"cdn_cache_settings_maximum_ttl": 0
}'
  1. Você deve receber uma resposta semelhante a:
{
"results": {
"id": <edge_application_id>,
"name": "edge storage app",
"delivery_protocol": "http"
...
},
"schema_version": 3
}
  1. Copie o valor do campo edge_application_id e cole-o em um editor de texto para salvá-lo para requisições seguintes.
  2. Execute a seguinte requisição POST no seu terminal, substituindo [TOKEN VALUE] pelo seu personal token e <edge_application_id> pelo ID da edge application que você criou:
Terminal window
curl --location 'https://api.azionapi.net/domains' \
--header 'Accept: application/json; version=3' \
--header 'Authorization: Token [TOKEN VALUE]' \
--header 'Content-Type: application/json' \
--data '{
"name": "edge storage domain"
"cname_access_only": false,
"digital_certificate_id": null,
"edge_application_id": <edge_application_id>
}'
  1. Você deve receber uma resposta semelhante a:
{
"results": {
"id": <domain_id>,
"name": "edge storage domain",
...
"edge_application_id": <edge_application_id>,
"is_active": true,
"domain_name": "xxxxxxxxxx.map.azionedge.net",
...
},
"schema_version": 3
}
  1. Copie a URL no valor domain_name e cole-a em um editor de texto para acessar mais tarde.
  2. Execute a seguinte requisição POST para criar uma origem de tipo Edge Storage para a application, substituindo bucket pelo nome do bucket que você criou:
Terminal window
curl --location 'https://api.azionapi.net/edge_applications/<edge_application_id>/origins' \
--header 'Accept: application/json; version=3' \
--header 'Authorization: Token [TOKEN VALUE]' \
--header 'Content-Type: application/json' \
--data '{
"name": "edge storage origin",
"origin_type": "object_storage",
"bucket": "app-origin",
"prefix": "/src"
}'
  1. Você deve receber uma resposta semelhante a:
{
"results": {
"origin_id": <origin_id>,
"origin_key": "bdcd7003-ba53-4ed8-8ca0-05b1357cdafd",
"name": "New Edge Storage origin",
"origin_type": "object_storage",
...
"bucket": "new-bucket-rw",
"prefix": "/"
},
"schema_version": 3
}
  1. Copie o valor do campo origin_id e cole-o em um editor de texto para salvá-lo para requisições seguintes.
  2. Execute a seguinte requisição GET no seu terminal para recuperar o ID da default rule do Rules Engine da sua edge application, substituindo a variável <edge_application_id> pelo ID da edge application que você copiou anteriormente:
Terminal window
curl --location 'https://api.azionapi.net/edge_applications/<edge_application_id>/rules_engine/request/rules' \
--header 'Accept: application/json; version=3' \
--header 'Authorization: Token [TOKEN VALUE]'
  1. Você deve receber uma resposta semelhante a:
{
...
"results": [
{
"id": <rule_id>,
"name": "Default Rule",
"phase": "default",
"behaviors": [
{
"name": "set_origin",
"target": "<origin_id>"
},
{
"name": "set_cache_policy",
"target": "<cache_setting_id>"
}
],
...
"description": ""
}
]
}
  1. Copie o valor do campo rule_id e cole-o em um editor de texto para salvá-lo para requisições seguintes.
  2. Execute a seguinte requisição PATCH para modificar a regra padrão, substituindo <rule_id> pelo ID da regra que você recebeu no passo anterior, deixando o objeto set_cache_policy como recebido na resposta:
Terminal window
curl --location --request PATCH 'https://api.azionapi.net/edge_applications/<edge_application_id>/rules_engine/phase/rules/<rule_id>' \
--header 'Accept: application/json; version=3' \
--header 'Content-Type: application/json' \
--header 'Authorization: Token azion12d49b3ff51f32313f9c7f8b77a02bf0e69' \
--data '{
"behaviors": [
{
"name": "set_origin",
"target": "<origin_id>"
},
{
"name": "set_cache_policy",
"target": "<cache_setting_id>"
}
]
}'
  1. Aguarde algum tempo para que as mudanças se propaguem.

Uma vez feitas as mudanças, acesse o domínio que você criou, no formato http://xxxxxxxxxx.map.azionedge.net/index.html, para visualizar o arquivo HTML que você fez upload com o estilo CSS aplicado.


Contributors