aws lambda

Yes, you read that right: this article is about running Google Chrome (the browser) in AWS Lambda (the serverless computing platform). Why would anyone run a browser on the server[less] side? Is this some web version of “Will It Blend?”

是的，您没看错：本文是关于在AWS Lambda(无服务器计算平台)中运行Google Chrome(浏览器)。 为什么有人会在服务器[less]端运行浏览器？ 这是“ 会融合吗？ ”的某些网络版本吗？ ”

As much as I would love to see (or do) a serverless “Will It Blend?” series that runs weird things in AWS Lambda, this is not it.

我非常希望看到(或这样做)无服务器的“它会融合吗？” 系列在AWS Lambda中运行奇怪的事情，不是吗。

But what is this article, then? Ok, it’s story time!

但是，这篇文章是什么呢？ 好，现在是故事时间！

Once upon a time at Cloud Horizon we worked with a client that had some weird SVGs that needed to be converted to PNGs. None of the SVG-to-PNG tools were working, because the SVGs contained <foreignObject> elements.

很久以前，在Cloud Horizo​​n中，我们与一个客户合作，该客户有一些需要转换为PNG的怪异SVG。 SVG到PNG的工具都不起作用，因为SVG包含<foreignObject>元素。

This problem could’ve been solved in many different ways. The optimal solution would’ve been to analyze why they had HTML elements embedded in SVG files. But, as is often case in real-world projects, the reason was hidden behind a pile of legacy code and legacy decisions. And, of course, a solution was required ASAP.

这个问题可以通过许多不同的方式解决。 最佳解决方案是分析为什么它们在SVG文件中嵌入HTML元素。 但是，就像在现实世界中的项目中那样，原因被隐藏在一堆遗留代码和遗留决策的背后。 而且，当然，需要尽快找到解决方案。

The quest for the perfect solution became the quest for the fastest decent solution in the given circumstances.

在特定条件下，寻求完美解决方案的要求成为了寻求最快体面解决方案的要求。

The foreign objects in the SVGs were HTML elements, and the best tool for showing HTML elements is a browser. But how could we use the browser to solve this issue?

SVG中的异物是HTML元素，而显示HTML元素的最佳工具是浏览器。 但是，我们如何使用浏览器解决此问题？

Manually, we would open an SVG in the browser and take a screenshot. We should’ve be able to do the same with PhantomJS, a headless WebKit scriptable with a JavaScript API. We tried, but it didn’t work, because of the lack of support for SVG foreign objects in PhantomJS.

手动，我们将在浏览器中打开一个SVG并截图。 我们应该能够对PhantomJS进行同样的操作， PhantomJS是一个无头WebKit，可使用JavaScript API编写脚本。 我们进行了尝试，但由于PhantomJS中缺少对SVG异物的支持而无法正常工作。

What else could we use? Imagine using Chrome the way we would use PhantomJS. Wait! We might be able do it. Someone from the team had read about headless Chrome recently. That sounded like a perfect tool for our weird problem. We tried to use headless Chrome and it worked!

我们还能使用什么？ 想象一下使用Chrome就像使用PhantomJS一样。 等待！ 我们也许可以做到。 团队中的某人最近阅读了有关无头Chrome的信息 。 这听起来像是解决我们怪异问题的完美工具。 我们尝试使用无头的Chrome，而且效果很好！

解决问题而又不伤自己的未来 (Solve the problem without hurting your future self)

Finally, we had a viable solution. But, we needed to figure out how to integrate this solution into client’s application without adding an extra layer of future legacy code.

最后，我们找到了可行的解决方案。 但是，我们需要弄清楚如何将此解决方案集成到客户的应用程序中，而又不增加将来的旧代码的额外层。

Our client used AWS, and SVGs files were in the Amazon S3 bucket. That gave us the opportunity to use serverless for the SVG to PNG converter.

我们的客户使用AWS，而SVG文件位于Amazon S3存储桶中。 这为我们提供了将无服务器用于SVG到PNG转换器的机会。

Serverless solutions are cheap, and for this kind of converter it was free, so we didn’t need permission to use it. That, and the fact that the infrastructure didn’t need any setup, allowed us to move fast. Another big win was an isolation, which allowed us to work without understanding the legacy code. Also, our serverless converter would be easy to remove in the future.

