Edge Security Acceleration:Accelerate website rendering using ESA edge functions

2.1 Prepare the environment

1. Log on to the OSS console. Go to the Buckets page and click Create Bucket. Enter a Bucket Name. Keep the default settings for other parameters and click Create.

   

2. Select the bucket that you created. On the file list page, upload the required files. Unzip the image set from the File materials section and upload the images to the root directory of the bucket.

   

   Note

   We recommend storing the image resources in the root directory of the OSS bucket.

2.2 Configure the domain name for static resources

1. In the ESA console, choose Websites. In the Website column, click the target site.

2. In the left navigation pane, choose DNS > Records > Add Record. Add a DNS record. The following table shows the exmaple settings:

   Configuration	Example value
   Record Type	CNAME
   Hostname	images
   Proxy Status	Proxied
   Record Value	OSS
   Access Type	Private Access (Same account)
   Authorization	By default, private access for the same account is automatically authorized.
   OSS Bucket	website-resources-shopping.*******.aliyuncs.com
   Origin Host	Match Origin's Domain Name
   TTL	Auto

3. For Record Type, select Images/Video and click Done.

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

   

5. Go to the Alibaba Cloud DNS console. In the left navigation pane, choose Public Zone. Find the domain name of the target website and click Settings.

6. In the Settings section, click Add Record. Add a record with the following settings and click OK.

   Configuration	Example value
   Record Type	CNAME
   Hostname	images
   Record Value	images.example.com.**.*******.com
   TTL	10 minutes

7. Return to the CNAME Configuration Guide page from Step 4. In the CNAME Verification step, click Query. If the status is Effective, the CNAME record is successfully configured.

   

   Note

   The CNAME record may take several minutes to take effect.

8. Test whether the image can be displayed by entering http://{accelerated domain name}/1.png in your browser.

   Note

   If a 404 error occurs, try modify the URL to access the file based on its directory path. For example, if your image is in the images directory instead of the root directory, access http://{accelerated domain name}/images/1.png.

3.1 Prepare the environment

1. Log on to the ECS console.

2. In the left navigation pane, choose Instances & Images > Instances. In the top menu bar, select the region where your instance is located. In this example, it is China (Hangzhou).

3. On the Instances page, click Create Instance. Then create an ECS instance refering to the following example:

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 and click Sig In Now. Enter the logon password to log on to the instance.

   

5. Download the demo python scripts and product data from File materials. After you unzip the package, upload the two files to the ECS server.

6. Replace the domain name images.example.com in ItemInfo.json with the accelerated domain name for static resources that you configured in Section 2.2.

   Then, in the upper-left corner, choose File > New File Manager Window > Upload File. Upload the two downloaded documents to the server.

   

7. In the Workbench console, enter the following command to start a HTTP server.

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

8. Enter http://<Public IP>/ItemsInfo.json in your browser to check whether the dynamic product information is returned correctly.

3.3 Configure the domain name for dynamic resources

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

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

3. On the record list page, click Add Record. Configure the parameters as described in the following table and click Next.

   Configuration	Example value
   Record Type	A/AAAA
   Hostname	www
   Proxy Status	Proxied
   Record Value	10.0.x.x (The public IP address of the target ECS instance)
   TTL	Auto

4. For Record Type, select API and click Complete.

5. After the DNS record is created, click CNAME Configuration Guide. Copy the Hostname and Record Value.

   Note

   Do not close the current page. You need to return to this page in Step 8 to verify whether the CNAME record has taken effect.

   

6. Go to the Alibaba Cloud DNS console. In left the navigation pane, choose Public Zone. Find the domain name of the target site and click Settings.

7. In the Settings section, click Add Record. Add a record with the following settings and click OK.

   Configuration	Example value
   Record Type	CNAME
   Hostname	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 the CNAME Verification step, click Query. If Effective is displayed, the CNAME record is successfully configured.

   

   Note

   The CNAME record may take several minutes to take effect.

4.1 Create an edge function

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

2. On the Functions and Pages page, click Change in the Account Information area on the upper-right.

3. In the Change Plan dialog box, select Paid and click OK.

4. Click Create. Select Hello World from Function Templates and click Next.

5. Enter a Function Name. Add a description and click Submit.

