執(zhí)行以下操作使用資源編排一鍵部署示例工程。

1. 單擊一鍵部署鏈接。

2. 在頁(yè)面左上角的地域，選擇地域，例如華東1（杭州）。

3. 在配置參數(shù)頁(yè)簽，完成日志服務(wù)SLS配置和云服務(wù)器ECS配置，然后單擊下一步。

4. 單擊創(chuàng)建。

5. 創(chuàng)建完成后，單擊輸出頁(yè)簽，然后單擊WebTrackingUrl，在頁(yè)面中輸入用戶名、選擇商品、并點(diǎn)擊下單，模擬真實(shí)用戶在瀏覽器的行為。

   

方案驗(yàn)證

完成以上操作后，您可以通過(guò)預(yù)覽方式查看數(shù)據(jù)是否已上傳到SLS。

1. 登錄日志服務(wù)控制臺(tái)。

2. 在Project列表區(qū)域，單擊目標(biāo)Project。

3. 在日志庫(kù)中，選擇目標(biāo)Logstore右側(cè)的 > 消費(fèi)預(yù)覽。

4. 在消費(fèi)預(yù)覽面板，查看成功上傳的日志。

   

清理資源

在本方案中，您創(chuàng)建了1臺(tái)ECS實(shí)例、1個(gè)SLS Project和Logstore、1個(gè)RAM用戶和1個(gè)RAM角色。測(cè)試完方案后，您可以參考以下規(guī)則處理對(duì)應(yīng)產(chǎn)品的資源，避免繼續(xù)產(chǎn)生費(fèi)用或產(chǎn)生安全風(fēng)險(xiǎn)。

1. 登錄資源編排控制臺(tái)。

2. 在左側(cè)導(dǎo)航欄，單擊資源棧。

3. 在資源棧列表頁(yè)面，找到創(chuàng)建的資源棧，然后在其操作列單擊刪除。

準(zhǔn)備工作

在開(kāi)始部署前，您需要先創(chuàng)建云資源。

• 創(chuàng)建一個(gè)日志服務(wù)Project和Logstore，用于存儲(chǔ)和分析從瀏覽器采集的日志。具體操作，請(qǐng)參見(jiàn)創(chuàng)建項(xiàng)目Project和創(chuàng)建Logstore。

  參數(shù)	示例值
  所屬地域	華東1（杭州）
  Project名稱	web-tracking-project
  Logstore名稱	web-tracking-logstore

• 創(chuàng)建一臺(tái)ECS實(shí)例作為業(yè)務(wù)服務(wù)器，用于生成臨時(shí)身份憑證。具體步驟，請(qǐng)參見(jiàn)創(chuàng)建ECS實(shí)例。

  說(shuō)明

  在實(shí)際部署時(shí)，您可以將調(diào)用STS服務(wù)的接口集成到自己的業(yè)務(wù)服務(wù)器的接口中，而無(wú)需創(chuàng)建該ECS實(shí)例。

  參數(shù)	示例值
  付費(fèi)類型	按量付費(fèi)
  地域	華東1（杭州）
  公網(wǎng) IP	分配公網(wǎng) IPv4 地址
  安全組	開(kāi)放HTTP (TCP：80)端口

步驟一：創(chuàng)建RAM用戶

1. 使用阿里云賬號(hào)（主賬號(hào)）或RAM管理員登錄RAM控制臺(tái)。

2. 創(chuàng)建一個(gè)RAM用戶。具體操作，請(qǐng)參見(jiàn)創(chuàng)建RAM用戶。

   重要

   • 創(chuàng)建RAM用戶時(shí)，請(qǐng)選擇訪問(wèn)方式為使用永久 AccessKey 訪問(wèn)，并保存AccessKey信息。

   • RAM用戶的AccessKey Secret只在創(chuàng)建時(shí)顯示，不支持查詢，請(qǐng)妥善保管，謹(jǐn)防泄露。

步驟二：授權(quán)RAM用戶授予調(diào)用AssumeRole接口

為RAM用戶添加AliyunSTSAssumeRoleAccess權(quán)限，使其可以通過(guò)扮演RAM角色來(lái)獲取臨時(shí)身份憑證。具體操作，請(qǐng)參見(jiàn)為RAM用戶授權(quán)。

步驟三：創(chuàng)建RAM角色

創(chuàng)建RAM用戶要扮演的RAM角色，例如命名為：sls-web-tracking。具體操作，請(qǐng)參見(jiàn)創(chuàng)建可信實(shí)體為阿里云賬號(hào)的RAM角色。

步驟四：創(chuàng)建自定義權(quán)限策略

創(chuàng)建一個(gè)自定義權(quán)限策略，例如命名為：post-logs-policy。其中在腳本編輯頁(yè)簽，請(qǐng)使用以下腳本替換配置框中的原有內(nèi)容。具體操作，請(qǐng)參見(jiàn)通過(guò)腳本編輯模式創(chuàng)建自定義權(quán)限策略。

{
  "Version":"1",
  "Statement":[
    {
      "Effect":"Allow",
      "Action":[
        "log:PostLogStoreLogs"
      ],
      "Resource":[
        "acs:log:*:*:project/<Project名稱>/logstore/<Logstore名稱>"
      ]
    }
  ]
}

步驟五：為RAM角色授予權(quán)限

為RAM角色sls-web-tracking授予創(chuàng)建的自定義權(quán)限post-logs-policy，以便被RAM用戶扮演時(shí)能獲取所需的權(quán)限。具體操作，請(qǐng)參見(jiàn)為RAM角色授權(quán)。

步驟六：在業(yè)務(wù)服務(wù)器獲取臨時(shí)身份憑證

在Web應(yīng)用中，通過(guò)在業(yè)務(wù)服務(wù)器集成STS SDK，實(shí)現(xiàn)一個(gè)獲取臨時(shí)STS身份憑證的接口。當(dāng)這個(gè)接口/get_sts_token通過(guò)HTTP GET方法被訪問(wèn)時(shí)，它會(huì)生成一個(gè)臨時(shí)身份憑證，并將其返回給請(qǐng)求者。

步驟七：在瀏覽器使用臨時(shí)身份憑證上傳日志到日志服務(wù)Logstore

在業(yè)務(wù)服務(wù)器配置了獲取STS臨時(shí)身份憑證的接口后，在Web應(yīng)用的前端集成SLS的前端埋點(diǎn)SDK（@aliyun-sls/web-track-browser）和STS插件（@aliyun-sls/web-sts-plugin），實(shí)現(xiàn)實(shí)時(shí)監(jiān)控用戶行為并上傳相關(guān)日志。當(dāng)創(chuàng)建埋點(diǎn)跟蹤器（tracker）實(shí)例時(shí)，它將自動(dòng)請(qǐng)求之前部署的/get_sts_token接口，以便獲取必要的臨時(shí)STS憑證。這種機(jī)制保證了用戶在網(wǎng)站交互過(guò)程中，如登錄、瀏覽商品或提交訂單等活動(dòng)的數(shù)據(jù)會(huì)被安全地傳輸至SLS。

在ECS上，使用Parcel打包工具來(lái)編譯并打包SLS的前端埋點(diǎn)SDK和STS插件，然后將這些資源集成到Web應(yīng)用的前端代碼的操作示例如下：

1. 按Ctrl + C停止應(yīng)用程序。

2. 安裝npm。

   yum install npm

3. 安裝Parcel。

   npm install -g parcel-bundler

4. 創(chuàng)建前端項(xiàng)目文件。

   mkdir templates static src

5. 安裝項(xiàng)目依賴。

   npm install --save @aliyun-sls/web-track-browser
   npm install --save @aliyun-sls/web-sts-plugin

6. 編寫(xiě)前端代碼。

   1. 在src目錄中創(chuàng)建一個(gè)src/index.js文件。

      vim src/index.js

   2. 在這個(gè)文件中，添加以下JavaScript代碼。

      import SlsTracker from "@aliyun-sls/web-track-browser";
      import createStsPlugin from "@aliyun-sls/web-sts-plugin";
      
      const opts = {
        host: "cn-hangzhou.log.aliyuncs.com", // 所在地域的服務(wù)入口。例如cn-hangzhou.log.aliyuncs.com
        project: "${project}", // Project 名稱
        logstore: "${logstore}", // Logstore 名稱
        time: 10, // 發(fā)送日志的時(shí)間間隔，默認(rèn)是10秒
        count: 10, // 發(fā)送日志的數(shù)量大小，默認(rèn)是10條
        topic: "topic", // 自定義日志主題
        source: "source",
        tags: {
          tags: "tags",
        },
      };
      
      const stsOpt = {
        accessKeyId: "",
        accessKeySecret: "",
        securityToken: "",
        // 以下是一個(gè) stsToken 刷新函數(shù)的簡(jiǎn)單示例
        refreshSTSToken: () =>
          new Promise((resolve, reject) => {
            const xhr = new window.XMLHttpRequest();
            xhr.open("GET", "http://<ECS實(shí)例公網(wǎng)IP地址>/get_sts_token", true);
            xhr.send();
            xhr.onreadystatechange = () => {
              if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                  let credential = JSON.parse(xhr.response);
                  // 函數(shù)的本質(zhì)目的：設(shè)置 stsOpt 的臨時(shí)密鑰和令牌
                  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);
      // 創(chuàng)建 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");
      });
      

      關(guān)于opts和stsOpt的參數(shù)說(shuō)明，請(qǐng)參見(jiàn)使用WebTracking JavaScript SDK的STS插件上傳日志。

   3. 將代碼中的${project}和${logstore}替換為準(zhǔn)備工作中創(chuàng)建的Project名稱和Logstore名稱。

   4. 將代碼中的<ECS實(shí)例公網(wǎng)IP地址>替換為準(zhǔn)備工作中創(chuàng)建的ECS實(shí)例的公網(wǎng)IP地址。如何查看公網(wǎng)IP地址，請(qǐng)參見(jiàn)查看IP地址。

7. 創(chuàng)建HTML模板文件。

   1. 在templates目錄中創(chuàng)建一個(gè)index.html文件。

      vim templates/index.html

   2. 在這個(gè)文件中，添加以下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>

8. 在項(xiàng)目根目錄my_web_sample下，打包靜態(tài)資源。

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

9. 使用步驟一獲取的訪問(wèn)密鑰啟動(dòng)應(yīng)用程序。

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

10. 在瀏覽器中訪問(wèn)http://<ECS實(shí)例公網(wǎng)IP地址>，然后在頁(yè)面中輸入用戶名、選擇商品、并點(diǎn)擊下單，模擬真實(shí)用戶在瀏覽器的行為。

    

完成及清理