phantomjs 使用_如何使用PhantomJS，React和无服务器框架构建GitHub机器人

白淇

2023-12-01

phantomjs 使用

by Pavel Vlasov

通过帕维尔·弗拉索夫(Pavel Vlasov)

如何使用PhantomJS，React和无服务器框架构建GitHub机器人 (How to build a GitHub bot with PhantomJS, React, and Serverless framework)

This tutorial is about building a simple Serverless bot that returns a chart with top GitHub repository contributors for a selected period. It is relevant to those who have some experience with React, JavaScript, TypeScript, Node.js, Amazon Web Services (AWS), and the Serverless framework.

本教程是关于构建一个简单的无服务器机器人，该机器人将返回一个图表，其中包含选定时期内GitHub仓库的主要贡献者。它与那些对React，JavaScript，TypeScript，Node.js，Amazon Web Services(AWS)和无服务器框架有一定经验的人有关。

You can check out the code on Github.

您可以在Github上检查代码。

我们将使用的服务和工具 (Services and tools we’ll be using)

Before jumping into coding, let’s do a quick overview of AWS services and tools that we’ll be using.

在开始编码之前，让我们快速概述一下我们将要使用的AWS服务和工具。

To retrieve top repository contributors, we will use GitHub stats API, the amazing Nivo to display data, Storybook to check how our chart looks and feels, PhantomJS to turn HTML into an image, and Serverless framework to interact with AWS.

为了检索主要的存储库贡献者，我们将使用GitHub stats API ，令人惊叹的Nivo来显示数据， Storybook来检查图表的外观和感觉， PhantomJS将HTML转换为图像以及Serverless框架与AWS交互。

让我们开始吧 (Let’s get started)

I’ll be using TypeScript. If you prefer ES6, you will need to configure Babel.

我将使用TypeScript。如果您喜欢ES6 ，则需要配置Babel 。

First, you have to create tsconfig.json in the root of your repository. Options to pay attention to include:

首先，您必须在存储库的根目录中创建tsconfig.json 。要注意的选项包括：

"module": "commonjs","target": "es5","lib": ["es6", "esnext.asynciterable"],"moduleResolution": "node","jsx": "react"

Then, we’ll create a simple API to query stats from GitHub. You can follow the file structure from the GitHub repo or use your own. For example:

然后，我们将创建一个简单的API来从GitHub查询统计信息。您可以遵循GitHub存储库中的文件结构，也可以使用自己的文件结构。例如：

To access the GitHub API, you’ll have to create a personal access token.

要访问GitHub API，您必须创建一个个人访问令牌。

This module simply sends the request with the provided token and retrieves the data.

该模块仅使用提供的令牌发送请求并检索数据。

显示图表 (Displaying the charts)

To display the data, we’ll use Nivo and Storybook. A simple component may look like this:

为了显示数据，我们将使用Nivo和Storybook。一个简单的组件可能看起来像这样：

First, setup Storybooks by running the following command in the root folder:

首先，通过在根文件夹中运行以下命令来设置Storybook：

npm i -g @storybook/cligetstorybook

Copy the .storybook folder into the root repository and replace all existing files. It contains the Webpack and Storybook configuration. Create a stories folder and put in a sample story for your component:

将.storybook文件夹复制到根存储库中，并替换所有现有文件。它包含Webpack和Storybook配置。创建一个stories文件夹，并为您的组件添加一个示例故事：

Run npm run storybook and open localhost in the browser. You should see the following result:

运行npm run storybook并在浏览器中打开localhost 。您应该看到以下结果：

Try to play with the options and test data. Storybook will change the look immediately.

尝试使用选项和测试数据。故事书将立即更改外观。

将HTML转换为PNG (Turning HTML into PNG)

Usually, chat systems like Facebook Messenger and Slack do not allow users to insert HTML cards in the dialog, so the next step will be to build a helper that renders HTML into a PNG image.

通常，诸如Facebook Messenger和Slack之类的聊天系统不允许用户在对话框中插入HTML卡，因此下一步将是构建一个将HTML渲染为PNG图像的助手。

Using a simple script with jsdom library, we can mimic browser behavior and serialize HTML, like this:

使用带有jsdom库的简单脚本，我们可以模仿浏览器行为并序列化HTML，如下所示：

createDomForChart returns a new instance of jsdom, and the chart function simply calls dom.serialize() when component rendering is done.

createDomForChart返回jsdom的新实例，并且在完成组件渲染后，chart函数仅调用dom.serialize() 。

With PhantomJS, we can turn markup into an image using this simple script:

