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

Este guia descreve o processo de configuração de um bucket como origem de uma edge application usando a API da Azion, Azion CLI, e Azion Runtime.

Consulte a referência do Edge Storage

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 em 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, dentro de uma pasta styles no mesmo diretório:
src/styles/style.css
body {
background-color: black;
}
h1, p {
color: #F3652B;
}
  1. Execute a requisição POST a seguir no seu terminal, substituindo [TOKEN VALUE] pelo seu personal token e inserindo o nome desejado do bucket em name 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ê deve 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 <bucket_name> pelo nome do bucket que você acabou de criar:

    • Para o arquivo index.html, execute o seguinte comando usando src/index.html como a chave do objeto, e adicionando o caminho do objeto como dados:
    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 usando src/styles/style.css como a chave do objeto, e adicionando o caminho do objeto como dados:
    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ê deve receber as seguintes respostas para os arquivos:

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

Crie uma edge application e defina o tipo de origem como 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.

  1. Execute a seguinte requisição POST no seu terminal, substituindo [VALOR DO TOKEN] pelo seu personal token:
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": "override", "cdn_cache_settings_maximum_ttl": 0
}'
  1. Você deve receber uma mensagem semelhante a esta:
{ "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 posteriores.
  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:
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 esta:
{ "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 Edge Storage para a aplicação, substituindo [TOKEN VALUE] pelo seu personal token, <edge_application_id> pelo ID da edge application, e o valor de bucket pelo nome do bucket que você criou:
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 esta:
{ "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 posteriores.
  2. Execute a seguinte requisição GET no seu terminal para recuperar o ID da regra padrão do Rules Engine da sua edge application, substituindo a variável <edge_application_id> pelo ID da edge application que você copiou anteriormente:
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 esta:
{ ... "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 posteriores.
  2. Execute a seguinte requisição PATCH para modificar a regra padrão, substituindo <rule_id> pelo ID da regra que você recuperou no passo anterior, mantendo o objeto set_cache_policy igual ao recebido na resposta:
curl --location --request PATCH 'https://api.azionapi.net/edge_applications/<edge_application_id>/rules_engine/request/rules/<rule_id>' \
--header 'Accept: application/json; version=3' \
--header 'Content-Type: application/json' \
--header 'Authorization: Token [TOKEN VALUE]' \
--data '{ "behaviors": [ { "name": "set_origin", "target": "<origin_id>" }, { "name": "set_cache_policy", "target": "<cache_setting_id>" } ]
}'
  1. Espere algum tempo pela propagação das mudanças.

Uma vez que as alterações tenham sido feitas, acesse o domínio que você criou, no formato http://xxxxxxxxxx.map.azionedge.net/index.html, para ver o arquivo HTML que você carregou com o estilo CSS aplicado.

Aprenda como usar um bucket do Edge Storage como a origem de uma edge application estática. Assista ao vídeo abaixo:


Contribuidores