Смешивается ли? Или как запустить Google Chrome в AWS Lambda

1656591498 smeshivaetsya li ili kak zapustit google chrome v aws lambda

Да, вы правильно прочитали: эта статья посвящена запуску Google Chrome (браузер) в AWS Lambda (бессерверная вычислительная платформа). Зачем кому-то запускать браузер на сервере[less] сторона? Это какая-то веб-версия «Will It Blend?»

Как бы я не хотел видеть (или делать) бессерверный «Will It Blend?» серия, запускающая странные вещи в AWS Lambda, это не то.

Но что это за статья? Ладно, пришло время истории!

Когда-то в Cloud Horizon мы работали с клиентом, у которого были странные SVG файлы, которые нужно было конвертировать в PNG. Ни один из инструментов SVG-to-PNG не работал, поскольку SVG содержали <foreignObject> элементов.

Эту проблему можно было решить многими разными способами. Оптимальным решением было бы проанализировать, почему у них есть элементы HTML, встроенные в файлы SVG. Но, как это часто бывает в реальных проектах, причина была скрыта за кучей устаревшего кода и устаревших решений. И, конечно, решение требовалось как можно скорее.

Поиск идеального решения стал поиском скорейшего достойного решения в данных обстоятельствах.

Посторонние объекты в SVG были элементами HTML, а лучшим инструментом для отображения элементов HTML является обозреватель. Но как мы можем использовать браузер для решения этой проблемы?

Вручную мы открываем SVG в браузере и снимаем экран. Мы должны иметь возможность сделать то же самое с PhantomJS, безголовым сценарием WebKit с JavaScript API. Мы попробовали, но это не сработало из-за отсутствия поддержки сторонних объектов SVG в PhantomJS.

Что еще мы могли бы использовать? Представьте, что мы используем Chrome, как мы используем PhantomJS. Подождите! Может быть, мы сможем это сделать. Кто-то из команды недавно читал о безголовом Chrome. Это звучало как идеальный инструмент для нашей удивительной проблемы. Мы попытались использовать безголовый Chrome, и это сработало!

Решите проблему, не причиняя вреда себе в будущем

Наконец-то мы нашли жизнеспособное решение. Но нам нужно было выяснить, как интегрировать это решение в клиентскую программу без добавления дополнительного слоя будущего устаревшего кода.

Наш клиент использовал AWS, а файлы SVG были в пакете Amazon S3. Это дало нам возможность использовать бессерверный для конвертера SVG в PNG.

Бессерверные решения дешевы, а для такого типа конвертеров они были бесплатными, поэтому нам не нужно разрешение на его использование. Это, а также тот факт, что инфраструктура не нуждалась ни в какой настройке, позволили нам быстро двигаться. Еще одной большой победой стала изоляция, позволившая нам работать, не понимая устаревшего кода. Кроме того наш бессерверный конвертер будет легко удалить в будущем.

Краткое примечание: Бессерверный – это метод развертывания и запуска программ в облачной инфраструктуре с оплатой использования без аренды или покупки серверов. Чтобы узнать больше о бессерверных программах и как это работает с AWS, просмотрите бесплатный первый раздел нашей новой книги «Бессерверные программы с Node.js» здесь.

Как показано на схеме ниже, наш план был следующим:

  1. Клиент загружает файлы SVG в сегмент S3 по-прежнему.
  2. S3 запускает функцию AWS Lambda.
  3. Внутри функции Lambda Node.js скачивает SVG из сегмента S3 и запускает Chrome без головы.
  4. Headless Chrome загружает SVG и снимает экран.
  5. Приложение Node.js затем загружает изображение скриншота PNG обратно в ведро S3.
  6. Клиент использует изображение PNG из сегмента S3.
1*lihQa40m17DpT8gSal35Cw
Поток программы для создания снимков экрана без сервера

Покажи мне код

Мы решили использовать Node.js, поэтому первым шагом было проверить, существует ли Google Chrome для AWS Lambda в NPM. Мы не были разочарованы: пакет под названием «бессерверный хром» защищал нас.

Примечание: AWS Lambda работает на Amazon Linux. Чтобы запустить библиотеку сторонних разработчиков, например Google Chrome, необходимо собрать ее как статический двоичный файл с помощью Amazon Linux. Чтобы узнать больше об этом процессе, просмотрите здесь, как собрать и запустить Pandoc на AWS Lambda.

