ContatoSign in

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 apenas (read-only bucket):
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_only"
}'
  1. Você deve receber a seguinte resposta:
{
  "state": "executed",
  "data": {
    "name": "app-origin",
    "edge_access": "read_only"
  }
}

  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:
Terminal window
    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:
Terminal window
    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'
  1. 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.

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

  1. Acesse Azion Console.
  2. Na página inicial, selecione a opção + Create.
  3. Encontre o cartão Edge Application Proxy na seção de templates e selecione-o.
  4. Dê um nome fácil de lembrar para a sua aplicação.
  5. Em Origin Address, digite httpbin.org.
    • Este é um origem temporária que será substituída posteriormente por uma origem de Edge Storage.
  6. Em Bypass Route, digite / para especificar o caminho raiz da aplicação.
  7. Aguarde o término do processo de implantação.
  8. 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:

  1. Acesse o Azion Console > Edge Application.
  2. Clique na aplicação de proxy que você criou nos passos anteriores.
  3. Navegue até a guia Origins.
  4. Clique no botão + Origin.
  5. Dê um nome fácil de lembrar para a sua origem.
  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 chaves dos objetos carregados anteriormente.
  9. Clique no botão Save.

Para ativar a origem na sua edge application:

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

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