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 then click Create Bucket. Enter a Bucket Name, keep the default settings for other parameters, and then click Create.

   

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 accelerated domain for static resources

1. In the ESA console, choose Websites. 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 (Same-account)
   Authorization	Private access for the same account is authorized by default.
   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.

   

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.

   In the upper-left corner, choose File > Open New File Management > Upload File to upload the two 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 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 domain name to which you want to map the record.	CNAME
      Host record	Enter the host record based on the domain name prefix.	shopping
      Record value	Enter the CNAME value of the edge function domain name.	shopping.example.com.**.*******.com
      TTL	The update cycle of the domain name. 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 supports HTTPS via SSL/TLS to encrypt client-to-POP requests. 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 resource, dynamic resource, and edge function domain names that you configured in the preceding steps.	images.example.com www.example.com shopping.example.com

5. Certificate issuance takes 5 to 10 minutes. After issuance, the certificate is automatically deployed to ESA.

4.3 Configure origin protocol and port

By default, ESA uses the client protocol (HTTPS) for origin fetch. Because the origin server in this example does not support HTTPS, configure ESA to use HTTP for origin fetch.

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	Because the origin server does not support HTTPS, select HTTP.	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 the edge function, verify the result:

   • Open a browser and access the edge function domain name that you created in Section 4.1 (for example, https://<your_edge_function_domain_name>).

   • Check whether the page is loaded and whether product information is dynamically rendered.

   • Use browser developer tools to view network requests and confirm that static resources are served from the cache and that dynamic data is accelerated by POPs.

5.2 Clean up resources (Optional)

If you no longer need these resources after testing, delete them to avoid further 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.