Use um bucket do Object Storage como origem

Aprenda a usar um bucket como a origem de uma application estática usando Object Storage e a tornar o conteúdo do bucket público.

Ver como Markdown

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 Connectors.

Se você não tem certeza de quais etapas se aplicam à sua conta, consulte este guia para determinar se sua conta já foi migrada.

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):
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:
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:
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/.

O link para a application permite que você a veja no navegador. No entanto, leva um certo tempo para propagar e configurar a aplicação 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 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 > Connectors.
  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.

Após criar sua aplicação com um bucket do Object Storage como origem, você pode gerenciar e configurar configurações, como respostas de erro e configurações de cache.