Edge Security Acceleration:Accelerate website rendering with Functions and Pages

2.1 Prepare environment and resources

1. Log on to the OSS console, go to the Buckets page, and click Create Bucket. Enter a Bucket Name, keep other defaults, and click Create.

   In this example, Bucket Name is set to website-resources-shopping and Region is set to China (Hangzhou).

2. Select the bucket you created. On the Files page, decompress the product image set from Resource files and upload the images to the root directory of the bucket.

   Note

   Store image resources in the root directory of the OSS bucket.

2.2 Configure the accelerated domain for static resources

1. In the ESA console, select Websites, and in the Website column, click the target site.

2. In the left navigation bar, click DNS > Records > Add Record, and add a DNS record based on the Record Type.

   Parameter	Example value
   Record Type	CNAME
   Hostname	images
   Proxy Status	Enabled
   Record Value	OSS
   Access Type	Private Access (STS Temporary Token)
   Authorization	Authorized by default for same-account access.
   OSS Bucket	website-resources-shopping.*******.aliyuncs.com
   Origin Host	Follow Origin Domain Name

3. Select Image/Video for the record type, and click OK.

4. After the DNS record is created, copy the Hostname and Record Value from the CNAME configuration wizard page.

   When you add the record in the Alibaba Cloud DNS console, set Type to CNAME - Point the domain name to another domain name, enter the copied values in Host and Value, select Default for Request source, and keep TTL at 10 (recommended) minutes.

5. Go to the Alibaba Cloud DNS console. In the navigation pane on the left, choose Public DNS > Authoritative Domain Names. On the Authoritative Domain Names tab, find the domain name of the target site and click DNS Settings.

6. In DNS Settings, click Add Record. Add a record with these settings and click OK.

   Parameter	Example value
   Record type	CNAME
   Host record	images
   Record value	images.example.com.**.*******.com
   TTL	10 minutes

7. Return to the CNAME configuration wizard page from Step 4. In step 3. Verify the CNAME record, click Query. If the CNAME record has taken effect, the CNAME configuration is complete.

   Note

   The CNAME record may take a few minutes to take effect.

8. Enter http://<your_accelerated_domain_name>/1.png in your browser to verify that the image is displayed.

   Note

   If a 404 error occurs, adjust the URL to match the image directory path. For example: http://<your_accelerated_domain_name>/images/1.png.

3.1 Prepare environment

1. Log on to the ECS console.

2. In the navigation pane on the left, choose Instances & Images > Instances. In the top menu bar, select the China (Hangzhou) region.

3. On the Instances page, click Create Instance. Then, create an ECS instance on the purchase page.

3.2 Deploy dynamic resources

1. Log on to the ECS console.

2. In the navigation pane on the left, choose Instances & Images > Instances. In the top menu bar, select the China (Hangzhou) region.

3. On the Instances page, find the target instance and click the instance ID to go to the instance details page.

4. Click Remote Connection, select Connect via Workbench, and then click Log On Now. Enter the logon password to complete the logon.

5. Download the website code and product data from Resource files, decompress the package, and upload the two files to the ECS server.

6. In the ItemInfo.json file, replace images.example.com with the accelerated domain name configured in Section 2.2.

   Choose File > Open New File Management > Upload File to upload both files to the server.

7. In the Workbench console, run the following commands to start an HTTP server.

   cd /  # Go to the system root directory.
   nohup python -m http.server 80 &  # Start an HTTP service on port 80 in the background.

8. In your browser, enter http://<your_public_ip>/ItemsInfo.json to verify that dynamic product data is returned.

3.3 Configure the accelerated domain for dynamic resources

1. In the ESA console, choose Websites. In the Actions column of the target site, click the icon and select DNS Records.

2. In the navigation pane on the left, choose DNS > Records.

3. On the record list page, click Add Record, configure the parameters, and then click Next.

   Parameter	Example value
   Record type	A/AAAA
   Host record	www
   Proxy status	Enabled
   Record value/origin	10.0.x.x (The public IP address of the target ECS instance)
   TTL	Auto

4. Select API for the record type and click OK.