使用PhantomJS，我们可以使用以下简单脚本将标记转换为图像：

We’re passing screenshot.js into the phantomjs executable path — along with an HTML string, width and height — and getting back buffer with the rendered image.

我们正在将screenshot.js以及HTML字符串，宽度和高度传递到phantomjs可执行路径中，并使用渲染的图像返回缓冲区。

You may notice that I’ve been using two PhantomJS binaries (for OS X and Linux). We’ll need the Linux version further in an AWS environment. You can download them from PhantomJS.org or use files from the repository.

您可能会注意到，我一直在使用两个PhantomJS二进制文件(用于OS X和Linux)。在AWS环境中，我们将进一步需要Linux版本。您可以从PhantomJS.org下载它们，也可以使用存储库中的文件。

捆绑一切 (Tying everything up)

Now, let’s create lambda to handle requests. I recommend putting PNG rendering logic into a separate service. Because PhantomJS binary is approximately 50 mb in size, it slows down deployment if you change anything in the API. Also, you can reuse this lambda for other purposes.

现在，让我们创建lambda来处理请求。我建议将PNG渲染逻辑放入单独的服务中。因为PhantomJS二进制文件的大小约为50 mb，所以如果您在API中进行任何更改，它会减慢部署速度。另外，您可以将此lambda重用于其他目的。

We’ll start by creating webpack.config.ts (to bundle source code) and serverless.base.js (to define the base serverless configuration) in the root folder.

我们将通过创建开始webpack.config.ts (到束源代码)和serverless.base.js在根文件夹(定义无服务器基础结构)。

If you want to know more about use cases of serverless JavaScript configurations, you can read about it in my previous article.

如果您想了解有关无服务器JavaScript配置的用例的更多信息，可以在我的上一篇文章中进行阅读。

You’ll have to change deployment and image bucket names, like this:

您必须更改部署和映像存储桶名称，如下所示：

