Simple Log Service:ミニプログラムからSimple Log serviceにログを収集するサービスを構築する

次の図は、Enterprise AがSimple Log serviceにミニプログラムログを収集するための直接データ転送サービスを構築する計画を示しています。

次の手順では、ECSインスタンスでFlaskフレームワークを使用してミニプログラムを構築し、アプリケーションサーバーからSTSトークンを取得する方法について説明します。

1. ECS インスタンスに接続します。 ECSインスタンスにPython 3をインストールします。

2. RAMユーザーの環境変数ALIBABA_CLOUD_ACCESS_KEY_IDおよびALIBABA_CLOUD_ACCESS_KEY_SECRETを設定します。 詳細については、「Linux、macOS、およびWindowsでの環境変数の設定」をご参照ください。

3. プロジェクトディレクトリを作成し、プロジェクトディレクトリに切り替えます。

   mkdir my_web_sample
   cd my_web_sample

4. 依存関係をインストールします。

   pip3 install Flask
   pip3 install attr
   pip3 install yarl
   pip3 install async_timeout
   pip3 install idna_ssl
   pip3 install attrs
   pip3 install aiosignal
   pip3 install charset_normalizer
   pip3 install alibabacloud_tea_openapi
   pip3 install alibabacloud_sts20150401
   pip3 install alibabacloud_credentials

5. バックエンドコードを作成します。

   1. main.pyという名前のファイルを作成します。

   2. 次のPythonコードをファイルに追加します。

      重要

      <YOUR_ROLE_ARN> を、手順3で作成したsls-web-trackingロールのAlibaba Cloudリソース名 (ARN) に置き換えます。

      <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__)
      
      # Replace <YOUR_ROLE_ARN> with the ARN of the RAM role. 
      role_arn_for_oss_upload = '<YOUR_ROLE_ARN>'
      # Specify the region of STS. Example: cn-shanghai. 
      region_id = 'cn-shanghai'
      
      @app.route('/get_sts_token', methods=['GET'])
      def get_sts_token():
          # If you do not specify parameters when you initialize CredentialClient, the default credential chain is used. 
          # If you run the file on your computer, you can specify the AccessKey pair by configuring the ALIBABA_CLOUD_ACCESS_KEY_ID and ALIBABA_CLOUD_ACCESS_KEY_SECRET environment variables.
          # If you run the file on ECS, Elastic Container Instance (ECI), or Container Service for Kubernetes (ACK), you can specify the role of the bound instance by configuring the ALIBABA_CLOUD_ECS_METADATA environment variable. The SDK automatically obtains STS tokens. 
          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,
              # Replace <YOUR_ROLE_SESSION_NAME> with the custom name of the session. 
              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)

6. main.pyファイルを実行します。

   python3 main.py

7. ブラウザでhttp:// <ECSインスタンスのパブリックIPアドレス>/get_sts_tokenにアクセスします。

   次の図は、成功レスポンスを示しています。

   

手順7: ミニプログラムでSTSトークンを使用して、指定したSimple Log Serviceログストアにログをアップロード

アプリケーションサーバーに /get_sts_token操作を実装した後、Simple Log Serviceの @ aliyun-sls/web-track-miniインストルメンテーションSDKと @ aliyun-sls/web-sts-plugin STSプラグインをミニプログラムのapp.jsファイルに統合します。 これにより、ユーザーの行動をリアルタイムで監視し、関連するログをアップロードできます。

トラッカーを作成すると、トラッカーは自動的に /get_sts_token操作を呼び出してSTSトークンを取得します。 このようにして、ミニプログラムのやり取り中に生成されたユーザーの行動データをSimple Log Serviceに安全に転送できます。 ユーザ行動データは、ログオン、製品ブラウジング、および注文提出のデータを含む。

1. ミニプログラムの開発者ツールをダウンロードします。 詳細については、「ミニプログラムの開発者ツール」をご参照ください。

2. Todo App miniプログラムを作成して使用します。 詳細については、「Todo App」をご参照ください。