5. After the DNS record is created, copy the Hostname and Record Value from the CNAME configuration wizard page.

   Note

   Keep this page open. You will return to verify the CNAME record in Step 8.

6. Go to the Alibaba Cloud DNS console. In the navigation pane on the left, choose Public DNS > Authoritative Domain Names. On the Authoritative Domain Names tab, find the domain name of the target site and click DNS Settings.

7. In DNS Settings, click Add Record. Add a record with these settings and click OK.

   Parameter	Example value
   Record type	CNAME
   Host record	www
   Record value	www.example.com.**.*******.com (The record value from the CNAME configuration wizard)
   TTL	10 minutes

8. Return to the CNAME configuration wizard page from Step 5. In step 3. Verify the CNAME record, click Query. If the CNAME record has taken effect, the CNAME configuration is complete.

   Note

   The CNAME record may take a few minutes to take effect.

4.1 Create Functions and Pages

1. Log on to the ESA console. In the navigation pane on the left, choose Edge Computing > Functions and Pages.

2. Click Create. For the creation method, select Function Templates. Select the Hello World template and click Next.

3. Enter a Routine Name, add a description as needed, and then click Submit.

4. Add a domain name for Functions and Pages.

   1. Log on to the ESA console. In the navigation pane on the left, choose Edge Computing > Functions and Pages.

   2. On the Functions and Pages list page, click the target function.

   3. On the function details page, switch to the Domain Name tab and click Add Domain Name. Assign the domain name shopping.example.com to the edge function and click OK.

   4. In the domain binding area, find the edge function domain name you just created. In the Actions column, click View DNS Records. On the DNS record management page, copy the CNAME value for the edge function domain name.

   5. Log on to the Alibaba Cloud DNS console. In the navigation pane on the left, choose Public DNS > Authoritative Domain Names. On the Authoritative Domain Names tab, find the domain name of the target site and click DNS Settings.

   6. In DNS Settings, click Add Record. Add a record with these settings and click OK.

      Parameter	Description	Example value
      Record type	Select the type of the DNS record.	CNAME
      Host record	Enter the host record based on the domain prefix.	shopping
      Record value	Enter the CNAME value of the edge function domain.	shopping.example.com.**.*******.com
      TTL	The DNS update cycle. Keep the default value.	10 minutes

   7. Refresh the DNS record page and check whether the CNAME Status of the edge function domain name changes from To be configured to Configured.

      Note

      The CNAME record may take a few minutes to take effect.

4.2 Configure an edge certificate

ESA encrypts client-to-POP requests with SSL/TLS. For this practice, apply for a free certificate. Configure an edge certificate.

1. In the ESA console, click Websites in the navigation pane on the left, and then click the target site.

2. On the management page of the target site, choose SSL/TLS > Edge Certificates from the navigation pane on the left.

3. In the Edge Certificates section, find SSL/TLS and click the switch to enable it.

4. In the Edge Certificates section, find Certificate Management and click Apply for Free Certificate. Configure the parameters and click OK.

   Parameter	Description	Example value
   Certificate authority	Use the default value.	Let's Encrypt
   Certificate domain names	Enter the static, dynamic, and edge function domain names configured in previous steps.	images.example.com www.example.com shopping.example.com

5. Certificate issuance takes 5 to 10 minutes. The certificate is then automatically deployed to ESA.

4.3 Configure origin protocol and port

ESA uses HTTPS for origin fetch by default. Because the origin in this example does not support HTTPS, configure ESA to use HTTP instead.

1. In the ESA console, click Websites in the navigation pane on the left, and then click the target site.

2. On the management page of the target site, choose Edge Certificates in the navigation pane on the left.

3. In the Origin Certificates section, find Origin Protocol and Port and click Configure. Configure the parameters and click OK.

   Parameter	Description	Example value
   Origin protocol	Select HTTP because the origin does not support HTTPS.	HTTP
   HTTP port	Keep the default value of 80.	80

4.4 Test and publish the edge function

1. Log on to the ESA console, and in the navigation pane on the left, choose Edge Computing > Functions and Pages.

2. On the Functions and Pages list page, click the target function.

