Доступная версия этого сообщения доступна по адресу http://blog.edx.org/serverless-deployments.

Я работал над прототипом для маркетингового сайта edX, чтобы переместить рендеринг с клиентской на серверную. (Обратите внимание, что маркетинговый сайт отделен от LMS.) Цель состоит в том, чтобы сократить время до первой отрисовки - время, которое пользователи должны ждать, прежде чем фактически использовать наш сайт. Сегодня это время может варьироваться от 2 с для устройства с приличной мощностью в США до 12 с для устройств с низким энергопотреблением в Индии. Хотя изначально я намеревался исключительно тестировать рендеринг на стороне сервера (SSR), почти сразу стало ясно, что мы можем сэкономить много денег - примерно 90% наших сборов за хостинг Drupal - путем перехода к бессерверной архитектуре развертывания. Ниже приведены несколько заметок, которые я собрал за последние пару недель.

Поскольку часть первоначальной цели прототипа заключалась в тестировании изоморфного JavaScript с помощью React, я создал проект Node.js. В этом случае я использовал платформу Express, поскольку она казалась самой популярной (что позволяет легко находить документацию, сообщения в блогах и плагины / промежуточное ПО). Код доступен по адресу https://github.com/clintonb/edx-marketing-site-frontend.

Примерно в это же время я также слушал интервью с Янь Цуй в эти выходные о работе по преобразованию, которую он проделал в стартапе, что побудило меня провести расследование бессерверных развертываний. Интервью / блог интересны тем, что он подробно описывает как сейчас, так и почему компания внесла это изменение.

Прототип

Исходный код этого прототипа доступен по адресу https://github.com/clintonb/edx-marketing-site-frontend. Он развернут в AWS.

Я использовал Claudia.js для развертывания, так как он отвечал моим непосредственным потребностям. В будущем, возможно, стоит изучить Serverless framework, поскольку он не зависит от поставщика облачных услуг и может предлагать несколько дополнительных функций.

Кроме того, я также использую edx-bootstrap, но стиль не является моей основной задачей в этом прототипе.

Цели

  1. Визуализируйте страницу инструктора на сервере.
  2. Развертывать без сервера (например, без EC2)
  3. Поддержка интернационализации (i18n) испанского языка.
  4. Кешируйте ответы на CDN.

Нецелевые

  1. Стиль страниц точно имитирует edx.org.

Архитектура

Эта диаграмма представляет текущую архитектуру развертывания. Статические ресурсы - CSS и JS - хранятся в корзине S3. Сервер живет на Лямбде.

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

В будущем мы можем изучить возможность полного развертывания на S3 для действительно бессерверного сайта. (Мне это удалось для более раннего прототипа на основе Django.)

Демо-ссылки

По ссылкам ниже показана страница отдельного инструктора. Данные настоящие. Если вы хотите увидеть другого инструктора, измените путь на один на маркетинговом сайте. Например, чтобы просмотреть изменение страницы Ананта, https://www.edx.org/bio/anant-agarwal-0 на http://edx-test.clintonblackburn.com/bio/anant-agarwal-0 . Хотите увидеть это на испанском? Измените язык браузера или добавьте /es к пути: http://edx-test.clintonblackburn.com/es/bio/anant-agarwal-0.

Эээ ... а как насчет изоморфного JavaScript?

Все это начинание началось с желания изучить изоморфный JavaScript. Я пошел по этому пути, но понял, что это не то, что нам нужно сегодня. Если вы посетите наш маркетинговый сайт, становится ясно, что сегодня очень мало на нем ориентировано на пользователя. Следующие три компонента зависят от пользовательских данных:

  • Кнопки регистрации
  • Цены указаны в программе - MicroMasters, Профессиональный сертификат, XSeries - страницы с подробностями
  • Имя пользователя / ссылки в панели навигации

Остальную часть сайта можно визуализировать на стороне сервера с помощью любого механизма визуализации шаблонов. Я выбрал Nunjucks из-за его схожести с шаблонами Django / Jinja2. Добавление React в качестве дополнительного движка рендеринга добавляет ненужной сложности. Все перечисленные выше компоненты можно обрабатывать с помощью стандартного JavaScript.

Некоторые в edX согласны с моей оценкой изоморфных JS и React. Некоторые этого не делают. Мы продолжим обсуждать достоинства React для сайта в его нынешней форме и его возможную эволюцию. Тем не менее, в будущем я вижу больше бессерверных развертываний для наших небольших, менее динамичных сервисов, таких как маркетинговый сайт и служба учетных данных.

Первоначально опубликовано на сайте dev.clintonblackburn.com 27 августа 2017 г.