Всем привет! Не так давно я запустил игру Emozle, вдохновившись идеей Wordle. Посетители сайта видят лишь html, несколько js и css файлов, а я бы хотел поделиться с вами тем, что скрыто! Ну и кому может быть интересна диаграмма AWS архитектуры, если не Хабру?

Суть игры

Каждый день игра предлагает загадку из последовательности пяти эмодзи (emoji + puzzle = Emozle). Также вместе с загадкой дается подсказка к нахождению правильного ответа (правильного Emozle).

Чтобы начать, необходимо выбрать и ввести в первую строку пять эмодзи и нажать «enter».

После первой попытки фон каждой из ячеек первой строки изменится по следующим правилам:

  • Если эмодзи правильный и на правильном месте, фон станет зеленым.

  • Если эмодзи правильный, но не на правильном месте, фон станет желтым.

  • Если эмодзи не правильный, фон станет серым.

Вам необходимо угадать все пяти эмодзи и их правильную последовательность. На это вам дается шесть попыток.

Отличие от Wordle

Необходимо угадать загаданную последовательность из пяти эмодзи (Emozle) а не слово из пяти букв. В помощь вам дается подсказка. 

Emozle может быть связан с какой-то новостью, событием, фильмом, знаменитостью и так далее. Мне кажется этот формат интереснее, чем просто случайные слова в Wordle.

Кроме ежедневных Emozle есть еще режим «special», о нем чуть позже, так как я приготовил Хабру сюрприз.

Перейдем к сути, с Хабром я хочу поделиться тем, как все это работает. Изначально была идея сделать все serverless. Во-первых, для масштабируемости и упрощения администрирования, а во-вторых, всегда интересно попробовать новые технологии. Мой выбор остановился на AWS, так как с AWS я работаю ежедневно. 

Вот схема инфраструктуры Emozle на AWS (разъяснение ниже):

emozle.com AWS diagram
emozle.com AWS diagram

Всю инфраструктуру можно разделить на 2 части, первая это от коммита до клиента, а вторая это ежедневное обновление загадки (файла emozle.js).

Часть первая, от коммита до клиента (зеленые кружки на диаграмме):

  1. Коммит локальных изменений в CodeCommit (git репозиторий AWS).

  2. CodePipeline отслеживает изменения в CodeCommit и начинает выполнять запланированный набор действий.

  3. CodePipeline копирует содержимое репозитория на AWS S3.

  4. CodePipeline запускает выполнение Lambda функции, которая отдает CloudFront команду на очистку (invalidation) кэша.

  5. CloudFront получив команду выполняет очистку кэша во всех Edge локациях.

  6. При следующей загрузке сайта CloudFront получит обновленные файлы из AWS S3 и запишет в свой кэш.

Часть вторая, ежедневное обновление загадки, файла emozje.js (фиолетовые кружки на диаграмме):

  1. Наполнение базы данных загадок (DynamoDB), это операция не ежедневна, так как можно заполнить базу на много дней вперед. 

  2. Раз в сутки, 00:00 UTC, EventBridge запускает выполнение Lambda функции.

  3. Lambda функция делает запрос к DynamoDB, выбирает загадку из базы и создает новый файл emozle.js.

  4. Lambda функция загружает файл emozle.js в AWS S3.

  5. Lambda функция отдает CloudFront команду на очистку кэша (только emozle.js). CloudFront получив команду выполняет очистку кэша файла emozle.js во всех Edge локациях.

  6. При следующей загрузке сайта ClodFront получит обновленные emozle.js из AWS S3 и запишет в свой кэш.

Что в результате? CloudFront выдает отличную скорость загрузки сайта в любой точки планеты. У меня скорость загрузки сайта ~20-40 мс (интересно какая скоростью в вашем регионе). Так как вся инфраструктура serverless, то в основном я буду оплачивать лишь трафик и запросы к CloudFront. Чтобы прикинуть цены - 1гб трафика будет стоить 8-12 центов, вес всего сайта ~ 15кб. Цена 100.000 HTTPS запросов также 10-12 центов, 1 пользователь делает примерно 8 запросов (8 файлов при загрузке сайта). По моим приблизительным подсчетам 100.000 пользователей будут стоить мне 15-20 центов за трафик и 80-95 центов за запросы. Очистку кэша, Lambda функции и DynamoDB можно не учитывать, там затраты будут меньше $1 в месяц. 

Специально для этой статьи я приготовил «Emozle special». Он будет статичен (не будет меняться каждый день) и он о Хабре (пожалуйста, без спойлеров в комментариях). Если хочется поделиться вашей разгадкой, после победы нажмите «copy» и вставьте текст в ваш комментария, это будет выглядеть примерно вот так:

EMOZLE SPECIAL ????
⬜⬜????????⬜
????????????????⬜
????????????????????
????????????????????

Habr

Всем спасибо, Emozle special специально для Хабра!

P.S. если кто-то заинтересовался проектом (от придумывания новых Emozle, до написания кода) - всем буду рад!

Комментарии (7)


  1. GabrielG
    20.02.2022 18:45

    В special-ах для Хабра и Yaplakal немного поплыла разметка.

    По моим приблизительным подсчетам 100.000 пользователей будут стоить мне 15-20 центов за трафик и 80-95 центов за запросы. Очистку кэша, Lambda функции и DynamoDB можно не учитывать, там затраты будут меньше $1 в месяц. 

    А если кто-то злонамеренно будет отправлять куда большее количество запросов, не будет ли это накладно? Пока там тот budget alert отработает...


    1. levpasha Автор
      20.02.2022 19:04

      Привет, в эту схему очень просто добавляется WAF (Web Application Firewall). А WAF можно настроить, для блокировки нежелательной активности (например по количеству запросов).

      По поводу «поплывшей разметки» - похоже у вас Android 9 версии. В спецификации 9ой версии написано про поддержку emoji 11 (которые я и использую), но почему-то некоторые emoji (например как в вашем примере) отображаются как 2.

      Пока не знаю что с этим делать. Видимо придется запретить доступ для 9 версии и ниже.


      1. GabrielG
        20.02.2022 19:07

        Нет, я с десктопа, 98-й Хром под Windows.


        1. levpasha Автор
          20.02.2022 19:21

          Интересно! А какая винда? Спасибо за коммент, я что-то даже и не подумал потестировать на разных версиях десктопных ос.


          1. GabrielG
            20.02.2022 20:12

            10-ка.


            1. levpasha Автор
              20.02.2022 21:11

              Спасибо за найденный косяк! Я поправил загадку, но тем кто уже поиграл надо будет local storage почистить.

              Честно говоря я не понял какую версию emoji поддерживает винда 10. Например пазл (????) включен в emoji 11, но на винде не отображается.


  1. fedorro
    20.02.2022 21:34
    +1

    EMOZLE SPECIAL ????
    ⬜⬜⬜????????
    ⬜????????⬜????
    ????????????????????

    Habr
    ???? emozle.com