How to use an Edge Storage bucket as the origin of a static edge application

Azion Edge Storage allows you to create buckets and use them as a source of content through Origins. This guide covers how to create and serve a static application retrieved from an Edge Storage bucket using the Azion API and Azion Console.

go to Edge Storage reference

See the guides on How to create and modify an Edge Storage bucket for bucket operations and How to upload and download objects from an Edge Storage bucket for object operations.

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

Create the following index.html file inside of a local src directory:

<!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>

Now create the style.css file, which is referenced in the HTML, under the styles folder in the same directory:

body {
background-color: black;
}

h1, p {
    color: #F3652B;
}

Run the following POST request in your terminal, replacing [TOKEN VALUE] with your personal token and name with the desired bucket name to create a read-write bucket:

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

You should receive the following response:

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

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; version=3' \
--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; version=3' \
--header 'Content-Type: text/css' \
--header 'Authorization: Token [TOKEN VALUE]' \
--data '@./src/styles/style.css'

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 edge application and set origin type to Edge Storage

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

Via Azion Console

To facilitate this process, use the Edge Application Proxy template:

Access Azion Console.
- If you don’t have an account yet, create a new one by visiting the sign-up page.
On the homepage, select the Start with a template option.
Find the Edge Application Proxy card and select it.
Click the Settings tab to open the configuration form.
Give your application an easy-to-remember name.
In Origin Address, type httpbin.org.
- This is a temporary origin that will later be replaced with an Edge Storage origin.
In Route to bypass, type / to specify the root path of the application.
Wait for the deployment process to finish.
Copy the domain of the application, in the format http://xxxxxxxxxx.map.azionedge.net/.

Now you need to configure a new Edge Storage origin and determine that your application should retrieve content from the bucket and prefix you created. To do so:

Access Azion Console > Edge Application.
Click the proxy application you created in the previous steps.
Navigate to the Origins tab.
Click the Add Origin button.
Give your origin an easy-to-remember name.
In Origin Type, select Edge Storage.
In Bucket Name, add the name of the bucket you created in the previous steps.
In Prefix, add /src, which is the prefix you added to the object keys uploaded previously.
Click the Save button.

To activate the origin in your edge application:

Navigate to the Rules Engine tab.
Select the Default Rule.
Under Behaviors, in the Set Origin behavior, replace the Default Origin with the origin you created for your bucket.
Click the Save button.
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.

Via API

Run the following POST request in your terminal, replacing [TOKEN VALUE] with your 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
}'

You should receive a response similar to:

{
    "results": {
        "id": <edge_application_id>,
        "name": "edge storage app",
        "delivery_protocol": "http"
        ...
    },
    "schema_version": 3
}

Copy the value from the edge_application_id field and paste it in a text editing app to save it for later requests.
Run the following POST request in your terminal, replacing [TOKEN VALUE] with your personal token and <edge_application_id> with the ID of the edge application you created:

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

You should receive a response similar to:

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

Copy the URL in the domain_name value and paste it in a text editing app to access later.
Run the following POST request to create an edge storage origin for the application, replacing bucket with the name of the bucket you created:

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

You should receive a response similar to:

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

Copy the value from the origin_id field and paste it in a text editing app to save it for later requests.
Run the following GET request in your terminal to retrieve the ID of the default rule of your edge application’s Rules Engine, replacing <edge_application_id> variable with the edge application ID you copied previously:

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

You should receive a response similar to:

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

Copy the value from the rule_id field and paste it in a text editing app to save it for later requests.
Run the following PATCH request to modify the default rule, replacing <rule_id> with the ID of the rule you retrieved in the previous step, leaving the set_cache_policy object the same as received in the response:

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

Wait some time for the changes to propagate.

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

Contributors