Публикуем простой Serverless сайт с формой обратной связи для проверки гипотез

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

В последнее время всё чаще слышно о концепции No-Code: создание приложений и сайтов без написания кода. Идея очень тесно пересекается с методологиями гибкой разработки Agile, где разработка ведётся маленькими итерациями, позволяя «повернуть» в нужную сторону максимально быстро, не теряя время и ресурсы на заранее неизвестные цели. Для этого будущий предприниматель собирает простую landing-страницу и пытается привлечь потенциальных покупателей услуги. И когда начинает появляться какой-то доход, тогда предпринимаются усилия по расширению услуг, улучшению качества и масштабированию.

Как правило, помимо визуальной части (баннеров, картинок) нужен ещё и какой-то функционал, что часто требует привлечения дорогостоящих специалистов в программировании и затрат на оплату инфраструктуры вроде серверов и баз данных.

No-Code решения действительно помогают сократить первоначальные инвестиции. Однако, бизнесы бывают разные, и No-Code платформы подойдут не каждому. Особенно, если ваш будущий бизнес всё-таки хоть немного про IT. У любой No-Code платформы есть ограничения, в которые вы обязательно упрётесь, как только ваша идея начнёт расти и понадобится расширять или чуть-чуть усложнять сайт/приложение. Иными словами, лучше контролировать то, какие технологии вы используете, чтобы можно было дорабатывать сайт, а не переделывать всё с ноля.

В статье я расскажу, как использовать бессерверные облачные технологии, которые от вас потребуют оплату только за фактическую отправку данных с формы, когда действительно пришел клиент и действительно что-то написал. Эта оплата составляет считанные цент (согласитесь, немного?).

Сразу оговорюсь, что данная статья не про Agile, и не про No-Code, и не про разработку (кода будет очень мало, но он будет). Она скорее подойдет людям, у которых уже есть базовые навыки HTML и CSS для создания простейших веб сайтов. Вероятно, это хоть немного технически подкованные люди, либо студенты колледжей и институтов, а может быть даже школьники. Проблемы, которые данная статья поможет решить следующие:

1. Как бесплатно разместить ваш сайт в Internet

2. Как завести email адрес для бизнеса (с доменом вашего сайта) и привязать его к сайту организации

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

В общем, мне как разработчику, кажется, что аудитория довольно узкая, но кому-то может быть полезно. Поехали!

Итак, что нам требуется c «бизнес» стороны вопроса:

1. Как правило, желательно иметь какое-то внятное доменное имя, если ваши дальнейшие намерения серьёзны. Имя вроде mysuperbusiness.com. Домен нужно будет купить.

2. Нужна почта, вроде [email protected]. Чтобы почта была с бизнес доменом, опять-таки, придётся немного потратиться, если не хотите выглядеть смешно с доменами вроде @bk.ru.

3. Нужен небольшой сайт — это две-три страницы описания идеи, или того, что вы там хотели бы проверить. Одна из страниц будет формой отправки обратной связи или обращения. На ней как минимум необходимы поля Тема, Email автора, Текст и кнопка Отправить. По нажатию кнопки Отправить, введённые данные должны приходить на вашу новую почту. Очевидно, сайт нужно создать и потом разместить в интернете, чтобы все могли на него заходить.

Домен для бизнеса и бизнес почту предлагаю реализовать, используя облако от компании Amazon, пожалуй, самого распространённого облачного провайдера (как минимум, на рынке США, ведь нам нужно думать сразу глобально, правильно?).

Что такое облако Amazon Web Services (AWS)? Это множество удобных сервисов Amazon на все случаи жизни. Можно думать о них, как о кубиках, из которых можно собирать всё что необходимо: от базового сайта, до серьезных production приложений мирового уровня (Netflix, Instagram, многие банковские и финансовые приложения размещаются именно там).