3. npmをインストールします。

   yum install npm

4. プロジェクトの依存関係をインストールします。

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

5. Todo App miniプログラムのサンプルコードを変更して、webトラッキング機能を使用してユーザーログを指定されたログストアにアップロードします。 変更する必要があるファイルを次の表に示します。

   ファイル	コード変更の説明
   app.js	onLaunchメソッドでinitSlsTrackerメソッドを呼び出します。 このようにして、ミニプログラムを起動すると、SlsTrackerオブジェクトが初期化されます。 initSlsTrackerメソッドでプロジェクトやログストアなどのパラメーターを設定します。 パラメーターの詳細については、「Webトラッキングパラメーター」をご参照ください。 STSトークンを動的に取得して更新するには、stsOptパラメーターとrefreshSTSToken関数を設定します。 STSトークン関連のパラメーターの詳細については、「STSパラメーター」をご参照ください。
   mini.project.json	@ aliyun-sls/web-sts-plugin STSプラグインは、ECMAScript 6 (ES6) をサポートしています。 mini.project.jsonファイルを変更するときは、compileOptions.transpileをtrueに設定します。 このように、ミニプログラムの開発者ツールは、互換性を確保するためにES6コードをECMAScript 5 (ES5) コードに変換します。
   todo.xml	<view class="todo-footer"> <add-button text="Add Todo" onClickMe="handleAddTodo"></add-button> </view> ユーザーインターフェイスの下部に [Todoの追加] という名前のボタンを定義します。 add-buttonを使用してボタンを定義できます。 onClickMe="handleAddTodo" は、ボタンをクリックすると、システムがtodo.jsファイルで定義されたhandleAddTodoメソッドを呼び出すことを指定します。
   todo.js	handleAddTodo() 関数を使用してイベントを処理します。 ユーザーインターフェイスにto do項目を追加すると、この機能がトリガーされます。 この関数は次の操作を実行します。 this.addTodo() メソッドを呼び出して、to-doアイテムを追加します。 this.onAddTodoButtonClick() メソッドを呼び出して、ユーザーが [Todoの追加] ボタンをクリックしたことを示すログメッセージを送信します。 addTodo() 関数を使用して、ミニプログラムのmy.navigateTo関数を呼び出します。 このようにして、現在のページからミニプログラムの /pages/add-todo/add-todoディレクトリにある必要なページに移動します。 onAddTodoButtonClick() メソッドを使用して、SlsTrackerオブジェクトのsendメソッドを呼び出し、ログを送信します。 ログの内容はeventType: 'addtodo_click' です。 SlsTrackerオブジェクトは、app.jsファイルで定義されています。
   add-todo.js	addメソッドを使用して、次の操作を実行します。 newTodoという名前のオブジェクトを作成します。 newTodoオブジェクトは、次の属性を含むto-doアイテムを指定します。 text: to doアイテムのコンテンツ。 this.data.inputValueメソッドを呼び出して、コンテンツを取得できます。 この呼び出しは、コンテンツがユーザー入力から来ることを示します。 completed: to-doアイテムが完了するかどうかを指定します。 初期値: false この値は、to-do項目が完了していないことを示します。 app.jsファイルで定義されているSlsTrackerオブジェクトのsendメソッドを呼び出してログを送信します。 次のコードは、ログの内容を示しています。 eventType: 'add_todo' todoText: newTodo.text
   add-button.js	カスタムボタンを定義します。 onClickMeメソッドは、最初にthis.props.onClickMeが関数であるかどうかを確認します。 this.props.onClickMeが関数の場合、メソッドは関数を呼び出します。

6. app.jsファイルでパラメーターを設定します。

   // app.js
   import SlsTracker from '@aliyun-sls/web-track-mini';
   import createStsPlugin from '@aliyun-sls/web-sts-plugin';
   
   App({
     todos: [
       { text: 'Learning Javascript', completed: true },
       { text: 'Learning ES2016', completed: true },
       { text: 'Learning the Alipay mini program', completed: false },
     ],
     userInfo: null,
     tracker: null,
   
     onLaunch: function() {
       // When you start the mini program, initialize the SlsTracker object.
       this.initSlsTracker();
     },
   
     initSlsTracker: function() {
       const opts = {
         host: 'cn-shanghai.log.aliyuncs.com', // Replace the value with your endpoint.
         project: '${project}', // Replace the value with your project name.
         logstore: '${Logstore}', // Replace the value with your logstore name.
         time: 10,
         count: 10,
         topic: 'topic',
         source: 'source',
         tags: {
           tags: 'tags',
         },
       };
   
       const stsOpt = {
         accessKeyId: '',
         accessKeySecret: '',
         securityToken: '',
         refreshSTSToken: () => new Promise((resolve, reject) => {
           my.request({
             url: 'http://${The public IP address of the ECS instance}}/get_sts_token', // Replace the value with the actual address of your application server that generates the STS token.
             method: 'GET',
             success: (res) => {
               if (res.statusCode === 200) {
                 let credential;
   
                 // Check whether the data type of the returned data is string. If the data type is not string, the data may be an object.
                 if (typeof res.data === "string") {
                   // Parse the returned data into a JSON object.
                   credential = JSON.parse(res.data);
                 } else {
                   // Use the object.
                   credential = res.data;
                 }
                 stsOpt.accessKeyId = credential.AccessKeyId;
                 stsOpt.accessKeySecret = credential.AccessKeySecret;
                 stsOpt.securityToken = credential.SecurityToken;
                 resolve(credential);
               } else {
                 reject(new Error('Failed to refresh STS token with status code: ' + res.statusCode));
               }
             },
             fail: (err) => {
               reject(new Error('Failed to refresh STS token', err));
             },
           });
         }),
       };
   
       const tracker = new SlsTracker(opts);
       const stsPlugin = createStsPlugin(stsOpt);
       tracker.useStsPlugin(stsPlugin);
   
       // When you start the mini program, a log is uploaded to Simple Log Service. 
       // tracker.send({
       //   eventType:'view_product',
       //   productName: 'Tablet',
       //   price: 500  
       // });
   
   
       this.tracker = tracker;
     },
   
     
   });
   

   1. optsおよびstsOptパラメーターの詳細については、「webトラッキングSDK For JavaScriptのSTSプラグインを使用してログをアップロードする」をご参照ください。

   2. ${project} と ${logstore} を、このトピックの「準備」セクションで作成されたプロジェクトとログストアの名前に置き換えます。

   3. <ECSインスタンスのパブリックIPアドレス> を、このトピックの「準備」セクションで作成されたECSインスタンスのパブリックIPアドレスに置き換えます。 ECSインスタンスのパブリックIPアドレスを表示する方法の詳細については、「IPアドレスの表示」をご参照ください。

7. ミニプログラムのクライアント側コードを実行します。 開発者ツールページの右上隅にあるアイコンをクリックします。 ミニプログラムのプレビューページで、Todo AppページのTodoを追加ボタンをクリックします。 [Todoの追加] ボタンをクリックするか、[Todoの追加] ボタンをクリックしてから [Todo] 項目を入力すると、ミニプログラムはログをSimple log Serviceログストアに直接アップロードします。 これにより、アプリケーションサーバーへのデータ転送またはデータ収集が不要になります。

リソースクリーニング

この例では、ECS (Elastic Compute Service) インスタンス、Simple Log Serviceプロジェクト、ログストア、RAM (Resource Access Management) ユーザー、およびRAMロールが作成されます。 ソリューションの検証後、次の操作を実行してリソースを解放し、不要な料金やセキュリティリスクを回避できます。

• ECSインスタンスをリリースします。 詳細については、「インスタンスのリリース」をご参照ください。

• ログストアを削除してから、プロジェクトを削除します。 詳細については、「ログストアの管理」および「プロジェクトの管理」をご参照ください。

• RAMユーザーとRAMロールを削除します。 詳細については、「RAMユーザーの削除」および「RAMロールの削除」をご参照ください。