3. On the function details page, switch to the Code tab. Replace the urlPrefix variable with your origin domain name www.example.com, then click Save.

   async function handleRequest(request) {
       const urlPrefix = 'www.example.com';
       // The request URL of the HTML file.
       const staticDataUrl = 'http://' + urlPrefix + '/index.html';
       // The request URL of the dynamic data.
       const dynamicDataUrl = 'http://' + urlPrefix + '/ItemsInfo.json';
   
       // Use the Cache API to query page skeleton data.
       const htmlCache = await cache.get(staticDataUrl);
       let html = '';
       if (htmlCache === undefined) {
           const htmlResponse = await fetch(staticDataUrl);
           html = await htmlResponse.text();
           await cache.put(staticDataUrl, new Response(html, { headers: [["cache-control", "max-age=1000"]] }));
       } else {
           html = await htmlCache.text();
       }
   
       // Fetch product data from the origin server.
       const jsonResponse = await fetch(dynamicDataUrl);
       const json = await jsonResponse.json();
   
       // Encapsulate dynamic data into div blocks.
       let itemsHtml = '';
       for (const item of json.data) {
           const itemHtml = `
               <div class="bg-white overflow-hidden shadow rounded-lg">
                           <div class="p-4">
                               <img class="h-48 w-full object-cover" src="${item.image}" alt="Placeholder image of a product">
                               <h3 class="mt-2 text-gray-900 text-sm font-medium">${item.title}</h3>
                               <div class="mt-4">
                                   <span class="original-price">${item.originalPrice}</span>
                               </div>
                               <div class="mt">
                                   <span class="text-gray-900 font-semibold">${item.discountPrice}</span>
                               </div>
       
                           </div>
                       </div>`;
           itemsHtml += itemHtml;
       }
   
       // Replace #(itemsHtml) in the static HTML with dynamic data.
       const finalHtml = html.replace("#(itemsHtml)", itemsHtml);
   
       // Return the HTML page rendered at a POP to the browser.
       return new Response(finalHtml, {
           headers: {
               "content-type": "text/html;charset=UTF-8",
           },
       });
   }
   
   export default {
       async fetch(request) {
           return handleRequest(request);
       },
   };
   

4. Click Request in the upper-right corner to run a local test. Execution logs appear in the lower-left section.

5. After testing succeeds, click One-click Release to deploy the code to production.

5.1 Verify the solution

1. After publishing, verify the result:

   • Open a browser and go to the edge function domain (for example, https://<your_edge_function_domain_name>).

   • Verify that the page loads and product data renders dynamically.

   • Use browser developer tools to confirm that static resources are cached and dynamic data is accelerated by POPs.

If the verification succeeds, the page shows the women's clothing channel of the shopping mall: a search box at the top, category navigation tabs such as Dresses, T-shirts, Jeans, Coats, and Sportswear, and a grid of product cards. Each card shows the product image, the product name, the original price with a strikethrough, and the promotional price in red. This indicates that the product data was rendered dynamically at the edge POP.

In the DevTools Network panel, select a static resource request such as an image and check the Response Headers. The following fields confirm a CDN cache hit:

• X-Site-Cache-Status: the value is HIT, which indicates that the resource was served from the edge POP cache.

• X-Swift-Cachetime: the value is 3600, which indicates that the cache is valid for 3600 seconds.

• X-Swift-Savetime: the time when the resource was written to the cache.

5.2 Clean up resources (Optional)

If you no longer need these resources, delete them to avoid charges:

1. Delete the site.

   Log on to the ESA console. In the navigation pane on the left, click Websites. On the Site Management list page, click Delete in the Actions column.

2. Delete the edge function.

   In the ESA console, choose Edge Computing > Functions and Pages in the navigation pane on the left. On the Functions and Pages list page, click the target function. On the Basic Information tab, click Delete Routine.

3. Release the ECS instance.

   Log on to the ECS console. On the Instance page, find the target instance. In the Actions column, choose Release and follow the on-screen instructions to release the instance.

4. Delete a security group.

   Log on to the ECS console. On the Security Groups page, find the target security group. In the Actions column, click Delete and follow the on-screen instructions to delete the security group.