lighthouse使用
CircleCI is a popular tool for orchestrating CI/CD pipelines. Lighthouse is an open-source project from Google for improving the quality of web pages. It provides user-centric metrics to audit SEO, performance, accessibility, best practices, and progressive web apps.
CircleCI是用于编排CI / CD管道的流行工具。 Lighthouse是Google的一项开源项目，旨在提高网页质量。 它提供了以用户为中心的指标，以审核SEO，性能，可访问性，最佳实践和渐进式Web应用程序。
For a deeper dive about Lighthouse you can read “How to analyze website performance with Lighthouse”.
要深入了解Lighthouse，您可以阅读“ 如何使用Lighthouse分析网站性能 ”。
By combining these forces, we can establish website quality automation. This post will demonstrate the following:
通过结合这些力量，我们可以建立网站质量自动化。 这篇文章将演示以下内容：
CircleCI Orbs are shareable packages of configuration elements, including jobs, commands, and executors you use in your workflows. This post will provide a guide for using the Lighthouse Check CircleCI Orb for automating Lighthouse audits.
CircleCI Orb是可共享的配置元素包，包括您在工作流程中使用的作业，命令和执行程序。 这篇文章将提供使用Lighthouse Check CircleCI Orb自动进行Lighthouse审核的指南。
Below is a minimal example and all we need to run Lighthouse automatically on any code change 🧙 In this example both https://www.foo.software and https://www.foo.software/contact will be audited.
下面是一个最小的示例，我们需要在任何代码更改时自动运行Lighthouse的所有内容🧙在此示例中，将审核https://www.foo.software和https://www.foo.software/contact 。
version: 2.1orbs:lighthouse-check: foo-software/lighthouse-check@0.0.8jobs:test: executor: lighthouse-check/defaultsteps:- lighthouse-check/audit:urls: https://www.foo.software,https://www.foo.software/contactworkflows:test:jobs:- testWith this minimal setup we have a summary provided in the output of our job. We also have full HTML reports saved as CircleCI "artifacts".
通过这种最小的设置，我们在工作的输出中提供了摘要。 我们还将完整HTML报告保存为CircleCI“工件” 。
Lighthouse Check CircleCI Orb offers a complete set of bells and whistles by utilizing lighthouse-check NPM module under the hood. There’s so much more we can do with this. Let’s proceed!
Lighthouse Check CircleCI Orb通过使用引擎盖下的lighthouse-check NPM模块提供了一整套的铃声。 我们可以做更多的事情。 让我们继续吧！
By utilizing this feature, comments are posted with Lighthouse results on every commit. We can do so by following the steps below.
通过使用此功能，每次提交时，评论将与Lighthouse结果一起发布。 我们可以按照以下步骤进行操作。
Create a personal access token from this user account.
从此用户帐户创建个人访问令牌 。
Create a CircleCI environment variable in your project to hold the encrypted value from above. In our example we name it LIGHTHOUSE_CHECK_GITHUB_ACCESS_TOKEN.
在您的项目中创建一个CircleCI环境变量以保存上面的加密值。 在我们的示例中，我们将其命名为LIGHTHOUSE_CHECK_GITHUB_ACCESS_TOKEN 。
+ prCommentAccessToken: $LIGHTHOUSE_CHECK_GITHUB_ACCESS_TOKEN
+ prCommentUrl: https://api.github.com/repos/foo-software/lighthouse-check-orb/pulls/${CIRCLE_PULL_REQUEST##*/}/reviews
urls: https://www.foo.software,https://www.foo.software/contactThe updates above provides a token to authorize comments on a corresponding pull request. prCommentUrl should be an endpoint in the format specified by the GitHub API. Your endpoint will be similar but with owner and repo params replaced ( foo-software/lighthouse-check-orb ). With this, we’ve created a bot to post Lighthouse results on pull requests 💥
上面的更新提供了令牌，可以授权对相应拉取请求的注释。 prCommentUrl应该是GitHub API指定的格式的端点。 您的端点将类似，但是owner和存储repo参数已替换( foo-software/lighthouse-check-orb )。 这样，我们创建了一个机器人，可以在请求请求中发布Lighthouse结果Lighthouse
In our example we persist results by uploading reports as artifacts in our job. This solution could be sufficient in some cases, but artifacts aren’t stored permanently. In order to view reports, we need to navigate into the workflow and manually download reports from the artifact view.
在我们的示例中，我们通过在工作中将报告作为工件上传来保持结果。 在某些情况下，此解决方案可能就足够了，但不会永久存储工件。 为了查看报告，我们需要导航到工作流程并从工件视图手动下载报告。
But what if we want a more dependable way of storing and referencing reports? This is where the S3 feature comes into play. We can configure AWS S3 storage by following the below steps.
但是，如果我们想要一种更可靠的存储和引用报告的方式呢？ 这就是S3功能发挥作用的地方。 我们可以按照以下步骤配置AWS S3存储。
Create an AWS account if you don’t already have one.
如果您尚未创建一个AWS账户 ，请创建一个。
Create an S3 bucket if you don’t already have one.
如果您还没有一个S3存储桶 ，请创建一个。
Acquire an AWS access key id and secret access key.
获取AWS访问密钥ID和秘密访问密钥 。
Create a CircleCI environment variables for these two values. In our example we’ll use LIGHTHOUSE_CHECK_AWS_ACCESS_KEY_ID and LIGHTHOUSE_CHECK_AWS_SECRET_ACCESS_KEY, respectively.
为这两个值创建一个CircleCI环境变量 。 在我们的示例中，我们将分别使用LIGHTHOUSE_CHECK_AWS_ACCESS_KEY_ID和LIGHTHOUSE_CHECK_AWS_SECRET_ACCESS_KEY 。
Add the bucket name and region (example: us-east-1) as CircleCI environment variables: LIGHTHOUSE_CHECK_AWS_BUCKET and LIGHTHOUSE_CHECK_AWS_REGION.
添加存储桶名称和区域 (例如： us-east-1 )作为CircleCI环境变量： LIGHTHOUSE_CHECK_AWS_BUCKET和LIGHTHOUSE_CHECK_AWS_REGION 。
Next, we’ll update our configuration with the following diff.
接下来，我们将使用以下差异更新配置。
+ awsAccessKeyId: $LIGHTHOUSE_CHECK_AWS_ACCESS_KEY_ID
+ awsBucket: $LIGHTHOUSE_CHECK_AWS_BUCKET
+ awsRegion: $LIGHTHOUSE_CHECK_AWS_REGION
+ awsSecretAccessKey: $LIGHTHOUSE_CHECK_AWS_SECRET_ACCESS_KEY
prCommentUrl: https://api.github.com/repos/foo-software/lighthouse-check-orb/pulls/${CIRCLE_PULL_REQUEST##*/}/reviewsIn our next commit and push, reports are automatically uploaded to S3 ✅! We also have a them linked in our PR comments.
在我们的下一次提交和推送中，报告将自动上传到S3✅！ 我们的PR评论中也链接了它们。
What’s a new feature in a DevOps workflow without Slack notifications? A sad one indeed. Let’s ramp things up by adding notifications to a Slack channel for our whole team to see. We can accomplish this in the below steps.
没有Slack通知的DevOps工作流程中的新功能是什么？ 确实是一个悲伤的人。 让我们通过在Slack频道中添加通知以使整个团队都可以看到的方式来提高工作效率。 我们可以通过以下步骤完成此操作。
Create an “Incoming Webhook” in your Slack workspace and authorize a channel.
在您的Slack工作区中创建一个“传入Webhook”并授权频道 。
Add the Webhook URL as a CircleCI environment variable — LIGHTHOUSE_CHECK_SLACK_WEBHOOK_URL.
将Webhook URL添加为CircleCI环境变量— LIGHTHOUSE_CHECK_SLACK_WEBHOOK_URL 。
+ slackWebhookUrl: $LIGHTHOUSE_CHECK_SLACK_WEBHOOK_URL
urls: https://www.foo.software,https://www.foo.software/contactOur next commit and push introduces Slack notifications! The “Lighthouse audit” link in the below screenshot navigates to the S3 report as configured ✨
我们的下一次提交和推送将引入Slack通知！ 以下屏幕截图中的“灯塔审核”链接导航到已配置的S3报告✨
At this point our complete "advanced example" configuration looks like the below.
至此，我们完整的“高级示例”配置如下所示。
usage:version: 2.1orbs:lighthouse-check: foo-software/lighthouse-check@0.0.8jobs:test: executor: lighthouse-check/defaultsteps:- lighthouse-check/audit:awsAccessKeyId: $LIGHTHOUSE_CHECK_AWS_ACCESS_KEY_IDawsBucket: $LIGHTHOUSE_CHECK_AWS_BUCKETawsRegion: $LIGHTHOUSE_CHECK_AWS_REGIONawsSecretAccessKey: $LIGHTHOUSE_CHECK_AWS_SECRET_ACCESS_KEYprCommentAccessToken: $LIGHTHOUSE_CHECK_GITHUB_ACCESS_TOKENprCommentUrl: https://api.github.com/repos/foo-software/lighthouse-check-orb/pulls/${CIRCLE_PULL_REQUEST##*/}/reviewsslackWebhookUrl: $LIGHTHOUSE_CHECK_SLACK_WEBHOOK_URLurls: https://www.foo.software,https://www.foo.software/contactworkflows:test:jobs:- testFoo’s Automated Lighthouse Check is tool we can use to manage a historical record of Lighthouse audits. We can connect to it with the Lighthouse Check Orb! By doing so you can run Lighthouse remotely versus in a local, dockerized CircleCI environment. With this we can be assured our Lighthouse results aren't flaky from CircleCI infrastructure change. Follow the documented steps to connect with Automated Lighthouse Check.
Foo的自动灯塔检查是我们可以用来管理灯塔审计历史记录的工具。 我们可以使用Lighthouse Check Orb连接它！ 这样，您可以在本地dockerized CircleCI环境中远程运行Lighthouse。 有了这一点，我们可以确信，CircleCI基础架构的变化不会使我们的Lighthouse结果不稳定。 请按照记录的步骤连接“自动灯塔检查” 。
You can find other of examples of Lighthouse Check Orb usage on GitHub. I hope this article has provided a helpful addition to your DevOps workflow! With Lighthouse integrated in a CI/CD pipeline, we can stay fully equipped to ensure high quality in website SEO, performance, accessibility, best practice, and progressive web apps.
您可以在GitHub上找到其他有关Lighthouse Check Orb用法的示例。 希望本文为您的DevOps工作流程提供了有益的补充！ 通过将Lighthouse集成到CI / CD管道中，我们可以保持设备齐全，以确保网站SEO，性能，可访问性，最佳实践和渐进式Web应用程序的高质量。
翻译自: https://www.freecodecamp.org/news/how-to-use-lighthouse-in-circleci/
lighthouse使用
版权声明：本站所有资料均为网友推荐收集整理而来,仅供学习和研究交流使用。
工作时间：8:00-18:00
客服电话
电子邮件
admin@qq.com
扫码二维码
获取最新动态
