借助 Amplify 控制台的 Pull 请求预览和 Cypress 测试功能来改进您的应用程序测试流程

Amplify 控制台让开发人员可以针对全堆栈式无服务器 Web 应用程序的持续部署和托管，轻松配置基于 Git 的工作流程。全堆栈式无服务器应用程序由后端资源（如 GraphQL API、数据和文件存储、身份验证或分析）组成，并且与前端框架（如 React、Gatsby 或 Angular）集成。您可以在我之前撰写的文章中了解有关 Amplify 控制台的更多信息。

今天，我们宣布推出创建预览 URL 以及可在将代码发布到生产环境之前借助 Pull 请求执行端到端测试的功能。

Pull 请求预览
现在，您可以配置 Amplify 控制台，以便在每次开发人员向您的 Git 存储库提交 Pull 请求时将应用程序部署到一个唯一的 URL。预览 URL 与生产现场所使用的 URL 完全不同。在将 Pull 请求合并到代码存储库的主分支，并在 Amplify 控制台中触发新版本之前，您可以预览更改。对于已通过 Amplify CLI 预配置后端环境的全堆栈式应用程序，每个 Pull 请求都会生成一个临时后端，该后端会在 Pull 请求关闭时被删除。您可以在与生产环境完全隔离的情况下测试更改。Amplify 控制台仅在私有 Git 存储库上针对 Pull 请求创建后端基础架构。这样可以避免因处理未经同意的 Pull 请求而产生额外的成本。

为向您说明其工作原理，我们启动一个具有云端身份验证后端的 Web 应用程序，并将其部署到 Amplify 控制台。首先，我创建一个 React 应用程序（请查看此处了解如何安装 React）。

npx create-react-app amplify-console-demo                                                
cd amplify-console-demo

接下来，我初始化 Amplify 环境（先了解一下如何安装 Amplify CLI）。添加一个由 Amazon Cognito 提供支持的云端身份验证后端。接受 Amplify CLI 给出的所有默认应答。

npm install aws-amplify aws-amplify-react
amplify init
amplify add auth
amplify push

然后，我通过修改 src/App.js 添加前端身份验证用户界面。您可以在 AWS Amplify 文档中找到这些代码。准备就绪后，我启动本地开发服务器以在本地测试应用程序。

npm run start

我将浏览器指向 http://localhost:8080 以验证基架（以下屏幕截图截取自我的 AWS Cloud 9 开发环境）。我通过单击创建账户创建一个用户，然后验证注册流程，并对应用程序进行身份验证。

注册完成后，我可以看到应用程序页面。

这里有两个重要的细节需要注意。首先，我使用的是一个私有 GitHub 存储库。Amplify 控制台仅在私有存储库上针对 Pull 请求创建后端基础架构，以避免为未经同意的 Pull 请求创建不必要的基础架构。其次，Amplify 控制台构建过程仅在 package-lock.json 中查找依赖项。这就是我使用 npm（而不是 yarn）添加 amplify 包的原因。

当我对自己的应用程序感到满意后，我将代码推送到 GitHub 存储库（假设我已执行 git remote add origin ... 命令）。

git add amplify
git commit -am "initial commit"
git push origin master

下一步需要配置 Amplify 控制台，以便在每次提交 Git 时构建和部署我的应用程序。我登录 Amplify 控制台，单击连接应用程序，选择 GitHub 作为存储库，然后单击继续（首次执行此操作时，我需要使用我的 GitHub 用户名和密码在 GitHub 上进行身份验证）

我选择我的存储库和想要使用的分支作为源：

Amplify 控制台会检测项目类型并给出一个构建文件。我选择我的环境 (dev) 的名称。首次使用 Amplify 控制台时，我需要按照说明新建一个服务角色。此角色可以授权 Amplify 控制台代表我访问 AWS 后端服务。

我单击下一步，检查设置然后单击保存并部署。几秒钟或几分钟后，我的应用程序就准备就绪了。我可以将浏览器指向部署 URL 并验证应用程序是否可以正常运行。

现在，我们来启用 Pull 请求的预览。在左侧菜单中，依次单击预览和启用预览。要启用预览，Amplify 控制台需要我在 GitHub 账户中安装一个应用程序。我按照控制台提供的说明来配置我的 GitHub 账户。设置完成后，我选择分支，并单击管理以启用/禁用 Pull 请求预览。（我可以随时从我的 GitHub 账户中卸载 Amplify 应用程序，方法是访问我的 GitHub 账户设置的“应用程序”部分。）

机制已经准备就绪，我们来创建一个 Pull 请求。

我直接在 GitHub 上编辑 App.js。我通过自定义 withAuthenticator 组件将登录按钮的颜色从橙色更改为绿色。保存更改并创建一个 Pull 请求。

在 Pull 请求详细信息页面上，我单击显示所有检查项以获取 Amplify 控制台测试的状态。我看到系统正在处理 AWS Amplify 控制台 Web 预览。Amplify 控制台会创建一个完整的后端环境来测试 Pull 请求、构建和部署前端。

最后，我看到所有检查项都已通过和一个绿色标记。我单击详细信息以获取预览 URL。如果出现错误，您可以在 Amplify 控制台中查看构建阶段的详细日志文件。

我也可以在 Amplify 控制台中查看预览状态。

我将我的浏览器指向预览 URL 以测试更改。我可以看到绿色的登录按钮（而不是橙色的）。

当我尝试使用之前创建的用户名和密码进行身份验证时，我收到一条内容为用户不存在的错误消息，因为此预览 URL 指向与主应用程序不同的后端。我可以在 Cognito 控制台中看到分别属于两种环境的两个 Cognito 用户池。

我可以使用与用于主 URL 的类似的访问控制设置来访问可以预览 URL 的用户。

当我对给出的更改感到满意后，我将在 GitHub 上合并 Pull 请求，以触发新的构建并将更改部署到生产环境。Amplify 控制台会在合并完成后删除预览环境。为 Pull 请求所创建的临时后端环境也会被删除。

Cypress 测试
除了在将更改合并到主分支之前预览更改的功能外，我们还添加了在构建过程中执行端到端测试的功能。您可以使用您最爱的测试框架将单元或端到端测试添加到您的应用程序中，并在构建阶段自动执行测试。在您使用 Cypress 测试框架时，Amplify 控制台会检测源树中的测试情况，并自动将测试阶段添加到应用程序构建过程中。

只有通过所有测试的项目才会从您的管道被下推至部署阶段。您可以了解有关此内容的更多信息，并按照我们几周前发表的分步说明操作即可。

这两个 Amplify 控制台新增功能可以让您对管道稳定性和交付给生产环境的代码质量方面更加有信心。

可用性
现在，Web 预览功能已在已发布 AWS Amplify 控制台的所有区域推出，并且无需在常规 Amplify 控制台定价的基础上支付额外费用。借助 AWS 免费使用套餐，您可以免费开始使用。注册之后，AWS 新客户在构建和部署功能方面，每月可以获得 1000 分钟的构建时间；在托管功能方面，每月可以获得 15GB 的服务空间和 5GB 的数据存储空间。

— seb