Что касается сайта, то если сложнее контактной формы на сайте ничего пока не нужно, то можно сделать полностью статический сайт, который можно будет быстро и очень дёшево (или бесплатно) разместить в Internet. Статический сайт — это сайт, состоящий из чистого HTML+CSS, БЕЗ программирования на языках вроде php, C#, Java, NodeJS, и т.д. Немного кода нам всё же понадобится, но в данном примере глубокие знания программирования (пока) не нужны. Самое приятное то, что не нужно платить за хостинг (размещение) веб-сервера в Internet. Сайт мы разместим на бесплатном хостинге от https://github.com, всемирно известной платформы для разработки.

Помимо домена и почты, мы сможем также реализовать возможность отправки писем на эту почту прямо с вашего сайта, используя всё те же сервисы AWS. Затраты на описанный функционал не превысят 10 долларов в месяц. Плюсами использования этого облака также будет то, что как только вам понадобится (или вы «созреете») сделать что-то более сложное на вашем сайте, то вы с лёгкостью сможете арендовать нужную инфраструктуру (сервера, базы данных, и прочее) и перенести весь сайт с платформы GitHub в облако Amazon и построить там свой собственный Netflix.

Мы будем использовать бессерверные технологии и сервисы AWS для обработки отправки сообщений с формы обратной связи. По сути, на форме обратной связи будет кнопка Отправить, по нажатию которой должно происходить действие отправки сообщения на почту вашей организации. Технически, это будет работать благодаря трём компонентам:

1. Кусочку JavaScript кода, размещенному в HTML файле вашей страницы обратной связи, развёрнутый и опубликованный на хостинге от GitHub

2. Связке сервисов Amazon Lambda и Amazon API Gateway, которую вышеупомянутый кусочек JavaScript будет вызывать, передавая текст сообщения.

3. Сервису Amazon Simple Email Service (SES), который по команде от Amazon Lambda будет отправлять сообщение на почту именно вашей организации.

Не стоит пугаться сложных названий, так как всё это мы соберем пошагово руками через UI. Однако, это решение будет легко расширяемо и со временем не составит труда усложнить логику, автоматизировать процессы развёртывания сайтов и сервисов вашей организации.

Все сервисы Amazon будут доступны в вашем «личном кабинете» (это называется «Консоль AWS», хотя имеется в виду сайт Amazon с UI) после регистрации. Из сервисов AWS нам понадобятся следующие:

• AWS Route (для покупки и контроля доменных имен)
• AWS Lambda (для бессерверной отправки сообщений с формы на сайте)
• AWS WorkMail (для регистрации бизнес почты)
• AWS SES (для отправки сообщений)
  

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

Нужно зайти на сайт https://aws.amazon.com/ru и сразу перейти к Регистрации, нажав одноимённую кнопку. При регистрации вам предстоит ввести базовую информацию о себе на английском языке (или латинице) и, помимо прочего, ввести данные о пластиковой карте. Карта нужна для съёма денег в случае, если вы превысили пороговые значения трафика, предоставляемого бесплатно. Сервис выполнит проверку её работоспособности сняв 1 доллар, который позже вернут вам обратно.

Так же не стоит пугаться того, что подтверждение регистрации производится голосом по телефону (вам на экран высветится PIN-код, который надо будет ввести во время звонка) или текстом по SMS. Обычно, я пользуюсь первым способом.

Его можно приобрести и настроить, используя AWS Route 53. Для этого, проделываем шаги, описанные в https://aws.amazon.com/ru/route53/faqs/ :

1. Зарегистрируйтесь в сервисе, нажав на кнопку входа в аккаунт на странице сервиса.

2. Перейдите на Registered Domains.

3. Подберите свободное доменное имя (кнопкой Check) в нужной области (лучше .com) и по нужной вам цене. Для этого нужно просто пройти 3-х шаговую форму, описывать это я не буду.

Важно лишь понимать, что сервис Route 53 автоматически создаст для вас всё необходимое и это всегда можно отредактировать и поменять, используя консоль управления AWS.

Для регистрации и управления почтой мы воспользуемся AWS WorkMail – сервисом электронной почты для организаций. На момент осени 2021 года ведение одного почтового ящика будет обходиться вам в 4$ в месяц.