Еще одним недостающим элементом был способ взаимодействия с Google Chrome в AWS Lambda. Самая популярная библиотека, Puppeteer, казалась достаточно обширной для этой задачи, поэтому мы использовали интерфейс chrome-remote-interface.

Давайте возобновим проект вместе. Но прежде чем это сделать, есть две предпосылки:

  • Вам нужно установить Node.js из npm.
  • Вам нужно иметь аккаунт AWS и настроить учетные данные (смотрите, как это сделать здесь).

Чтобы установить обе зависимости, вам следует инициировать новый проект Node.js и выполнить следующую команду в своем терминале:

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

Эта лямбда-функция невелика, и вы можете вместить ее в один файл и менее 100 строк кода. Но чтобы сделать нашу функцию проверенной, мы будем использовать структуру, показанную на рисунке ниже.

1*XFrZhDzUvyviMlkqTxtg-w
Структура папок проекта

Как вы тестируете бессерверные функции? Концепция похожа на любое другое приложение Node.js: вам следует применить гексагональную архитектуру, а затем вы можете использовать свой любимый инструмент Node.js для тестирования. Наш выбор – Жасмин. Если вы хотите узнать больше о тестировании приложений без сервера, вы можете просмотреть раздел тестирования нашей книги здесь.

В нашей структуре файл index.js просто обрабатывает событие, передает его функции конвертеру и отвечает. Этот файл должен выглядеть как этот фрагмент кода:

Опять же, для целей тестирования логика конвертора находится в следующих файлах:

  • convert.js: основной файл, соединяющий все остальные файлы.
  • download-from-s3.js: функция, загружающая SVG из сегмента S3.
  • save-svg-and-get-dimensions.js: функция, которая сохраняет SVG-файл в файле /tmp папку и считывает ее размеры.
  • screenshot-with-headless-chrome.js: функция, которая загружает файл в безголовом Chrome и делает снимок экрана.
  • upload-to-s3.js: функция, загружающая снимок экрана (файл PNG) обратно на S3.

Большинство файлов просты и содержат всего несколько строк кода. Но чтобы эта статья была короткой, давайте рассмотрим самые важные из них: convert.js и screenshot-with-headless-chrome.js.

Как вы можете видеть в следующем фрагменте кода, функция конвертации выполняет следующее:

  1. Загрузка файла SVG из S3 с помощью функции с download-from-s3.js файл.
  2. Подготовка пути к файлу SVG в /tmp папку и вызов функции для сохранения файла SVG и получения размеров по умолчанию.
  3. Открытие локального SVG-файла в безголовом Chrome и создание снимка экрана с помощью функции с screenshot-with-headless-chrome.js файл.
  4. Загрузите снимок экрана в ведро S3 с помощью функции from upload-to-s3.js файл.

Запуск Chrome без головы

Последним важным элементом этой головоломки является запуск Chrome без головы. Для этого мы запустим Chrome с помощью @serverless-chrome/lambda модуль, а затем взаимодействовать с ним с помощью chrome-remote-interface модуль.

Удаленный интерфейс Chrome получает список всех вкладок и подключается к первой. Затем он активирует страницу и сеть клиента.

