title	description	meta_tags	namespace	permalink
Como usar um bucket do Edge Storage como origem de uma edge application estática	Aprenda como usar um bucket como origem de uma edge application para servir arquivos estáticos.	object storage, storage, cloud, s3, bucket, objetos, arquivos, armazenamento, file storage, origin, origem, edge storage	documentation_guides_object_storage_origin	/documentacao/produtos/guias/usar-bucket-como-origem/

import Button from '~/components/Button.astro'

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.

:::note Você também pode usar o método async storage.get(key) da Runtime API para servir a aplicação usando uma Edge Function. :::

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

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 dentro de 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, sob a pasta styles no mesmo diretório:

body {
background-color: black;
}

h1, p {
    color: #F3652B;
}

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:

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

Você deverá receber a seguinte resposta:

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

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'

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

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.

Via Azion Console

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

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

:::note O link para sua edge application permite que você veja como ela fica no navegador. No entanto, leva um certo tempo para propagar e configurá-la nas edge locations da Azion. Pode ser necessário aguardar alguns minutos para que a URL seja ativada e para que a página da aplicação seja efetivamente exibida no navegador. :::

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:

Acesse o Azion Console > Edge Application.
Clique na proxy edge application que você criou nos passos anteriores.
Navegue até a aba Origins.
Clique no botão Add Origin.
Dê à sua origem um nome fácil de lembrar.
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 object keys enviadas anteriormente.
Clique no botão Save.

Para ativar a origem na sua edge application:

Navegue até a aba Rules Engine.
Selecione a Default Rule.
Em Behaviors, no comportamento Set Origin, substitua a Default Rule pela origem que você criou para o seu bucket.
Clique no botão Save.
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.

Via API

Execute a seguinte requisição POST no seu terminal, substituindo [TOKEN VALUE] 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": "overwrite",
    "cdn_cache_settings_maximum_ttl": 0
}'

Você deve receber uma resposta semelhante a:

{
    "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 seguintes.
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:

{
    "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 tipo Edge Storage para a application, substituindo 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:

{
  "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 seguintes.
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:

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:

{
    ...
    "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 seguintes.
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:

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

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.

import AuthorList from '~/components/AuthorList.astro'

Contributors

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

index.mdx

index.mdx

Criar um bucket e fazer upload de arquivos

Criando uma edge application e definindo a origem tipo Edge Storage

Via Azion Console

Via API

Files

index.mdx

Latest commit

History

index.mdx

File metadata and controls

Criar um bucket e fazer upload de arquivos

Criando uma edge application e definindo a origem tipo Edge Storage

Via Azion Console

Via API