Вся настройка происходит в консоли AWS. Всё что нужно сделать это 3 шага:

1. Добавьте вашу организацию на странице по инструкции https://docs.aws.amazon.com/workmail/latest/adminguide/add_new_organization.html

2. Добавьте ранее зарегистрированный вами домен и верифицировать его. Для этого нужно пройти по шагам, описанным тут. Процесс верификации подтвердит, что вы действительно являетесь владельцем домена и нужен он потому, что домен мог быть куплен и вне AWS. Однако, в нашем случае домен куплен тут же, поэтому проблем с процессом не будет. В случаях, если домен куплен у другого регистратора, то могут потребоваться дополнительные шаги.

3. Создайте нового пользователя, то есть почтовый ящик организации. В данном руководстве мы создаем лишь один ящик, поэтому давайте сделаем что-то вроде [email protected].

Теперь остаётся подсоединить ваш любимый Email клиент к почте и протестировать связь, отправив на него и с него письмо. Руководства по настройке тут:

• iOS или Android
• Outlook

Пожалуй, для вас это самая самостоятельная часть этого руководства. В зависимости от вашего опыта вы можете воспользоваться готовыми шаблонами сайтов, скопировать чей-то (может быть это и плохой совет, но так действительно делают многие на первых этапах), или создать с ноля свою небольшую landing страницу используя базовый HTML и CSS. Помните, чем проще и минималистичнее будет страница, тем лучше.

Будем считать, что в спокойной домашней обстановке, за пару вечеров в пижаме и тапочках, вы создаёте простой статический сайт с картинками, описанием услуги/идеи, и формой обратной связи. Можно сразу начинать с готовых шаблонов Bootstrap (самой популярной и простой библиотеки для HTML/CSS). Пройдя по их руководству можно за 10 минут создать простейшую страницу. А если позволяет опыт, то можно воспользоваться готовыми шаблонами и быстро создать более сложные страницы.

Допустим, что ваша форма обратной связи выглядит так:

Для создания этой формы достаточно примерно такого кода:

Конечно, тут приведен минимальный пример, который нужно привести в порядок с помощью CSS, но он уже функциональный. С помощью библиотеки jquery можно проверить поля на предмет наличия текста и отправить данные вашему API.

Справитесь?

Как было сказано выше, для статических сайтов размещение может быть бесплатным. Для этого воспользуемся бесплатной платформой для разработчиков https://github.com. Процесс регистрации на Github ничем не отличается от других сайтов. Я рекомендую сначала зарегистрироваться как пользователь под своей личной почтой и подтвердить её.

Затем, чтобы у вас появилась возможность привязывать бизнес домен к бесплатному хостингу сайта, нужно зарегистрировать аккаунт организации. Имя организации лучше выбрать совпадающее с доменом:

После того как вы зарегистрировали организацию, нужно создать «репозиторий». Это хранилище, в которое вы загрузите все свои исходные файлы для сайта – HTML, CSS, картинки). На странице профиля вашей организации найдите самую яркую зелёную кнопку New, введите имя репозитория в формате (“.github.io” - это важно) и выберете флажок Public (это означает, что ваши исходники будут публично доступны). Да, Public размещение исходных файлов приложение может показаться минусом данного решения, ведь все смогут посмотреть, из чего состоит ваш сайт. Именно поэтому такое решение подходит для начальной стадии, когда сильно сложного или секретного ничего не происходит. В случае более серьезной разработки, за которую вы платите свои кровные деньги, будет логичным перенести всё в Private-репозиторий, но тогда потеряется возможность бесплатного хостинга.

На странице созданного репозитория нажмите Add file -> Upload files. Загрузите исходники своего сайта, напишите комментарий и нажмите зелёную кнопку Commit Changes. Как только файлы сохранятся, вы сможете их увидеть на странице репозитория и тут же будет вся история изменений каждого файла (это статья не покрывает деталей работы с системами хранения и контроля версий кода и GIT в частности, но вы можете прочитать это в доступном руководстве).