Когда страница и сеть готовы, удаленный интерфейс Chrome переходит к указанному вами URL-адресу (локальный file:// путь к файлу SVG), ждет его загрузки и делает снимок экрана.

Код screenshot-with-headless-chrome.js файл должен выглядеть как фрагмент кода:

Теперь, когда код готов, пора развернуть его в AWS Lambda. Но поскольку Google Chrome превышает ограничение в 50 МБ для AWS Lambda, развертывание происходит не так гладко, как можно было бы ожидать.

Как мы можем вдавить слона в багажник автомобиля?

С приложениями без сервера вы часто получаете больше кода для автоматизации развертывания, чем для бизнес-логики программы. Это признак того, что риск перешел на развертывание. Поэтому процесс развертывания должен быть проверен и которым можно доверять.

Чтобы избежать неожиданных проблем, мы используем Claudia.js для развертывания бессерверных приложений Node.js на AWS Lambda и API Gateway.

С Claudia.js мы обычно делаем это claudia create --region eu-central-1 --handler index.handler. Но в случае безголового Chrome эта команда не удается из-за размера пакета, который вы пытаетесь развернуть.

AWS Lambda имеет ограничение в 50 МБ на размер пакета развертывания для сжатых файлов. К счастью, существует также ограничение в 250 МБ для несжатого кода, который вы можете использовать через ведро S3. Код загружается в сегмент S3, а затем передается в функцию AWS Lambda без сжатия.

1*UTUBeVU8_brt6BHVtPeJRQ
Как мы можем вдавить «слона» в багажник автомобиля?

Чтобы сделать это с Claudia, выполните следующую команду:

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

Важные примечания к предыдущей команде:

  • Заменить S3_BUCKET_NAME с названием ведра S3, которым вы владеете. Вы можете создать новый и использовать его просто в качестве помощника для развертывания.
  • Выберите любой регион, к которому вы ближе всего, просто убедитесь, что лямбда-функция находится в том же регионе, что и вспомогательный сегмент S3. Просмотрите все поддерживаемые регионы здесь.
  • Если ваш основной файл имеет другое название, вам нужно будет обновить обработчик в команде имени файла с помощью .handler вместо .js расширение. Например, если имя файла есть main.jsваш обработчик будет main.handler.
  • Несколько увеличьте память по умолчанию, поскольку Chrome без головы требует больше, чем стандартные 128 МБ.
  • Увеличьте время ожидания (несколько секунд должно быть достаточно). Но поскольку вы не платите за тайм-аут, а только за фактическое время исполнения, вы можете добавить чуть больше даже около 5 минут (максимум).

Через несколько минут (в зависимости от скорости Интернета) вы увидите подтверждение того, что все было успешно развернуто.

Примечание: Если вы хотите обновить свой код, запустите claudia update --use-s3-bucket S3_BUCKET_NAME команда. Чтобы узнать, как использовать Claudia.js, см. раздел учебника на веб-сайте.

Последним шагом перед тестовой поездкой является настройка триггера S3 для функции Лямбда. Клаудия тоже покрыла вас. Просто запустите такую ​​команду из своего терминала:

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

Снова замените S3_BUCKET с названием сегмента S3, используемого для файлов SVG и PNG. По умолчанию PNG сохраняется в той же папке, где находится файл SVG.

И когда команда выполняется успешно это все. Ваш бессерверный конвертер файлов готов.

Тестовый заезд

Настало время для пробной поездки!

Итак, как проверить бессерверный конвертер? Просто загрузите файл SVG в сегмент S3. И что тогда? Обновите ведро через несколько секунд, и вы увидите файл PNG с таким же названием. Вы будете удивлены, насколько быстро это действительно работает! Headless Chrome, кажется, быстрее браузера Chrome на моем компьютере. Возможно, теперь мне следует просматривать Интернет в безголовом режиме. ?

Подведению

Таким образом, мы решили проблему нашего клиента, не причиняя вреда себе в будущем. Это не самое лучшее решение, но это было самое лучшее решение, которое мы смогли придумать за короткий промежуток времени и учитывая обстоятельства.

Но каков смысл этой истории? Почему вам нужно запустить Chrome в AWS Lambda, если у вас нет клиента?

Существует много возможных случаев использования. Если вы помните пирамиду тестирования, тесты UI медленные и дорогостоящие. Но что если вы можете запустить несколько сотен или даже тысяч их параллельно и платить только за время выполнения? Существуют некоторые инструменты тестирования пользовательского интерфейса, которые уже работают над подобной интеграцией, например Appraise.

1*nbpelcvDBxIz7KJM6fJr9Q

Надеюсь, вам понравилась история. Скоро ждите больше!

Как всегда, большое спасибо моим друзьям Александру Симовичу за помощь и отзыв о статье.

Все иллюстрации созданы с помощью программы SimpleDiagrams4.

При создании этой статьи ни одна корова не пострадала.

Если вы хотите узнать больше о создании и тестировании бессерверных программ с помощью Node.js и AWS, посмотрите книгу «Бессерверные программы с Node.js», которую я написал вместе с Александром Симовичем для Manning Publications:

Бессерверные программы с Node.js
Убедительное вступление в бессерверное развертывание с помощью Claudia.js.www.manning.com

Книга научит вас больше о бессерверных программах с примерами кода. Вы узнаете, как создать и настроить реальный бессерверный API (с базой данных и аутентификацией) с помощью Node и Claudia.js. И вы узнаете, как создавать чат-боты для Facebook Messenger и SMS (с помощью Twilio), а также навыки Alexa.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *