ContatoSign in

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

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

Existem instruções separadas para API v3 usando configurações de Origin legado e API v4 usando o novo produto Connector.

Consulte a referência do Object 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;' \
--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;' \
    --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;' \
    --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 application e defina o tipo de origem como Object Storage

Agora que seu bucket está populado com arquivos, você pode criar uma nova 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 Applications Proxy:

  1. Acesse Azion Console.
  2. Na página inicial, selecione a opção + Create.
  3. Encontre o cartão Applications Proxy na seção de templates e selecione-o.
  4. Dê um nome fácil de lembrar para a sua aplicação.
  5. Em Route to bypass, digite / para especificar o caminho raiz da aplicação.
  6. Aguarde o término do processo de implantação.
  7. Copie o domínio da aplicação, no formato http://xxxxxxxxxx.map.azionedge.net/.

Agora você precisa configurar uma nova origem do tipo Object 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 > Connector.
  2. Clique no botão + Connector.
  3. Na seção General, dê ao seu conector um nome único e descritivo (por exemplo, My Object Storage Connector).
  4. Na seção Connector Type, selecione Object Storage.
  5. Na seção Connection Options:
    • Para Bucket, selecione o nome do bucket que você criou nos passos anteriores.
    • Para Prefix, digite /src (ou o prefixo que você usou ao fazer upload dos seus objetos).
  6. Defina o Status como Active.
  7. Clique no botão Save.

Para ativar o Connector na sua application:

  1. Acesse a aba Rules Engine.
  2. Edite a regra padrão ou adicione uma nova regra de requisição.
  3. Na seção Criteria, para aplicar o Connector para toda a sua aplicação, defina os criteria como If ${uri} starts with /.
  4. Na seção Behavior, selecione o comportamento Set Connector.
  5. Selecione o Connector que você deseja aplicar.
  6. Clique no botão Save.
  7. 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 Object Storage como a origem de uma application estática. Assista ao vídeo abaixo: