在我之前的如下文章里：

Observability：Synthetic monitoring – 合成监测入门（一）（二）
Observability：Synthetic monitoring – 创建浏览器监测，配置单独的浏览器监测器及项目

我详细地描述了如何使用 Elastic 的 Synthetic monitoring 来创建轻量级 HTTP/S、TCP 和 ICMP 监测器及浏览器监测器。

安装

我们需要按照之前文章 “Observability：Synthetic monitoring – 合成监测入门（一）” 来安装 Elasticsearch, Kibana, Fleet Server 及 Elastic Agents。在安装完毕后，我们可以看到 Agent 的状态是 Healthy 的。

准备展示应用

我们参照文章 “一个问题的两个方面：使用合成监测将测试和监测相结合”。文章里有介绍一个 demo 应用。我们使用如下的方法来下载下来：

git clone https://github.com/carlyrichmond/synthetics-replicator

为了能够正常运行该应用我们需要全局安装 Nx：

npm install --global nx@latest

1.  $ npm install --global nx@latest













3.  changed 123 packages, and audited 124 packages in 15s








5.  19 packages are looking for funding
6.    run `npm fund` for details





8.  found 0 vulnerabilities
9.  npm notice 
10.  npm notice New major version of npm available! 8.19.2 -> 9.8.1
11.  npm notice Changelog: https://github.com/npm/cli/releases/tag/v9.8.1
12.  npm notice Run npm install -g npm@9.8.1 to update!
13.  npm notice

当然，我们也需要安装 npm：

npm install -g npm

我们进入到项目的根目录下，并打入如下的命令：

























1.  npm install
2.  nx serve synthetics-replicator

我们使用如下的命令来运行服务器：

nx serve synthetics-replicator

从上面的输出中，我们可以看到服务器运行于 http://localhost:**5173**/。我们可以在浏览器中打开：

在我们的 Fleet 及 Elastic Agent 的部署中，我们使用 docker 来进行部署的。Docker 里的容器只能访问外部地址。如果我们的服务运行于 localhost 上，那么容器会在自己的内部寻找这个服务器，而不会访问我们部署的这个 web 服务器。为此，我参照之前的文章 “Kibana：创建一个 webhook alert – Elastic Stack 8.2”，并运行如下的命令：

bore local 5173 --to bore.pub

























1.  $ bore local 5173 --to bore.pub
2.  2023-07-21T06:43:55.131881Z  INFO bore_cli::client: connected to server remote_port=25086
3.  2023-07-21T06:43:55.131970Z  INFO bore_cli::client: listening at bore.pub:25086

从上面的输出中，我们可以看到，服务器被置于一个外部可以访问的地址。我们可以通过浏览器来进行访问：

很显然，我们的服务器已经成功地运行起来了。

获取 Private API key

为了方便下面的操作，我们需要获得访问位置的 Private API key：

我们拷贝上面的 API key 以供下面进行使用。

运行监测器

在运行测试器之前，我们先针对 package.json 做一点小的改动：

package.json

























1.  ...








3.    "scripts": {
4.      "start": "nx serve synthetics-replicator",
5.      "build": "nx build synthetics-replicator",
6.      "test": "cd apps/synthetics-replicator-tests && npm run test",
7.      "push": "cd apps/synthetics-replicator-tests && npx @elastic/synthetics push"
8.    },





11.  ...

我增加了一个 push 的指令。

我们可以检查配置文件：

























1.  $ pwd

2.  /Users/liuxg/nodejs/synthetics-replicator/apps/synthetics-replicator-tests
3.  $ ls

4.  README.md            lightweight          package.json
5.  journeys             package-lock.json    synthetics.config.ts

在上述的目录中，我们可以查看到文件 synthetics.config.ts。它的内容如下：

























1.  import type { SyntheticsConfig } from '@elastic/synthetics';









3.  export default env => {

4.    const config: SyntheticsConfig = {

5.      params: {

6.        url: 'http://localhost:5173',
7.      },

8.      playwrightOptions: {

9.        ignoreHTTPSErrors: false,

10.      },

11.      /**

12.       * Configure global monitor settings

13.       */

14.      monitor: {

15.        schedule: 10,
16.        locations: ['united_kingdom'],
17.        privateLocations: [],
18.      },

19.      /**

20.       * Project monitors settings

21.       */

22.      project: {

23.        id: 'synthetics-replicator-tests',

24.        url: 'https://fe8f3eff95d246c6a166d76a9dff6090.uksouth.azure.elastic-cloud.com:443',
25.        space: 'default',

26.      },

27.    };

28.    if (env === 'production') {

29.      config.params = { url: 'https://synthetics-replicator.netlify.app/' }
30.    }

31.    return config;

32.  };

从上面的配置中，我们可以看到针对 production 环境它配置是一个在云上运行的服务器，我们可以使用我们本地部署的服务器：

synthetics.config.ts

`













1.  import type { SyntheticsConfig } from '@elastic/synthetics';









3.  export default env => {

4.    const config: SyntheticsConfig = {

5.      params: {

6.        url: 'http://localhost:5173/',
7.      },

8.      playwrightOptions: {

9.        ignoreHTTPSErrors: false,

10.      },

11.      /**

12.       * Configure global monitor settings

13.       */

14.      monitor: {

15.        schedule: 3,
16.        locations: [],
17.        privateLocations: ['Beijing'],
18.      },

19.      /**

20.       * Project monitors settings

21.       */

22.      project: {

23.        id: 'synthetics-replicator-tests',

24.        url: 'http://127.0.0.1:5601',
25.        space: 'default',

26.      },

27.    };

28.    if (env === 'production') {

29.      config.params = { url: 'http://bore.pub:25086/' }
30.    }

31.    return config;

32.  };




`![](https://csdnimg.cn/release/blogv2/dist/pc/img/newCodeMoreWhite.png)

请注意在上面，我们修改了 monitor 部分的 location 部分。我们可以通过如下的命令来列出可用的位置：

elastic-synthetics locations --url http://127.0.0.1:5601 --auth MU5VZWQ0a0JXdWJyOWhDdXlQeS06U2txQmFBajZTODZqR2hMOXlXVFhCQQ==

























1.  $ elastic-synthetics locations --url http://127.0.0.1:5601 --auth MU5VZWQ0a0JXdWJyOWhDdXlQeS06U2txQmFBajZTODZqR2hMOXlXVFhCQQ==
2.  Available locations: 
3.     * Beijing(private)





5.  Set default location for monitors via
6.    - Synthetics config file 'monitors.locations' | 'monitors.privateLocations' field
7.    - Monitor API 'monitor.use({ locations: ["japan"], privateLocations: ["custom-location"] }'

上面表明，我们当地的 Kibana 中含有一个位置 Beijing。

接下来，我们运行本地测试。如果本地测试通过了的话，那么我们再上传到 Kibana 中进行测试：

1.  $ pwd
2.  /Users/liuxg/nodejs/synthetics-replicator/apps/synthetics-replicator-tests
3.  $ npm install








5.  added 158 packages, and audited 159 packages in 28s





7.  18 packages are looking for funding
8.    run `npm fund` for details


10.  1 moderate severity vulnerability





12.  To address all issues, run:
13.    npm audit fix


15.  Run `npm audit` for details.
16.  $ cd ../../
17.  $ npm run test

19.  > synthetics-replicator@0.0.0 test
20.  > cd apps/synthetics-replicator-tests && npm run test


23.  > synthetics-replicator-tests@1.0.0 test
24.  > npx @elastic/synthetics journeys

27.  Journey: Recorded Order journey
28.     ✓  Step: 'Go to order items page' succeeded (7956 ms)
29.     ✓  Step: 'Add item to cart successfully' succeeded (247 ms)
30.     ✓  Step: 'Add 2nd item to cart successfully' succeeded (68 ms)
31.     ✓  Step: 'Add 3rd item to cart successfully' succeeded (66 ms)

33.  Journey: Replicator Order Journey
34.     ✓  Step: 'assert home page loads' succeeded (108 ms)
35.     ✓  Step: 'assert move to order page' succeeded (120 ms)
36.     ✓  Step: 'assert adding to order' succeeded (233 ms)



38.   7 passed (19801 ms)

很显然，我们的本地测试是成功的。这非常好！我们接下来把我们的测试上传到 Kibana 中。请注意在上面的本地测试中，我们使用的服务器地址是 http://localhost:**5173**/。为了能够使得传达 Kibana 中也能正常测试，我们必须使用地址 bore.pub:33741。为此，我们需要配置环境变量：

























1.  export NODE_ENV=production
2.  export SYNTHETICS_API_KEY=MU5VZWQ0a0JXdWJyOWhDdXlQeS06U2txQmFBajZTODZqR2hMOXlXVFhCQQ==

为了能够对轻量级 HTTP/S、TCP 和 ICMP 监测器提供支持，我们需要修改如下的文件：

























1.  $ pwd

2.  /Users/liuxg/nodejs/synthetics-replicator/apps/synthetics-replicator-tests/lightweight
3.  $ ls

4.  heartbeat.yml

我们需要把文件里的 urls 改成我们自己的。在这里，我们使用网上部署的网站来进行测试。

heartbeat.yml

























1.  heartbeat.monitors:
2.  - type: http
3.    name: Replicator HTTP ping
4.    id: synthetics-replicator-monitor-http
5.    enabled: true
6.    urls: "https://synthetics-replicator.netlify.app/"
7.    schedule: '@every 3m'
8.    timeout: 16s

注意：可能是由于 bore 带来的问题。在上述配置中，如果我选择配 urls 为 bore.pub:25086 的话，返回的 HTTP 结果不完整而导致错误。另外一种方法是使用 nginx 把 http://localhost:**5173**/ 映射到电脑的私有地址，这样我们就不必使用 bore 来变为共有地址。

接下来，我们运行如下的命令：

npm run push

上面显示我们的上传是成功的。我们回到 Kibana 的界面：

如上所示，当前的测试显示是绿色的。它表明所有的测试是成功的。我们可以点击进去其中的一个测试，比如 Replicator Order Journey：

我们点击进去其中的一个 journey：

我们可以查看一下 journey 的具体写法：

























1.  $ pwd
2.  /Users/liuxg/nodejs/synthetics-replicator/apps/synthetics-replicator-tests
3.  $ ls
4.  README.md            lightweight          package-lock.json    synthetics.config.ts
5.  journeys             node_modules         package.json
6.  $ cd journeys/
7.  $ ls
8.  orders-generated.journey.ts orders.journey.ts

orders.journey.ts

























1.  import { journey, step, monitor, expect, before } from '@elastic/synthetics';








3.  journey('Replicator Order Journey', ({ page, params }) => {
4.    // Only relevant for the push command to create
5.    // monitors in Kibana
6.    monitor.use({
7.      id: 'synthetics-replicator-monitor',
8.      schedule: 3,
9.    });



11.    before(async ()=> {
12.      await page.goto(params.url);
13.    });

15.    step('assert home page loads', async () => {
16.      const header = await page.locator('h1');
17.      expect(await header.textContent()).toBe('Replicatr');
18.    });


20.    step('assert move to order page', async () => {
21.      const orderButton = await page.getByTestId('order-button');
22.      await orderButton.click();

24.      const url = page.url();
25.      expect(url).toContain('/order');

27.      const menuTiles = await page.getByTestId('menu-item-card');
28.      expect(await menuTiles.count()).toBeGreaterThan(2);
29.    });

31.    step('assert adding to order', async () => {
32.      const addItemButtons = await page.getByTestId('add-item-button');
33.      expect(await addItemButtons.count()).toBeGreaterThan(10);


35.      const cartCount = await page.getByTestId('cart-count-label');
36.      expect(await cartCount.innerText()).toBe('0');

38.      await addItemButtons.first().click();
39.      expect(await cartCount.innerText()).toBe('1');

41.      await addItemButtons.nth(4).click();
42.      await addItemButtons.last().click();
43.      expect(await cartCount.innerText()).toBe('3');
44.    });
45.  });

从上面我们可以看出来：

该测试每隔 3 分钟做一次测试
首先它去首页，它显示的截图为：

紧接着查看 h1 里的文字是不是 Replicator：

 1.    step('assert home page loads', async () => {
2.      const header = await page.locator('h1');
3.      expect(await header.textContent()).toBe('Replicatr');
4.    });

如果是成功的话，就点击去 order 页面：

点击进入 order 页面：

 1.    step('assert move to order page', async () => {
2.      const orderButton = await page.getByTestId('order-button');
3.      await orderButton.click();








5.      const url = page.url();
6.      expect(url).toContain('/order');





8.      const menuTiles = await page.getByTestId('menu-item-card');
9.      expect(await menuTiles.count()).toBeGreaterThan(2);
10.    });

添加 order：

 1.    step('assert adding to order', async () => {
2.      const addItemButtons = await page.getByTestId('add-item-button');
3.      expect(await addItemButtons.count()).toBeGreaterThan(10);








5.      const cartCount = await page.getByTestId('cart-count-label');
6.      expect(await cartCount.innerText()).toBe('0');





8.      await addItemButtons.first().click();
9.      expect(await cartCount.innerText()).toBe('1');


11.      await addItemButtons.nth(4).click();
12.      await addItemButtons.last().click();
13.      expect(await cartCount.innerText()).toBe('3');
14.    });

在上面的代码中个：检测添加 button 多于 10 个。