deploymentBucket: {    name: 'com.github-stats....deploys'},environment: {    BUCKET: 'com.github-stats....images',    GITHUB_TOKEN: '${env:GITHUB_TOKEN}',    SLACK_TOKEN: '${env:SLACK_TOKEN},    STAGE: '${self:provider.stage}'},

This is because the name of the bucket has to be globally unique.

这是因为存储桶的名称必须是全局唯一的。

将HTML转换为PNG服务 (Turning HTML to PNG service)

First of all, we’ll create a handler that will return a URL of the generated image. The handler should validate and process the request body:

首先，我们将创建一个处理程序，该处理程序将返回所生成图像的URL。处理程序应验证并处理请求正文：

…and if everything is ok, it should generate the image and put it into an S3 bucket.

…如果一切正常，它将生成图像并将其放入S3存储桶。

Let’s create webpack.config.ts to bundle source files. We’ll use the copy-webpack-plugin and webpack-permissions-plugin to include PhantomJS binaries into a bundle — and give permissions for execution. This will require us to run the deploy command with sudo since Webpack doesn’t have permissions to modify file system rights by default.

让我们创建webpack.config.ts来捆绑源文件。我们将使用copy-webpack-plugin和webpack-permissions-plugin将PhantomJS二进制文件包含在一个包中-并授予执行权限。这将要求我们使用sudo运行deploy命令，因为Webpack默认情况下没有修改文件系统权限的权限。

The last step will be using the serverless.js file to tie our handler with an API Gateway event.

最后一步将使用serverless.js文件将处理程序与API Gateway事件绑定在一起。

Now, we need to perform the same steps for stats handler, but we don’t have to make any changes to webpack.config.ts.

现在，我们需要对stats handler执行相同的步骤，但是不必对webpack.config.ts.进行任何更改webpack.config.ts.

The only difference is an additional permission to invoke lambda:

唯一的区别是附加调用lambda的权限：

iamRoleStatements: [                           ...baseConfig.provider.iamRoleStatements,{    Effect: 'Allow',    Action: ['lambda:InvokeFunction'],    Resource: ['*']}]

设置Slack机器人 (Setting up the Slack bot)

The last step will be to create a service that will handle message events for the bot. To keep it simple, we’ll handle only mention events. Let’s set up the basic event handler.

最后一步是创建一个服务，该服务将处理机器人的消息事件。为简单起见，我们将仅处理提及事件。让我们设置基本的事件处理程序。

We have to handle a verification event from Slack and respond with 200 status and challenge parameters:

我们必须处理来自Slack的验证事件，并以200个状态和挑战参数进行响应：

callback(null, {   body: JSON.stringify({     challenge: (slackEvent as VerificationEvent).challenge   }),   statusCode: 200});

To properly handle a Slack event, the endpoint has to reply within 3000 milliseconds (3 seconds), so we’ll have to immediately respond and asynchronously send a follow-up message using postMessage API.

为了正确处理Slack事件，端点必须在3000毫秒(3秒)内进行回复，因此我们必须立即响应并使用postMessage API异步发送后续消息。

In the code above, we parsed the message text to extract a repository name and called out an image stats lambda to retrieve an image URL and send a message back to Slack. You can find the full code of the handler here.

在上面的代码中，我们解析了消息文本以提取存储库名称，并调用了一个图像统计数据lambda来检索图像URL并将消息发送回Slack。您可以在此处找到处理程序的完整代码。

Code for serverless.js and Webpack configurations would be similar to the stats service, so if you have problems with setting it up, take a look at the full source code.

用于serverless.js和Webpack配置的代码将类似于stats服务，因此，如果在设置时遇到问题，请查看完整的源代码。

创建一个Slack应用 (Creating a Slack app)

Now let’s create a new Slack app. Go to the Slack API, create a new account (if you have not already done so), create a new app, and add the bot scope in the scopes section.

现在，让我们创建一个新的Slack应用。转到Slack API ，创建一个新帐户(如果尚未创建)，创建一个新应用，然后在“作用域”部分中添加机器人作用域。

Go to the “OAuth & Permissions” section in the sidebar.

转到侧栏中的“ OAuth和权限”部分。

Add the bot user scope.

添加机器人用户范围。

Then, you’ll be able to install the app to your organization and get access to tokens.

然后，您将能够将应用安装到您的组织中并获得对令牌的访问权限。

部署服务 (Deploying the services)

You’ll have to install a serverless framework version greater than 1.26 because earlier versions do not support JavaScript configuration files. And I recommend installing slx to simplify the deployment of multiple services.

您必须安装大于1.26的无服务器框架版本，因为早期版本不支持JavaScript配置文件。我建议安装slx，以简化多个服务的部署。

npm install -g serverlessnpm install -g serviceless

Copy the GitHub and Slack bot tokens, and set them to GITHUB_TOKEN and SLACK_TOKEN environment variables accordingly. Run the following command in the terminal:

复制GitHub和Slack机器人令牌，并将它们分别设置为GITHUB_TOKEN和SLACK_TOKEN环境变量。在终端中运行以下命令：

sudo GITHUB_TOKEN=<your token> SLACK_TOKEN=<your slack token> slx deploy all

As mentioned above, we need sudo to set execute permissions to PhantomJS binaries.

如上所述，我们需要sudo来设置PhantomJS二进制文件的执行权限。

Be patient! Deployment may take a while. At the end you should see a similar output:

耐心一点！部署可能需要一段时间。最后，您应该看到类似的输出：

Deployment completed successfuly

[app/html-to-png] [completed]:Service Informationservice: html-to-pngstage: devregion: us-east-1stack: html-to-png-devapi keys:   Noneendpoints:   Nonefunctions:   renderToPng: html-to-png-dev-renderToPngServerless: Removing old service versions...[app/slack] [completed]:Service Informationservice: git-stats-slackstage: devregion: us-east-1stack: git-stats-slack-devapi keys:   Noneendpoints:   POST - https://xxxxxxx.execute-api.us-east-1.amazonaws.com/dev/stats/slack/event-handlerfunctions:   eventHandler: git-stats-slack-dev-eventHandlerServerless: Removing old service versions...[app/stats] [completed]:Service Informationservice: git-statsstage: devregion: us-east-1stack: git-stats-devapi keys:   Noneendpoints:   GET - https://xxxxxx.execute-api.us-east-1.amazonaws.com/dev/stats/contributors/{owner}/{repo}functions:   getContributorStatsImage: git-stats-dev-getContributorStatsImageServerless: Removing old service versions...

The last step will be to subscribe our endpoint to bot mention events.

最后一步将是使我们的端点订阅机器人提及事件。

Select the “Event Subscription” section in the Slack API navigation.

在Slack API导航中选择“事件订阅”部分。

Then paste the event handler URL that you can find in the deploy command output.

然后粘贴事件处理程序URL，您可以在deploy命令输出中找到该URL。

Time to play around a bit! Here are some examples of rendered images:

该玩点时间了！以下是渲染图像的一些示例：

serverless/serverless

无服务器/无服务器

facebook/react

Facebook /React