无服务器解决方案很便宜，而且对于这种转换器来说，它是免费的，因此我们不需要使用它的许可。 这样，而且基础架构不需要任何设置，这一事实使我们能够快速行动。 另一个大的胜利是隔离，这使我们能够在不了解旧代码的情况下工作。 而且，我们的无服务器转换器将来很容易删除。

A quick note: Serverless is a method of deploying and running applications on cloud infrastructure, on a pay-per-use basis, and without renting or buying servers. To learn more about serverless and how it works with AWS, see the free first chapter of our new book “Serverless Applications with Node.js” here.

快速说明： 无服务器是一种在按需付费的基础上，无需租用或购买服务器的情况下，在云基础架构上部署和运行应用程序的方法。 要了解有关无服务器及其如何与AWS一起使用的更多信息，请参见此处的新书“带有Node.js的无服务器应用程序”的免费第一章。

As shown in the diagram below, our plan was the following:

如下图所示，我们的计划如下：

1. Client uploads SVGs to S3 bucket as they did before.
   客户端像以前一样将SVG上传到S3存储桶。
2. S3 triggers an AWS Lambda function.
   S3触发AWS Lambda函数。
3. Inside Lambda function, Node.js downloads SVG from S3 bucket and starts the headless Chrome.
   在Lambda函数内部，Node.js从S3存储桶下载SVG并启动无头Chrome。
4. Headless Chrome loads SVG and takes the screenshot.
   无头Chrome会加载SVG并获取屏幕截图。
5. Node.js app then uploads screenshot PNG image back to S3 bucket.
   然后，Node.js应用将屏幕截图PNG图像上传回S3存储桶。
6. Client uses PNG image from the S3 bucket.
   客户端使用来自S3存储桶的PNG图片。

给我看代码 (Show me the code)

We decided to use Node.js, so the first step was to check if Google Chrome for AWS Lambda existed in NPM. We were not disappointed: a package called serverless chrome had us covered.

我们决定使用Node.js，因此第一步是检查NPM中是否存在适用于AWS Lambda的Google Chrome。 我们并不感到失望：我们涵盖了一个名为无服务器chrome的软件包。

Note: AWS Lambda runs on Amazon Linux. To run a third-party library, such as Google Chrome, you need to compile it as a static binary using Amazon Linux. To learn more about that process, check out how to compile and run Pandoc on AWS Lambda here.

注意 ：AWS Lambda在Amazon Linux上运行。 要运行第三方库(例如Google Chrome)，您需要使用Amazon Linux将其编译为静态二进制文件。 要了解有关该过程的更多信息，请在此处查看如何在AWS Lambda上编译和运行Pandoc。

Another missing piece was a way to interact with Google Chrome in AWS Lambda. The most popular library, Puppeteer, seemed quite big for the task, so we used chrome-remote-interface.

另一个缺少的部分是与AWS Lambda中的Google Chrome进行交互的方法。 最受欢迎的库Puppeteer对于这项任务似乎很大，因此我们使用了chrome-remote-interface 。

Let’s rebuild the project together. But, before doing that, there are two prerequisites:

让我们一起重建项目。 但是，在此之前，必须满足两个先决条件：

• You’ll need to have Node.js with npm installed.
  您需要安装带有npm的Node.js。

• You’ll need to have an AWS account and setup the credentials (see how to do that here).

  您需要拥有一个AWS账户并设置凭证(请参阅此处的操作方法 )。

To install both dependencies, you should initiate a new Node.js project and run the following command in your terminal:

要安装这两个依赖项，您应该启动一个新的Node.js项目并在终端中运行以下命令：

npm install @serverless-chrome/lambda chrome-remote-interface --save

This Lambda function is not big, and you can fit it in one file and less than 100 lines of code. But, to make our function testable, we’ll use the structure shown in the figure below.

该Lambda函数并不大，您可以将其放入一个文件中，并且少于100行代码。 但是，为了使我们的功能可测试，我们将使用下图所示的结构。

How do you test serverless functions? The concept is similar to any other Node.js app: you should apply a hexagonal architecture, and then you can use your favorite Node.js tool for testing. Our choice is Jasmine. If you want to learn more about testing serverless apps, you can take a look at testing chapter of our book here.

