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

Crie o seguinte arquivo index.html em um diretório local src:

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

Agora crie o arquivo style.css, que é referenciado no HTML, dentro de uma pasta styles no mesmo diretório:

body {
background-color: black;
}

h1, p {
    color: #F3652B;
}

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 apenas (read-only bucket):

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_only"
}'

Você deve receber a seguinte resposta:

{
  "state": "executed",
  "data": {
    "name": "app-origin",
    "edge_access": "read_only"
  }
}

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'

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.

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
}'

Você deve receber uma mensagem semelhante a esta:

{
    "results": {
        "id": <edge_application_id>,
        "name": "edge storage app",
        "delivery_protocol": "http"
        ...
    },
    "schema_version": 3
}

Copie o valor do campo edge_application_id e cole-o em um editor de texto para salvá-lo para requisições posteriores.
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>
}'

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
}

Copie a URL no valor domain_name e cole-a em um editor de texto para acessar mais tarde.
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"
}'

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
}

Copie o valor do campo origin_id e cole-o em um editor de texto para salvá-lo para requisições posteriores.
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]'

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": ""
        }
    ]
}

Copie o valor do campo rule_id e cole-o em um editor de texto para salvá-lo para requisições posteriores.
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>"
        }
    ]
}'

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.

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

Acesse Azion Console.
- Se você ainda não tem uma conta, crie uma nova visitando a página de inscrição.
Na página inicial, selecione a opção + Create.
Encontre o cartão Edge Application Proxy na seção de templates e selecione-o.
Dê um nome fácil de lembrar para a sua aplicação.
Em Origin Address, digite httpbin.org.
- Este é um origem temporária que será substituída posteriormente por uma origem de Edge Storage.
Em Bypass Route, digite / para especificar o caminho raiz da aplicação.
Aguarde o término do processo de implantação.
Copie o domínio da aplicação, no formato http://xxxxxxxxxx.map.azionedge.net/.

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

Acesse o Azion Console > Edge Application.
Clique na aplicação de proxy que você criou nos passos anteriores.
Navegue até a guia Origins.
Clique no botão + Origin.
Dê um nome fácil de lembrar para a sua origem.
Em Origin Type, selecione Edge Storage.
Em Bucket Name, adicione o nome do bucket que você criou nos passos anteriores.
Em Prefix, adicione /src, que é o prefixo que você adicionou às chaves dos objetos carregados anteriormente.
Clique no botão Save.

Para ativar a origem na sua edge application:

Navegue até a guia Rules Engine.
Selecione Standard Rule.
Em Behaviors, no comportamento Set Origin, substitua a Standard Origin pela origem que você criou para o seu bucket.
Clique no botão Save.
Aguarde algum tempo para que as alterações se propaguem para o edge.

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

Requisitos

Para criar uma edge application com as configurações necessárias para usar um bucket como origem:

azion create edge-application --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

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