Как только файлы загрузились, зайдите в Settings -> Pages -> и включите публикацию ваших файлов через web server платформы, что сделает ваш сайт доступным всему интернету через домен https://mybusiness.github.io. Пример ниже:

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

Однако, нам нужно привязать доменное имя и почту организации. Следуя инструкциям нужно связать регистратора вашего домена (AWS Route 53) с платформой хостинга сайта (GitHub):

1. В настройках репозитория GitHub в поле Custom domain введите адрес вашего платного домена: mybusiness.com. Сохраните изменение (после этого в вашем репозитории появится файл CNAME, в котором это доменное имя прописано).

2. В соседней вкладке браузера откройте страницу «Консоли AWS» и поиском найдите сервис Route53

3. Перейдите на страницу своей зоны (Hosted Zone).

4. Нажмите “Create record” и создайте запись типа “CNAME” (выбирается из списка):

• Выбираем Record type = CNAME
• Record name = www
• Value = mybusiness.github.io
  

5. После этого подождите несколько, обычно до 24, часов, чтобы DNS записи прописались во всех маршрутизаторах на пути к AWS

Через некоторое время ваш сайт станет доступным с URL https://www.mybusiness.com. А пока можно заняться подготовкой бек-енда.

В цепочке отправки писем всегда есть Источник и Адресат. Адресатом в данном случае будет Email адрес, который вы уже сделали выше. Для отправки почты с помощью кода необходимо воспользоваться специальным сервисом AWS Simple Email Service, который будет являться Источником сообщений.

Первостепенным шагом является необходимость подтверждения того, что вы являетесь владельцем данного домена и имеете право отправлять почту от этого имени. Для подтверждения необходимо пройти процесс верификации вашего доменного имени и почтового адреса, с которого вы будете отправлять сообщения от сайта.

Переходите на сервис Amazon SES, Domains и нажимайте Verify a Domain Name, вводите домен своего сайта и следуйте инструкциям в верхней части формы (нижние нас пока не касаются):

1. В соседней вкладке браузера откройте сервис Route53, в котором перейдите на свою зону, как уже делали ранее.

2. Жмём “Create record” и создаём запись типа “TXT”:

• Выбираем Record type = TXT
• Record name = … значение поля Name выданное выше…
• Value = … значение поля Value выданное выше…
  

3. Сохраните изменения.

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

Сначала нужно разрешить коду, исполняемому в облаке, отправку сообщений. Для этого надо создать так называемые IAM-разрешения (Оригинальные инструкции):

1. В соседней вкладке браузера откройте сервис IAM (найдите его поиском, это удобно), и перейдите на страницу Policies.

2. Жмите “Create policy”

3. Выберите вкладку JSON

4. Вставьте в поле код нашего разрешения, приведённый ниже:

5. Дайте имя вроде MyBusinessEmailSender

6. Сохраните изменения.

Теперь нужно создать роль и соединить её с разрешением.

7. Перейдите на страницу Roles и жмите “Create Role”

8. Выберите сервис Lambda

9. Далее, выбирайте из списка ваше разрашение MyBusinessEmailSender

10. Дайте Роли имя вроде MyBusinessEmailSenderRole

11. Сохраните изменения.

Таким образом, вы создали разрешение и роль. Они дают возможность отправлять Email, а так же логгировать события отправки для отладки. В официальной документации можно также найти примеры других разрешений IAM для SES.

Теперь самое время создать бессерверную функцию, которая будет просыпаться в момент прихода сообщения и слать его к вам на почту используя AWS SES.

1. В соседней вкладке браузера откройте сервис Lambda, в котором перейдите на страницу Functions

2. Введите имя функции, пусть будет “MyBusinessEmailSendFunction”.

3. На странице Permissions под Execution role, подтвердите, что созданная ранее роль назначена вашей функции