您如何测试无服务器功能 ？ 这个概念与任何其他Node.js应用程序相似：您应该应用六边形体系结构 ，然后可以使用自己喜欢的Node.js工具进行测试。 我们的选择是茉莉 。 如果您想了解有关测试无服务器应用程序的更多信息，可以在此处查看本书的测试章节。

In our structure, the index.js file is just handling the event, passing it to the converter function, and responding back. This file should look like this code snippet:

在我们的结构中，index.js文件只是处理事件，将其传递给转换器函数，然后进行响应。 该文件应类似于以下代码片段：

Again, for testing purposes, the converter logic is in the following files:

同样，出于测试目的，转换器逻辑位于以下文件中：

• convert.js: a main file that wires all other files.

  convert.js ：连接所有其他文件的主文件。

• download-from-s3.js: a function that downloads SVG from S3 bucket.

  download-from-s3.js ：从S3存储桶下载SVG的功能。

• save-svg-and-get-dimensions.js: a function that saves SVG the file to the /tmp folder and reads its dimensions.

  save-svg-and-get-dimensions.js ：将SVG文件保存到/tmp文件夹并读取其尺寸的函数。

• screenshot-with-headless-chrome.js: a function that loads file in headless Chrome and takes the screenshot.

  screenshot-with-headless-chrome.js ：此功能可在无头Chrome中加载文件并获取屏幕截图。

• upload-to-s3.js: a function that uploads a screenshot (PNG file) back to S3.

  upload-to-s3.js ：此功能可将屏幕截图(PNG文件)上传回S3。

Most of the files are simple, with just a few lines of code. But to keep this article short, let’s see the most important ones: convert.js and screenshot-with-headless-chrome.js.

大多数文件都很简单，只有几行代码。 但是为了使本文简短，让我们来看一些最重要的内容： convert.js和screenshot-with-headless-chrome.js 。

As you can see in the next code snippet, the convert function is doing the following:

如您在下一个代码片段中所见，convert函数正在执行以下操作：

1. Downloading the SVG file from S3, using the function from the download-from-s3.js file.

   使用download-from-s3.js文件中的功能从S3下载SVG文件。

2. Preparing the path for SVG file in /tmp folder, and invoking the function to save SVG file and get its default dimensions.

   在/tmp文件夹中准备SVG文件的路径，并调用该功能以保存SVG文件并获取其默认尺寸。

3. Opening local SVG file in headless Chrome and taking a screenshot using the function from screenshot-with-headless-chrome.js file.

   在无头Chrome中打开本地SVG文件，并使用screenshot-with-headless-chrome.js文件中的功能获取screenshot-with-headless-chrome.js 。

4. Upload screenshot to S3 bucket using the function from upload-to-s3.js file.

   使用upload-to-s3.js文件中的功能upload-to-s3.js屏幕快照上传到S3存储桶。

运行无头Chrome (Running headless Chrome)

The last important piece of this puzzle is running headless Chrome. To do so, we’ll launch Chrome using the @serverless-chrome/lambda module, and than interact with it using the chrome-remote-interface module.

这个难题的最后一个重要部分是运行无头Chrome。 为此，我们将使用@serverless-chrome/lambda模块启动Chrome，然后使用chrome-remote-interface模块与其进行交互。

The Chrome remote interface gets the list of all tabs, and connects to the first one. Then it enables Page and Network for the client.

Chrome远程界面会获取所有标签的列表，然后连接到第一个标签。 然后，它为客户端启用页面和网络。

