基于 Axios 的 HTTP 测试工具解决方案

1. 方案背景

Serverless 的广泛应用使得创建 HTTP/HTTPS 接口变得越发容易，但是如何以贴近实际使用场景的方式访问和测试这些接口仍然是一个问题。Axios^[1]作为业界流行的开发库广泛用于浏览器、H5 和移动端，在其之上构建可视化 UI 用于访问和测试 HTTP/HTTPS 接口可以达到更加贴近实际应用场景的目的。本方案基于 Axios 构建可视化 UI，支持一键安装部署，支持免费套餐，助力用户在成本极低的情况下尽早发现和排除潜在问题、缺陷和风险，加快应用的构建、迭代速度，获得商业上的成功。

2. 方案描述

下图展示了基于 Axios 的 HTTP 测试工具的整体架构，在 Amazon VPC^[2]的公有子网中启动 Amazon EC2^[3]实例，实例上安装 Apache Http Server^[4]，在 Apache Http Server 中部署 Axios 的 HTML 和 JavaScript 代码。

图 1：基于 Axios 的 HTTP 测试工具

Axios：业界流行的 JavaScript 库，用于进行 HTTP 请求，它基于 Promise 的 HTTP 客户端，可在浏览器环境中使用，能够方便地执行 HTTP 请求并处理响应数据。

Amazon VPC：Amazon VPC（Amazon Virtual Private Cloud）在逻辑隔离的虚拟网络中定义和启动 AWS 资源，能够全面地控制虚拟网络环境，包括资源放置、连接性和安全性。

Amazon EC2：Amazon EC2 提供安全、可靠、高性能且经济高效的计算基础设施，以满足苛刻的业务需求。

Apache Http Server：世界上最流行的 Web 服务器之一，由 Apache 软件基金会维护和开发，它是一个开源的、跨平台的 Web 服务器软件，用于提供 Web 内容并处理 HTTP 请求。

3. 方案部署

本解决方案需要通过 AWS CloudFormation^[5]服务进行一键部署。AWS CloudFormation 通过将基础设施视为代码来建模、预置和管理 AWS 和第三方资源。本方案包含一个所有所需 AWS 资源的 CloudFormation 模板，CloudFormation 将负责启动和配置这些资源，无需额外的人工创建和手动配置过程。

3.1 前提条件

请从 github 克隆或下载部署方案的源代码仓库，如果已经安装了 git，请在终端中运行以下命令：

git clone https://github.com/aws-samples/axios-based-http-testing-tool.git

运行命令的效果如下图所示：

如果没有安装 git，可以通过 github 网站下载源代码仓库，访问链接：https://github.com/aws-samples/axios-based-http-testing-tool，点击“Donwload ZIP”将源代码仓库下载到本地，解压缩下载后的文件：

解压缩后的目录结构如下：

目录中的“Axios-Based-HTTP-Testing-Tool.yaml”文件是 CloudFormation 模板，将在后续部署步骤中被使用。

3.2 部署

打开 CloudFormation 控制台，单击“Create stack”按钮并选择“With new resources（standard）”选项：

进入“Create stack”步骤，在“Prerequisite – Prepare template”部分选择“Template is ready”，在“Specify template”部分中选择“Upload a template file”，然后单击“Choose file”按钮，打开文件上传窗口：

在文件上传窗口中选择“Axios-Based-HTTP-Testing-Tool.yaml”：

选择文件后，“Choose file”按钮旁边会出现文件名“Axios-Based-HTTP-Testing-Tool.yaml”，单击“Next”按钮：

进入“Specify stack details”步骤，在“Stack name”部分中输入堆栈名称，然后在“Parameters”部分中的“KeyName”选项中选择用于登陆 EC2 实例的密钥，“LatestAmiId”中的默认值代表“Amazon Linux 2”的最新 AMI，单击“Next”按钮：

在“Configure stack options”步骤中，保留默认值即可：

单击“Next”按钮继续：

下一步是“Review”，在这里可以审核刚刚所做的所有配置，检查无误后单击“Submit”按钮开始资源的创建：

在资源创建的过程中，可以通过“Events”面板查看事件，通过单击“Refresh”按钮手动刷新事件：

当创建进度完成后，我们可以切换到“Outputs”面板，面板中会显示用于访问刚创建好的 Axios 的 URL：

访问该 URL，现实 Axios 的 HTTP 测试工具 UI 即代表成功完成了部署：

3.3 验证

根据要测试的 API 信息，填写 URL、Method、Params 和 Headers 字段，请注意，在 Params 和 Headers 字段中使用有效的 JSON，然后单击“发送请求”按钮，请求的相关信息将显示在“Request”部分中， 请求的结果将显示在“Response”部分：

如果请求 API 的过程出现问题，错误信息将出现在“ERROR”部分：

4. 方案优势

本方案拥有如下优势：

1. 简单方便：通过一键部署的模版，用户在 Amazon 上通过几分钟的时间即可构建出功能完善的可视化 UI 用来访问和测试 HTTP/HTTPS 接口。
2. 功能完善：支持 HTTP 协议的常用方法，支持自定义参数、请求头，支持请求结果、响应头的展示，界面友好，容易操作，轻松上手。
3. 性价比高：使用 Amazon EC2 作为可视化 UI 的 Web 服务器，支持免费套餐中的 Amazon EC2 机型，成本可控，性价比高。

[1] Axios: https://github.com/axios/axios

[2] Amazon VPC: https://thinkwithwp.com/cn/vpc

[3] Amazon EC2: https://thinkwithwp.com/cn/ec2

[4] Apache Http Server: https://httpd.apache.org

[5] AWS CloudFormation: https://thinkwithwp.com/cn/cloudformation

本篇作者