使用WebTracking采集前端日志

1. 搭建STS临时凭证下发服务

在业务服务器上集成STS SDK，实现一个获取临时STS身份凭证的接口。前端应用后续将通过访问此接口，动态获取用于向日志服务上传日志的临时身份凭证。

1. 创建项目目录：登录服务器，执行以下命令，创建并进入项目的工作目录。

   mkdir my_web_sample
   cd my_web_sample

2. 安装依赖：执行以下命令，安装 Flask Web 框架及阿里云 SDK 相关的依赖库。

   pip3 install Flask==3.1.2
   pip3 install aiohttp==3.8.4
   pip3 install alibabacloud-credentials==0.3.2
   pip3 install alibabacloud-sts20150401==1.1.3
   pip3 install alibabacloud-tea==0.3.2
   pip3 install alibabacloud-tea-openapi==0.3.7
   pip3 install alibabacloud-tea-util==0.3.8
   pip3 install alibabacloud-tea-xml==0.0.2

3. 编写后端代码：创建main.py文件，并添加以下Python代码。

   重要

   • 将代码中的<YOUR_ROLE_ARN>替换为前提条件中创建的RAM角色sls-web-tracking的ARN。ARN获取方式参见查看RAM角色。

     

   • 将代码中的<YOUR_ROLE_SESSION_NAME>设置为自定义的会话名称，例如role_session_test。

   import json
   from flask import Flask, render_template
   from alibabacloud_tea_openapi.models import Config
   from alibabacloud_sts20150401.client import Client as Sts20150401Client
   from alibabacloud_sts20150401 import models as sts_20150401_models
   from alibabacloud_credentials.client import Client as CredentialClient
   
   app = Flask(__name__)
   
   # 将<YOUR_ROLE_ARN>替换为RAM角色的ARN。
   role_arn_for_oss_upload = '<YOUR_ROLE_ARN>'
   # 设置为STS服务的地域，例如cn-hangzhou。
   region_id = 'cn-hangzhou'
   
   @app.route("/")
   def hello_world():
       return render_template('index.html')
   
   @app.route('/get_sts_token', methods=['GET'])
   def get_sts_token():
       # 初始化 CredentialClient 时不指定参数，代表使用默认凭据链。
       # 在本地运行程序时，可以通过环境变量 ALIBABA_CLOUD_ACCESS_KEY_ID、ALIBABA_CLOUD_ACCESS_KEY_SECRET 指定 AK；
       # 在 ECS\ECI\容器服务上运行时，可以通过环境变量 ALIBABA_CLOUD_ECS_METADATA 来指定绑定的实例节点角色，SDK 会自动换取 STS 临时凭证。
       config = Config(region_id=region_id, credential=CredentialClient())
       sts_client = Sts20150401Client(config=config)
       assume_role_request = sts_20150401_models.AssumeRoleRequest(
           role_arn=role_arn_for_oss_upload,
           # 将<YOUR_ROLE_SESSION_NAME>设置为自定义的会话名称。
           role_session_name='<YOUR_ROLE_SESSION_NAME>'
       )
       response = sts_client.assume_role(assume_role_request)
       token = json.dumps(response.body.credentials.to_map())
       return token
   
   
   app.run(host="0.0.0.0", port=80)

4. 启动后端应用：使用在前提条件中创建的RAM用户的访问密钥启动应用程序。

   ALIBABA_CLOUD_ACCESS_KEY_ID=<YOUR_AK_ID> ALIBABA_CLOUD_ACCESS_KEY_SECRET=<YOUR_AK_SECRET> python3 main.py

5. 验证接口：在浏览器中访问http://<服务器公网IP地址>/get_sts_token，成功返回示例如下：

   

2. 配置前端应用以采集和上传日志

本步骤的目标是在 Web 前端项目中集成 WebTracking SDK。该 SDK 会自动调用后端的 /get_sts_token接口获取凭证，并将用户行为日志安全地发送到指定的 Logstore。

1. 准备前端开发环境：按Ctrl + C停止应用程序，在项目根目录 (my_web_sample) 下，执行以下命令安装 npm、Parcel 打包工具，并创建前端所需目录：

   # 安装npm
   yum install npm
   
   # 安装Parcel
   npm install -g parcel-bundler
   
   # 创建前端项目文件
   mkdir templates static src

2. 安装前端依赖：执行以下命令，安装 SLS 的 Web Tracking SDK 及其 STS 插件。

   # 安装项目依赖
   npm install --save @aliyun-sls/web-track-browser
   npm install --save @aliyun-sls/web-sts-plugin

3. 编写前端代码：在src目录下创建index.js文件，并添加如下代码：

   • 请将代码中的${project}和${logstore}替换为前提条件中创建的Project名称和Logstore名称。

   • 请将代码中的<ECS实例公网IP地址>替换为STS服务所在的服务器地址。

   import SlsTracker from "@aliyun-sls/web-track-browser";
   import createStsPlugin from "@aliyun-sls/web-sts-plugin";
   
   const opts = {
     host: "cn-hangzhou.log.aliyuncs.com", // 所在地域的服务入口。例如cn-hangzhou.log.aliyuncs.com
     project: "${project}", // Project 名称
     logstore: "${logstore}", // Logstore 名称
     time: 10, // 发送日志的时间间隔，默认是10秒
     count: 10, // 发送日志的数量大小，默认是10条
     topic: "topic", // 自定义日志主题
     source: "source",
     tags: {
       tags: "tags",
     },
   };
   
   const stsOpt = {
     accessKeyId: "",
     accessKeySecret: "",
     securityToken: "",
     // 以下是一个 stsToken 刷新函数的简单示例
     refreshSTSToken: () =>
       new Promise((resolve, reject) => {
         const xhr = new window.XMLHttpRequest();
         xhr.open("GET", "http://<ECS实例公网IP地址>/get_sts_token", true);
         xhr.send();
         xhr.onreadystatechange = () => {
           if (xhr.readyState === 4) {
             if (xhr.status === 200) {
               let credential = JSON.parse(xhr.response);
               // 函数的本质目的：设置 stsOpt 的临时密钥和令牌
               stsOpt.accessKeyId = credential.AccessKeyId;
               stsOpt.accessKeySecret = credential.AccessKeySecret;
               stsOpt.securityToken = credential.SecurityToken;
               resolve();
             } else {
               reject("Wrong status code.");
             }
           }
         };
       }),
     // refreshSTSTokenInterval: 300000,
     // stsTokenFreshTime: undefined,
   };
   
   const tracker = new SlsTracker(opts);
   // 创建 sts 插件
   const stsPlugin = createStsPlugin(stsOpt);
   // 使用 sts 插件
   tracker.useStsPlugin(stsPlugin);
   
   // 用户登录跟踪
   document.getElementById("loginButton").addEventListener("click", () => {
     const username = document.getElementById("username").value;
     tracker.send({
       eventType: "login",
       username: username,
     });
     console.log("Login event tracked for:", username);
   });
   
   // 商品浏览跟踪
   document.querySelectorAll(".product").forEach((productButton) => {
     productButton.addEventListener("click", (event) => {
       const productName = event.target.getAttribute("data-product-name");
       const productPrice = event.target.getAttribute("data-price");
       tracker.send({
         eventType: "view_product",
         productName: productName,
         price: productPrice,
       });
       console.log("Product view tracked for:", productName);
     });
   });
   
   // 订单提交跟踪
   document.getElementById("orderButton").addEventListener("click", () => {
     tracker.send({
       eventType: "place_order",
       orderDetails: "Order placed for example items",
     });
     console.log("Order placed event tracked");
   });
   

4. 创建HTML模板文件：在templates目录中创建一个index.html文件，在这个文件中，添加以下HTML代码。

   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <title>WebTracking Static Example</title>
   </head>
   <body>
       <h1>Welcome to Simple Web Store</h1>
       
       <!-- 用户登录 -->
       <div>
           <label for="username">Username:</label>
           <input type="text" id="username" name="username">
           <button id="loginButton">Login</button>
       </div>
       
       <!-- 商品列表 -->
       <div>
           <h2>Products</h2>
           <button class="product" data-product-name="Laptop" data-price="1200">Laptop - $1200</button>
           <button class="product" data-product-name="Smartphone" data-price="800">Smartphone - $800</button>
           <button class="product" data-product-name="Tablet" data-price="500">Tablet - $500</button>
       </div>
       
       <!-- 提交订单 -->
       <div>
           <h2>Your Order</h2>
           <button id="orderButton">Place Order</button>
       </div>
       
       <script type="module" src="{{ url_for('static', filename='js/index.js') }}"></script>
   </body>
   </html>

5. 打包并运行应用：

   1. 在项目根目录my_web_sample下，执行如下命令打包静态资源。

      parcel build src/index.js --out-dir static/js --public-url ./js

   2. 使用前提条件获取的访问密钥启动后端应用程序。

      ALIBABA_CLOUD_ACCESS_KEY_ID=<YOUR_AK_ID> ALIBABA_CLOUD_ACCESS_KEY_SECRET=<YOUR_AK_SECRET> python3 main.py

   3. 在浏览器中访问http://<服务器公网IP地址>，模拟用户操作（输入用户名、点击商品、下单等）以触发日志上报。

3. 在日志服务控制台查看日志

1. 登录日志服务控制台，在Project列表区域，单击目标Project。

2. 在日志库中，选择目标Logstore右侧的 > 消费预览。在消费预览面板，查看成功上传的日志。

执行以下操作使用资源编排一键部署示例工程。

1. 单击一键部署，在ROS控制台页面完成如下配置后单击下一步：检查并确认：

   • 地域：选择资源所在的地域。

   • 日志服务SLS配置：设置用于接收日志的Project和Logstore名称。

   • 云服务器ECS配置：选择交换机可用区，ECS实例类型，配置实例密码。

   • 进行安全确认。

2. 单击创建，等待资源栈创建完成后，单击输出页签，单击WebTrackingUrl。

3. 在打开的页面中输入用户名、选择商品、并点击下单，模拟真实用户在浏览器的行为。

4. 查看日志。

   1. 登录日志服务控制台，在Project列表区域，单击目标Project。

   2. 在日志库中，选择目标Logstore右侧的 > 消费预览。在消费预览面板，查看成功上传的日志。

5. 清理资源。

   1. 登录资源编排控制台。在左侧导航栏，单击资源栈。

   2. 在资源栈列表页面，找到创建的资源栈，然后在其操作列单击删除。