When Page and Network are ready, Chrome remote interface navigates to the URL you provided (local file:// path to the SVG file), waits for it to be loaded, and takes the screenshot.

当Page and Network准备就绪时，Chrome远程界面将导航到您提供的URL(本地file:// SVG文件的路径)，等待其加载并截取屏幕截图。

The code of the screenshot-with-headless-chrome.js file should look like the following code snippet:

screenshot-with-headless-chrome.js文件的代码应类似于以下代码片段：

Now that the code is ready, it’s time to deploy it to AWS Lambda. But because Google Chrome is bigger than the 50mb limit on AWS Lambda, deployment is not as smooth as you would expect.

现在代码已经准备就绪，是时候将其部署到AWS Lambda了。 但是，由于Google Chrome大于AWS Lambda的50mb限制，因此部署并不像您期望的那样顺利。

我们如何将大象挤进汽车后备箱？ (How can we squeeze the elephant into the car trunk?)

With serverless apps, you often end up with more code for automating deployment than for the business logic of your app. That’s a sign that the risk has shifted to deployment. And therefore, the deployment process should be well tested and something you can trust.

使用无服务器应用程序，您最终通常会获得比应用程序的业务逻辑更多的用于自动部署的代码。 这表明风险已经转移到部署上。 因此，应该对部署过程进行充分的测试，并且值得您信任。

To avoid unexpected hiccups, we use Claudia.js fort the deployment of serverless Node.js apps to AWS Lambda and API Gateway.

为了避免意外的麻烦，我们使用Claudia.js来将无服务器Node.js应用程序部署到AWS Lambda和API Gateway。

With Claudia.js, we would normally just do claudia create --region eu-central-1 --handler index.handler. But in the case of headless Chrome, this command fails because of the size of the package you are trying to deploy.

使用Claudia.js，我们通常只需要claudia create --region eu-central-1 --handler index.handler 。 但是在无头Chrome的情况下，由于您要部署的软件包的大小，此命令将失败。

AWS Lambda has a 50MB limit on deployment package size for compressed files. Fortunately, there is also 250MB limit for uncompressed code, which you can use via S3 bucket. NThe code is uploaded to S3 bucket and then transferred to the AWS Lambda function uncompressed from there.

AWS Lambda的压缩文件部署程序包大小限制为50MB。 幸运的是，未压缩的代码也有250MB的限制，您可以通过S3存储桶使用。 N代码被上传到S3存储桶，然后传输到未压缩的AWS Lambda函数。

To do so with Claudia, run the following command:

为此，请运行Claudia，运行以下命令：

claudia create --region eu-central-1 --handler index.handler --memory 1024 --timeout 60 --use-s3-bucket S3_BUCKET_NAME

Important notes for the previous command:

上一个命令的重要说明：

• Replace S3_BUCKET_NAME with the name of an S3 bucket you own. You can create a new one and use it just as a deployment helper.

  将S3_BUCKET_NAME替换为您拥有的S3存储桶的名称。 您可以创建一个新的，并将其用作部署帮助程序。

• Pick any region you are closest to, just make sure your Lambda function is in the same region as helper S3 bucket. See all supported regions here.

  选择最接近的任何区域，只需确保Lambda函数与辅助S3存储桶位于同一区域即可。 在此处查看所有支持的区域。

• If your main file is named differently, you’ll need to update handler in the command to the name of the file with .handler instead of .js extension. For example, if the file name is main.js, your handler would be main.handler.

  如果您的主文件命名不同，则需要使用.handler而不是.js扩展.handler命令中的handler处理为文件名。 例如，如果文件名为main.js ，则您的处理程序将为main.handler 。

• Increase the default memory a bit, because event a headless Chrome needs more than the default 128MB.
  稍微增加默认内存，因为无头Chrome需要更多的内存，而不是默认的128MB。
• Increase the timeout (a few seconds should be enough). But as you don’t pay for the timeout, and rather just the actual execution time, you can put a bit more, even around 5 minutes (max).
  增加超时(几秒钟就足够了)。 但是，由于您不必为超时而不是实际的执行时间付费，因此您可以花更多时间，甚至最多5分钟。

A few moments later (depending on your internet speed), you should see the confirmation that everything has been deployed successfully.

片刻之后(取决于您的Internet速度)，您应该看到确认已成功部署所有内容的确认。

Note: In case you want to update your code, run the claudia update --use-s3-bucket S3_BUCKET_NAME command. To learn how to use Claudia.js, check out the tutorial section on the website.

注意 ：如果要更新代码，请运行claudia update --use-s3-bucket S3_BUCKET_NAME命令。 要了解如何使用Claudia.js，请查看网站上的教程部分。

The last step before the test ride is to set the S3 trigger for your Lambda function. Claudia has you covered for that one too. Just run the following command from your terminal:

测试之前的最后一步是为Lambda功能设置S3触发器。 克劳迪娅(Claudia)也为您准备了那本。 只需从终端运行以下命令：

claudia add-s3-event-source --bucket S3_BUCKET --suffix svg

Again, replace S3_BUCKET with the name of the S3 bucket which will be used for the SVG and PNG files. By default, PNG will be saved to the same folder where the SVG file is located.

同样，将S3_BUCKET替换为将用于SVG和PNG文件的S3存储桶的名称。 默认情况下，PNG将保存到SVG文件所在的文件夹中。

And when the command runs successfully, that’s it. Your serverless file converter is ready.

当命令成功运行时，就是这样。 您的无服务器文件转换器已准备就绪。

试乘 (Test ride)

It’s time for a test ride!

现在是时候试车了 ！

So how do you test a serverless converter? Simply by uploading an SVG file to your S3 bucket. And what then? Refresh the bucket a few seconds later and you’ll see a PNG file with the same name. You’ll be surprised how fast it actually works! Headless Chrome seems to be faster than the Chrome browser on my machine. Maybe I should browse the web in headless mode from now on. ?

那么，如何测试无服务器转换器？ 只需将SVG文件上传到S3存储桶即可。 然后呢？ 几秒钟后刷新存储桶，您将看到一个具有相同名称的PNG文件。 您会惊讶于它实际运行的速度！ 无头Chrome似乎比我计算机上的Chrome浏览器快。 从现在开始，也许我应该以无头模式浏览网络。 ？

结语 (Wrapping up)

So, that’s how we solved the problem our client had without hurting our future selves. It’s not the best solution, but it was the best solution we were able to come up in a short timeframe and given the circumstances.

因此，这就是我们在不损害我们未来的自我的情况下解决客户所遇到的问题的方式。 这不是最好的解决方案，但它是我们能够在短时间内并根据具体情况提出的最佳解决方案。

But what’s the point of this story? Why should you care about running Chrome in AWS Lambda if you don’t have a similar client?

但是这个故事有什么意义呢？ 如果您没有类似的客户端，为什么还要关心在AWS Lambda中运行Chrome？

There are many potential use cases. If you remember the testing pyramid, UI tests are slow and expensive. But what if you can run a few hundreds or even thousands of them in parallel and pay only for execution time? There are some UI testing tools that are already working on a similar integration, such as Appraise.

有许多潜在的用例。 如果您还记得测试金字塔 ，那么UI测试既缓慢又昂贵。 但是，如果您可以并行运行几百甚至数千个并且只为执行时间付费，该怎么办？ 有一些UI测试工具已经在进行类似的集成，例如Appraise 。

I hope you enjoyed the story. Expect more to come soon!

我希望你喜欢这个故事。 期待更多的到来！

As always, many thanks to my friends Aleksandar Simović for help and feeback on the article.

与往常一样，非常感谢我的朋友AleksandarSimović对本文的帮助和反馈。

All illustrations are created using SimpleDiagrams4 app.

所有插图都是使用SimpleDiagrams4应用程序创建的。

No cows were harmed in the making of this article.

制作本文时，没有母牛受到伤害。

If you want to learn more about building and testing serverless apps using Node.js and AWS, check out “Serverless Applications with Node.js”, the book I wrote with Aleksandar Simovic for Manning Publications:

如果您想了解有关使用Node.js和AWS构建和测试无服务器应用程序的更多信息，请查看我与Aleksandar Simovic为Manning Publications撰写的书“使用Node.js的无服务器应用程序”：

Serverless Applications with Node.jsA compelling introduction to serverless deployments using Claudia.js.www.manning.com

带有Node.js 的 无服务器应用程序有关 使用Claudia.js的无服务器部署的引人注目的介绍。 www.manning.com

The book will teach you more about serverless apps, with code examples. You’ll learn how to build and debug a real world serverless API (with DB and authentication) using Node and Claudia.js. And you’ll learn how to build chatbots, for Facebook Messenger and SMS (using Twilio), and Alexa skills.

该书将通过代码示例教会您更多有关无服务器应用程序的信息。 您将学习如何使用Node和Claudia.js构建和调试真实的无服务器API(具有数据库和身份验证)。 您还将学习如何为Facebook Messenger和SMS(使用Twilio)以及Alexa技能构建聊天机器人。

翻译自: https://www.freecodecamp.org/news/will-it-blend-or-how-to-run-google-chrome-in-aws-lambda-2c960fee8b74/

aws lambda