ESA利用边缘函数加速网站渲染

2.1 准备环境和资源

1. 登录OSS管理控制台，进入Bucket列表页面，然后单击创建Bucket，填写Bucket名称，其余参数保留默认配置即可，随后点击完成创建。

   

2. 选择上一步创建Bucket，在文件列表页面进行文件上传。将文件素材中的商品图片集解压，然后上传到该Bucket的根目录中。

   

   说明

   请检查OSS中的图片是否存放于根目录，如果不是在根目录，会导致步骤2.2在访问静态资源时出现404的错误。

2.2 配置静态资源的加速域名

1. 在ESA控制台，选择站点管理，在站点列单击目标站点。

2. 左侧导航栏，单击DNS > 记录 > 添加记录，根据不同的记录类型添加解析记录。

   配置项	示例值

   配置项	示例值
   记录类型	CNAME
   主机记录	images
   代理状态	开启
   记录值/源站	OSS
   回源类型	私有访问-同账号
   授权	默认会自动授权同账号的私有访问
   OSS地址	website-resources-shopping.*******.aliyuncs.com
   TTL	自动

3. 记录类型选择图片视频，点击完成。

4. DNS记录创建成功后，单击CNAME配置向导，复制CNAME配置向导页面中的主机记录和记录值。

   

5. 进入云解析DNS控制台，在左侧菜单栏单击公网DNS解析 > 权威域名解析，在权威域名页签下找到目标站点的域名，单击解析设置。

6. 在解析设置中点击添加记录，按以下配置添加记录，单击确定。

   配置项	示例值

   配置项	示例值
   记录类型	CNAME
   主机记录	images
   记录值	images.example.com.a1.initmm.com
   TTL	10分钟

7. 返回步骤5所在的CNAME配置向导页面，在步骤CNAME验证生效中单击查询。当提示内容出现CNAME已生效，则证明CNAME配置完成。

   

   说明

   CNAME生效时间可能需要数分钟，配置完成之后，如果没有及时生效，请耐心等待。

8. 通过在浏览器上输入http://images.example.cn/1.png来测试是否可以正常显示图片。

   说明

   如果访问出现了404的错误，请修改URL，按照文件目录路径访问即可。例如，如果您的图片没有放置在根目录，而是放置在images目录下，则此时您的访问路径应该为http://images.example.cn/images/1.png。

3.1 准备环境

1. 登录ECS管理控制台。

2. 在左侧导航栏，选择实例与镜像>实例，在顶部菜单栏，选择华东1（杭州）地域。

3. 在实例页面，单击创建实例。然后在云服务器ECS购买页面，创建云服务器ECS。

3.2 部署动态资源

1. 登录ECS控制台。

2. 在左侧导航栏选择实例与镜像>实例，在顶部菜单栏，选择华东1（杭州）地域。

3. 在实例页面找到目标实例，单击实例ID进入实例详情页。

4. 单击远程连接，选择通过Workbench远程连接，单击立即登录，输入登录密码完成登录。

   

5. 将文件素材中的网站代码和网站商品数据下载到本地，解压之后，将其中的两个文件上传到ECS服务器中。

6. 将ItemInfo.json中的域名images.example.com更换为实际配置的静态资源的加速域名（即步骤2.2中配置的域名）。

   然后依次单击左上方的文件>打开新文件管理>上传文件，然后将下载的两个文档上传到服务器中。

   

7. 在Workbench控制台中输入下面的命令，在本地启动一个简单的HTTP服务器。

   cd /  #进入系统根界面
   nohup python -m http.server 80 &  #后台启动一个端口号为80的HTTP服务

8. 在浏览器中输入http://<公网IP>/ItemsInfo.json查看是否正确返回商品动态信息。

   

3.3 配置动态资源的加速域名

1. 在ESA控制台，选择站点管理，单击目标站点操作列的 > 配置DNS记录。

2. 在左侧导航栏，选择DNS > 记录。

3. 在记录列表页面中单击添加记录，根据以下信息完成参数配置，单击下一步。

   配置项	示例值

   配置项	示例值
   记录类型	A/AAAA
   主机记录	www
   代理状态	开启
   记录值/源站	10.0.x.x（目标云服务器 ECS 的公网 IP 地址）
   TTL	自动

4. 记录类型选择API接口，点击完成。

5. DNS记录创建成功后，单击CNAME配置向导，复制CNAME配置向导页面中的主机记录和记录值。

   说明

   在配置完成之后，请暂勿关闭当前页面，步骤8中需要回到当前页面对CNAME记录是否生效进行验证。

   

6. 进入云解析DNS控制台，在左侧菜单栏单击公网DNS解析 > 权威域名解析，在权威域名页签下找到目标站点的域名，单击解析设置。

7. 在解析设置中点击添加记录，按以下配置添加记录，单击确定。

   配置项	示例值

   配置项	示例值
   记录类型	CNAME
   主机记录	www
   记录值	www.example.com.a1.initmm.com（CNAME配置向导中的记录值）
   TTL	10分钟

8. 返回步骤5所在的CNAME配置向导页面，在步骤CNAME验证生效中单击查询。当提示内容出现CNAME已生效，则证明CNAME配置完成。

   

   说明

   CNAME生效时间可能需要数分钟，配置完成之后，如果没有及时生效，请耐心等待。

4.1 创建边缘函数

1. 登录ESA控制台，在左侧导航栏选择边缘计算 > 边缘函数。

2. 在边缘函数页面右侧账户信息区域单击更改。

3. 在更改模式弹窗中选择付费模式，单击确认更改。

4. 点击创建函数，选择Hello World模板，单击下一步。

5. 填写函数名称，规格选择单个请求可用CPU时间片：50ms，其余配置保持默认，单击提交。

6. 为边缘函数添加访问域名。

   1. 在左侧菜单栏单击边缘计算 > 边缘函数，在边缘函数列表页面选择目标函数，在操作列单击详情。

   2. 在函数详情页面，切换至触发器页签，单击添加域名。为边缘函数分配访问域名shopping.example.com，单击确定。

   3. 在域名绑定区域找到上一步所创建的边缘函数域名，在操作列单击查看DNS记录，在DNS记录管理页面复制边缘函数域名对应的CNAME值。

      

   4. 登录云解析DNS控制台，在左侧菜单栏单击公网DNS解析 > 权威域名解析，在权威域名页签下找到目标站点的域名，单击解析设置。

   5. 在解析设置中单击添加记录，按以下配置添加记录，单击确定。

      配置项	说明	示例值

      配置项	说明	示例值
      记录类型	选择域名指向的类型。	CNAME
      主机记录	根据域名前缀填写主机记录。	shopping
      记录值	填写边缘函数域名对应的CNAME值。	shopping.example.com.a1.initmm.com
      TTL	域名的更新周期，保留默认值。	10分钟

   6. 刷新DNS记录页面，检查边缘函数域名对应CNAME状态是否从待配置转变为已配置。

      说明

      CNAME生效时间可能需要数分钟，配置完成之后，如果没有及时生效，请耐心等待。

4.2 调试并发布边缘函数

1. 登录ESA控制台，在左侧导航栏选择边缘计算 > 边缘函数。

2. 在边缘函数列表页面选择目标函数，在操作列单击详情。

3. 在边缘函数详情页面，切换至代码页签，使用以下JavaScript代码并将变量urlPrefix替换为源站域名www.example.com，单击保存 。

   async function handleRequest(request) {
       const urlPrefix = 'www.example.com';
       // HTML文件的请求地址
       const staticDataUrl = 'http://' + urlPrefix + '/index.html';
       // 动态数据的请求地址
       const dynamicDataUrl = 'http://' + urlPrefix + '/ItemsInfo.json';
   
       // 利用CacheAPI查询页面骨架数据
       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();
       }
   
       // 回源查询商品数据
       const jsonResponse = await fetch(dynamicDataUrl);
       const json = await jsonResponse.json();
   
       // 将动态数据封装成div数据块
       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;
       }
   
       // 将静态HTML中的#(itemsHtml)替换为动态数据
       const finalHtml = html.replace("#(itemsHtml)", itemsHtml);
   
       // 将边缘节点渲染后的html页面返回给浏览器
       return new Response(finalHtml, {
           headers: {
               "content-type": "text/html;charset=UTF-8",
           },
       });
   }
   
   export default {
       async fetch(request) {
           return handleRequest(request);
       },
   };
   

4. 在代码编辑器中，单击右上角请求进行本地调试，在编辑器左下方区块会对执行过程的日志进行输出。

5. 在本地调试通过之后，单击快速发布即可将代码部署至线上环境。

5.1 方案验证

1. 完成边缘函数的发布后，您可以通过以下方式验证其效果：

   • 打开浏览器，访问加速域名（如 http://shopping.example.com）。

   • 检查页面是否正常加载，商品信息是否动态渲染。

   • 使用开发者工具查看网络请求，确认静态资源是否命中缓存，动态数据是否通过边缘节点加速。

5.2 清理资源（可选）

在本方案中，您创建多个云资源实例。测试完方案后，如果不再需要这些资源，您可以参考以下规则处理对应产品的实例，避免继续产生费用：

1. 删除ESA加速节点。

   登录ESA控制台，在左侧导航栏单击站点管理，在站点管理列表页面右侧操作列单击删除。

2. 删除边缘函数。

   在ESA控制台，在左侧导航栏单击边缘计算 > 边缘函数，在边缘函数列表页面右侧操作列单击删除。

3. 释放ECS实例。

   登录ECS控制台，在实例页面，找到目标实例，然后在操作列选择释放，根据界面提示释放实例。

4. 删除1个安全组：

   登录ECS控制台，在安全组页面，找到目标安全组，在操作列中单击删除，按照界面提示删除安全组。