Edge Security Acceleration:Accelerate website rendering using ESA Functions and Pages

2.1 Prepare the 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 OK.

   

2. Select the bucket that you created in the previous step. On the file list page, upload files. Unzip the product image set from File materials for the demo and upload the images to the root directory of the bucket.

   

   Note

   It is recommended to place image resources in the root directory of the OSS bucket.

2.2 Configure the accelerated domain name for static resources

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

2. In the navigation pane on the left, choose DNS > Records and click Add Record. 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	By default, private access for the same account is automatically authorized.
   OSS Bucket	website-resources-shopping.*******.aliyuncs.com
   Origin HOST	Follow origin domain name
   TTL	Auto

3. For Record type, select Image/Video and click OK.

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

   

5. In the Alibaba Cloud DNS console, in the navigation pane on the left, choose Configurations > Public Zone. On the Public Zone tab, find the domain name of the target site and click Settings.

6. On the Settings page, click Add Record. Add a record with the following settings and click OK.

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

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

   

   Note

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

8. Enter http://{accelerated domain name}/1.png in your browser to test whether the image is displayed.

   Note

   If a 404 error occurs, 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, the access path is http://{accelerated domain name}/images/1.png.

3.1 Prepare the 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 region where your instance is deployed.

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

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 region where your instance is deployed.

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 Workbench, and click Sign in now. Enter the logon password to log on.

   

5. Download the website code and product data from File materials for the demo to your computer. 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 Step 2.2.

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

   

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

   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.

3.3 Configure the accelerated domain name for dynamic resources

1. In the ESA console, select 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 as described in the following table and click Next.

   Parameter	Example value
   Record type	A/AAAA
   Hostname	www
   Proxy Status	Enable
   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 OK.

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

   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. In the Alibaba Cloud DNS console, in the navigation pane on the left, choose Configurations > Public Zone. On the Public Zone tab, find the domain name of the target site and click Settings.

7. On the Settings page, click Add Record. Add a record with the following settings and click OK.

   Parameter	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 3. Verify the CNAME record, click Query. If the CNAME record has taken effect, the configuration is complete.

   

   Note

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

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 Creation Method, select Function Templates. Select the Hello World template and click Next.

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

4. You can add an endpoint 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 endpoint shopping.example.com to the function and click OK.

   4. In the domain name binding area, find the function's endpoint that you created. In the Actions column, click View DNS Records. On the DNS record management page, copy the CNAME value of the function's endpoint.

      

   5. In the Alibaba Cloud DNS console, in the navigation pane on the left, choose Configurations > Public Zone. On the Public Zone tab, find the domain name of the target site and click Settings.

   6. On the Settings page, click Add Record. Add a record with the following settings and click OK.

      Parameter	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 that corresponds to the function's endpoint.	shopping.example.com.**.*******.com
      TTL	The update period of the domain name. Keep the default value.	10 minutes

   7. Refresh the DNS record page and check whether the CNAME Status for the function's endpoint changes 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 the SSL/TLS feature to encrypt data transmission between clients and ESA POPs. For this solution, you can request a free certificate. For more information, see Configure an edge certificate.

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

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

3. In the Edge Certificates section, find SSL/TLS and turn on the switch.

   

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

   Parameter	Description	Example value
   Certification authority	Keep the default value.	Let's Encrypt
   Certificate domain names	Enter the static resource domain name, dynamic resource domain name, and function's endpoint 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. No manual operation is required.

4.3 Configure the origin protocol and port

After you configure the SSL certificate, 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, which causes HTTPS requests to the origin server to fail. Therefore, you must specify HTTP as the origin protocol in ESA.

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

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

3. In the Origin Certificates section, find Origin Protocol and Port and click Configure. Configure the parameters as described in the following table 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 80.	80

   

4.4 Test and publish the 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 list page, click the target function.

3. On the function details page, switch to the Code tab. In the code editor, replace the existing code with the following JavaScript code. In the new code, 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}
                               </div>
                               <div class="mt">
                                   ${item.discountPrice}
                               </div>
       
                           </div>
                       </div>`;
           itemsHtml += itemHtml;
       }
   
       // Replace #(itemsHtml) in the static HTML with the dynamic data
       const finalHtml = html.replace("#(itemsHtml)", itemsHtml);
   
       // Return the HTML page rendered on the 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. 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 settings

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

   • Open a browser and access the function's endpoint that you created in Step 4.1 (https://<your function's endpoint>).

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

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

5.2 (Optional) Clean up resources

To prevent ongoing costs, you should delete the resources in a specific order after you're finished with the tutorial.

1. Delete the acceleration POP settings.

   Log on to the ESA console. In the navigation pane on the left, click Websites. On the Site management page, find the site that you want to delete and click Delete in the Actions column.

2. Delete the edge function.

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

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.