4. Под Function code в редакторе editor pane, вставьте нижеследующий JavaScript код функции, представленный ниже, сначала заменив в одной из верхних строк код региона us-west-2 на код вашего региона выбранного в «Консоли AWS». Его можно найти в пункте меню справа сверху.

5. Нажмите кнопку Deploy, чтобы сохранить функцию.

В коде функции мы используем возможности библиотеки разработки AWS SDK, которую вам следует изучить детальнее, если вы планируете расширять функционал.

Такие функции работают на основе событий. События приходят, они их обрабатывают, отправляя либо ответ, либо создавая новые события следующим функциям или сервисам (как в нашем случае). Теперь давайте проверим, работает ли функция:

1. На странице вашей функции найдите вкладку Test

2. Выберите New event

3. Дайте имя вашему тесту, чтобы можно было его повторять

4. Введите данные теста в виде следующего JSON:

5. Нажмите Test

6. Проверьте получение почты

В инструкции вы найдёте больше деталей о том как настроить тестовое событие.

Теперь необходимо дать возможность коду, внешнему к вашему облаку, и развёрнутому где-то на серверах Git Hub, достучаться до вашей функции отправки сообщений. Для этого нам понадобится так называемое публичное API. Для этого мы воспользуемся ещё одним сервисом AWS API Gateway:

1. В «консоли AWS» на странице сервиса Lambda нажмите кнопку Add trigger

2. Выберите API Gateway и в ниспадающем списке Add API

3. Выберите тип REST API и дайте имя вроде MyBusinessEmailApi

4. На странице Resources выбирайте из списка Actions пункт "Create Resource"

5. Назовите новый ресурс “send-email” и обязательно выберите галочку “Enable CORS”

6. Выделив только что созданный ресурс выберите из списка Actions пункт "Create Method" типа POST

7. Теперь нужно связать этот API с функцией, которая будет исполняться. Введите имя своей функции, созданной выше:

8. В результате, у вас должен появиться REST API с двумя методами: POST (для отправки сообщений) и OPTIONS (это метод, используемый браузерами для проверки безопасности).

9. Осталось сделать его доступным, выбрав из списка Actions пункт Deploy API

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

Осталось пойти в репозиторий с кодом на GitHub и отредактировать файл HTML формы, подставив в коде JavaScript правильный URL адрес в атрибут “action” вашей HTML формы:

Вместо [REGION], разумеется, нужно вставить код своего региона. Но это вы уже умеете.

Итого, мы построили техническое решение, которое:

• Располагается на бесплатном высокодоступном хостинге
• Обрабатывает запросы от сайта в облаке и реализует задачу получения сообщений с фидбеком от клиентов
• Требует меньше 10 долларов в месяц и предполагает дальнейшее расширение
  

Вы можете подобным образом сделать формы обработки фидбеков о купленном товаре, проведение опросов общественного мнения и прочее прочее.

Это решение не идеально и требует доработок. Вот минимально необходимые доработки:

1. Добавить Captcha/ReCaptcha и тому подобные проверки перед отправкой формы, чтобы ваш API и ящик не завалили «спам» сообщениями, отправленными с помощью скриптов.

2. Создание полноценной аутентификации. Это позволило бы не только защититься от спама, но и создать базу клиентов с их контактами.

3. Автоматический деплой скриптами yaml. Это нужно разработчикам, для автоматизации и ускорения развёртывания.

Однако, вы можете сделать всю эту работу по мере того как ваш сайт/форма/бизнес набирает обороты. Уже после первой сотни обращений клиентов стоит задуматься о доработках, т.к. кто-то обязательно попытается зафлудить ваш ящик письмами... благо у вас есть первая линия обороны:

1. Лимит на отправку сообщений в минуту, выставленный на уровне AWS

2. Вы не платите за нагрузку/трафик, а лишь за запуск Lambda вычисления КОГДА НУЖНО и МОЖНО (в случае флуда вы не переплатите)

Это руководство позволяет сделать первый шаг. Не останавливайтесь, и делайте следующий!