Use an Object Storage Bucket as Origin

Learn how to use a bucket as the origin of a static applications using Object Storage and make the bucket content public.

View as Markdown

This guide walks you through setting a bucket as origin of an applications using the Azion API, Azion CLI, and Azion Runtime.

go to Object Storage reference

There are separate instructions for API v3 using legacy Origin settings and API v4 using the new Connector product.

In this guide, there are separate instructions for API v3 and API v4. If you’re not sure which steps apply to your account, see the Verify Your Account Migration guide to determine if your account has already been migrated.

Create a bucket and upload files

This section describes how you can upload objects to a bucket and maintain project structure using the Azion API. In this scenario, you’ll create a static application using two files, distributed into folders as follows:

src/index.html
src/styles/style.css
  1. Create the following index.html file inside of a local src directory:
<!-- 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. Now create the style.css file, which is referenced in the HTML, under the styles folder in the same directory:
/* src/styles/style.css */
body {
background-color: black;
}
h1, p {
color: #F3652B;
}
  1. Run the following POST request in your terminal, replacing [TOKEN VALUE] with your personal token and writing the desired bucket name in name to create a 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. You should receive the following response:
{
"state": "executed",
"data": {
"name": "app-origin",
"edge_access": "read_only"
}
}

  1. Run the following POST requests in your terminal for each file, replacing <bucket_name> with the name of the bucket you just created:

    • For the index.html file, run the following command using src/index.html as the object key, and adding the object path as data:
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'
  • For the styles.css file, run the following command using src/styles/style.css as the object key, and adding the object path as data:
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. You should receive the following responses for the files:
{
"state": "executed",
"data": {
"object_key": "src/index.html"
}
}
{
"state": "executed",
"data": {
"object_key": "src/styles/style.css"
}
}

Create an applications and set origin type to Object Storage

Now that your bucket is populated with files, you can create a new applications and a domain to set the bucket as the origin of the content and serve these objects.

To facilitate this process, use the Applications Proxy template:

  1. Access Azion Console.
  2. On the homepage, select the + Create option.
  3. Find the Applications Proxy card in the templates section and select it.
  4. Give your application an easy-to-remember name.
  5. In Route to bypass, type / to specify the root path of the application.
  6. Wait for the deployment process to finish.
  7. Copy the domain of the application, in the format http://xxxxxxxxxx.map.azionedge.net/.

The link to the applications allows you to see it on the browser. However, it takes a certain time to propagate and configure the application in Azion’s edge locations. It may be necessary to wait a few minutes for the URL to be activated and for the application page to be effectively displayed in the browser.

Now you need to configure a new Connector to link your application to your Object Storage bucket. To do so:

  1. Access Azion Console > Connectors.
  2. Click the + Connector button.
  3. In the General section, give your connector a unique and descriptive name (e.g., My Object Storage Connector).
  4. In the Connector Type section, select Object Storage.
  5. In the Connection Options section:
    • For Bucket, select the name of the bucket you created in the previous steps. The bucket selector lists your existing buckets and provides a search field.
    • For Prefix, enter /src (or the prefix you used when uploading your objects).
  6. Set the Status to Active.
  7. Click the Save button.

To activate the Connector in your applications:

  1. Access the Rules Engine tab.
  2. Edit the default rule or add a new request rule.
  3. In the Criteria section, to apply the Connector for your whole application, set the criteria to If ${uri} starts with /.
  4. In the Behavior section, select the Set Connector behavior.
  5. Select the Connector you want to apply.
  6. Click the Save button.
  7. Wait some time for the changes to propagate to the edge.

Once the changes have been made, access http://xxxxxxxxxx.map.azionedge.net/index.html to see the HTML file you uploaded with the applied CSS style.

After creating your application with an Object Storage bucket as the origin, you can manage and configure settings, such as cache settings.