6. Add an endpoint for the edge function.

   1. In the left navigation pane, choose Edge Computing > Functions and Pages. On the edge function list page, click the target function.

   2. On the function details page, switch to the Domains tab and click Add Domain Name. Assign the endpoint shopping.example.com to the function and click OK.

   3. In the domain name binding area, find the edge function domain name that you created. In the Actions column, click View DNS Records. Copy the CNAME value of the edge function domain name.

      

   4. Log on to the Alibaba Cloud DNS console. In the left navigation pane, choose Public Zone. Find the domain name of the target website and click Settings.

   5. In the Settings section, click Add Record. Add a record with the following settings and click OK.

      Configuration	Description	Example value
      Record Type	Select the type to which the domain name points.	CNAME
      Hostname	Enter the host record based on the domain name prefix.	shopping
      Record Value	Enter the CNAME value corresponding to the edge function domain name.	shopping.example.com.**.*******.com
      TTL	The update period of the domain name. Keep the default value.	10 minutes

   6. Refresh the DNS record page and check whether the CNAME Status for the edge function domain name has changed from To Be Configured to Configured.

      Note

      The CNAME record may take several minutes to take effect. If it does not take effect immediately, wait a few minutes.

4.2 Configure an edge certificate

ESA supports HTTPS encryption. You can configure an SSL certificate in ESA and enable SSL/TLS to encrypt data transmission between clients and ESA POPs. For this solution, we recommend that you request a free certificate. For more information, see How to configure an edge certificate.

1. In the ESA console, click Site Management on the left. On the Site Management page, click the target site.

2. On the target site management page, choose SSL/TLS > Edge Certificate in the navigation pane on the left.

3. In the Edge Certificate section, find Enable SSL/TLS and click the switch on the right to enable this feature.

   

4. In the Edge Certificate section, find Certificate Management and click Request Free Certificate. Configure the parameters as described in the following table and click OK.

   Configuration	Description	Example value
   Certificate Authority	Keep the default value.	Let's Encrypt
   Certificate Domain Names	Enter the static resource domain name, dynamic resource domain name, and edge function domain name from the previous steps.	images.example.com www.example.com shopping.example.com

5. The free certificate application takes about 5 to 10 minutes. After the certificate is issued, it is automatically deployed to the ESA platform.

4.3 Configure the origin protocol and port

After the SSL certificate is configured, ESA uses the same protocol as the client request (HTTPS) for origin fetch by default. However, the origin server in this demo does not support HTTPS, and an HTTPS request to the origin server will fail. Therefore, you must specify HTTP as the origin protocol in ESA.

1. In the ESA console, click Website on the left and click the target site.

2. On the Website page, choose SSL/TLS > Origin Certificate in the left navigation pane.

3. In the Origin Certificate section, find Origin Protocol and Port and click Configure. Configure the parameters as described in the following table and click OK.

   Configuration	Description	Example value
   Origin Protocol	Because the origin server does not support HTTPS, select HTTP.	HTTP
   HTTP Port	Keep the default value 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 edge function list page, select the target function.

3. On the edge function details page, switch to the Code tab. Use the following JavaScript code and replace the urlPrefix variable with the origin domain name www.example.com. Then, click Save.

   async function handleRequest(request) {
       const urlPrefix = 'www.example.com';
       // The request URL for the HTML file
       const staticDataUrl = 'http://' + urlPrefix + '/index.html';
       // The request URL for the dynamic data
       const dynamicDataUrl = 'http://' + urlPrefix + '/ItemsInfo.json';
   
       // Use the Cache API to query the 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 the product data from the origin server
       const jsonResponse = await fetch(dynamicDataUrl);
       const json = await jsonResponse.json();
   
       // Encapsulate the 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">
                                   ${item.originalPrice}${item.discountPrice}

4. In the code editor, click Request in the upper-right corner to perform a local test. The logs are displayed in the lower-left section of the editor.

5. After the local test is successful, click One-click Release to deploy the code to the production environment.

5.1 Verify the demo

1. After you publish the edge function, verify the result in the following ways:

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

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

   • Use browser developer tools to view network requests. Confirm that static resources result in a cache hit and that dynamic data is accelerated through POPs.

5.2 (Optional) Clean up resources

This demo involves creating multiple resource instances. If you no longer need these resources, release them to avoid charges:

1. Delete the website from ESA.

   Log on to the ESA console. In the left navigation pane, click Websites. Find the website that you want to delete and click Delete in the Actions column.

2. Delete the edge function.

   In the ESA console, choose Edge Computing > Functions and Pages in the left navigation pane. Click the function that you want to delete and click Delete in the Basic Information tab.

3. Release the ECS instance.

   Log on to the ECS console. On the Instances page, find the target instance. In the Actions column, choose Release. Release the instance as prompted.

4. Delete the security group.

   Log on to the ECS console. On the Security Groups page, find the target security group. In the Actions column, click Delete. Delete the security group as prompted.