Публикуем простой Serverless сайт с формой обратной связи для проверки гипотез используя облако AWS и хостинг GitHub
В предыдущей части я рассказал как использовать облако Amazon для регистрации своего бизнес домена и создать почтовый e-mail адрес в этом домене.
Теперь хочу поделиться практическим пошаговым руководством для новичков о том, как быстро и дёшево собрать простой сайт с формой обратной связи для проверки гипотезы бизнеса любой возможной сферы, в которой привлечение клиентов ожидается через веб.
В последнее время всё чаще слышно о концепции No-Code: создание приложений и сайтов без написания кода. Идея очень тесно пересекается с методологиями гибкой разработки Agile, где разработка ведётся маленькими итерациями, позволяя «повернуть» в нужную сторону максимально быстро, не теряя время и ресурсы на заранее неизвестные цели. Для этого будущий предприниматель собирает простую landing-страницу и пытается привлечь потенциальных покупателей услуги. И когда начинает появляться какой-то доход, тогда предпринимаются усилия по расширению услуг, улучшению качества и масштабированию.
Как правило, помимо визуальной части (баннеров, картинок) нужен ещё и какой-то функционал, что часто требует привлечения дорогостоящих специалистов в программировании и затрат на оплату инфраструктуры вроде серверов и баз данных.
No-Code решения действительно помогают сократить первоначальные инвестиции. Однако, бизнесы бывают разные, и No-Code платформы подойдут не каждому. Особенно, если ваш будущий бизнес всё-таки хоть немного про IT. У любой No-Code платформы есть ограничения, в которые вы обязательно упрётесь, как только ваша идея начнёт расти и понадобится расширять или чуть-чуть усложнять сайт/приложение. Иными словами, лучше контролировать то, какие технологии вы используете, чтобы можно было дорабатывать сайт, а не переделывать всё с ноля.
В статье я расскажу, как использовать бессерверные облачные технологии, которые от вас потребуют оплату только за фактическую отправку данных с формы, когда действительно пришел клиент и действительно что-то написал. Эта оплата составляет считанные цент (согласитесь, немного?).
Сразу оговорюсь, что данная статья не про Agile, и не про No-Code, и не про разработку (кода будет очень мало, но он будет). Она скорее подойдет людям, у которых уже есть базовые навыки HTML и CSS для создания простейших веб сайтов. Вероятно, это хоть немного технически подкованные люди, либо студенты колледжей и институтов, а может быть даже школьники.
Небольшой сайт — это две-три страницы описания идеи, или того, что вы там хотели бы проверить. Одна из страниц будет формой отправки обратной связи или обращения. На ней как минимум необходимы поля Тема, Email автора, Текст и кнопка Отправить . По нажатию кнопки Отправить , введённые данные должны приходить на вашу новую почту. Очевидно, сайт нужно создать и потом разместить в интернете, чтобы все могли на него заходить.
Домен для бизнеса и бизнес почту вы уже должны были создать по примеру предыдущей статьи. Что касается сайта, то если сложнее контактной формы на сайте ничего пока не нужно, то можно сделать полностью статический сайт, который можно будет быстро и очень дёшево (или бесплатно) разместить в 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 SES (для отправки сообщений)
Создаём сайт
Пожалуй, для вас это самая самостоятельная часть этого руководства. В зависимости от вашего опыта вы можете воспользоваться готовыми шаблонами сайтов, скопировать чей-то (может быть это и плохой совет, но так действительно делают многие на первых этапах), или создать с ноля свою небольшую landing страницу используя базовый HTML и CSS. Помните, чем проще и минималистичнее будет страница, тем лучше.
Будем считать, что в спокойной домашней обстановке, за пару вечеров в пижаме и тапочках, вы создаёте простой статический сайт с картинками, описанием услуги/идеи, и формой обратной связи. Можно сразу начинать с готовых шаблонов Bootstrap (самой популярной и простой библиотеки для HTML/CSS). Пройдя по их руководству можно за 10 минут создать простейшую страницу. А если позволяет опыт, то можно воспользоваться готовыми шаблонами и быстро создать более сложные страницы.
Допустим, что ваша форма обратной связи выглядит так:
Для создания этой формы достаточно примерно такого кода:
<html charset="UTF-8">
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.3/dist/jquery.validate.min.js"></script>
<script>
// Ждём загрузки DOM-дерева элементов формы
$(document).ready(function () {
$("#sendemail").validate({
// Правила валидации
rules: {
// Здесь по атрибуту name каждого поля формы определяется набор правил валидации формы
subject: {
required: true, // Обязательно к заполнению
minlength: 7
},
messagetext: {
required: true, // Обязательно к заполнению
minlength: 30
}
},
// Specify validation error messages
messages: {
subject: "Введите вашу почту и имя",
messagetext: "Введите сообщение"
},
// Получаем поля формы и отправляем на API Gateway в облако
submitHandler: function(form) {
var vals = $(form).serialize();
$.ajax({
url: "https://ptopyg7an3.execute-api.[REGION].amazonaws.com/Prod/send-email", // Заменить на свой
contentType: false,
processData: false,
crossDomain:true,
method: "POST",
data: vals
}).done(function() {
alert("Спасибо!");
}).fail(function() {
alert("Спасибо!");
});
return false;
}
});
});
</script>
</head>
<body>
<form id="sendemail" action="ОСТАВИТЬ ПОКА ПУСТЫМ" method="POST">
<div class="modal-body">
<div class="form-group">
<label for="subject">Subject:</label>
<input name="subject" id="subject" value="subject" class="col-form-label">
</div>
<div class="form-group">
<label for="messagetext">Message:</label>
<input name="messagetext" id="messagetext" value="message" class="col-form-label">
</div>
<div>
<button>Send</button>
</div>
</div>
</form>
</body>
Конечно, тут приведен минимальный пример, который нужно привести в порядок с помощью CSS, но он уже функциональный. С помощью библиотеки jquery можно проверить поля на предмет наличия текста и отправить данные вашему API.
Справитесь?
Размещение сайта в Internet
Как было сказано выше, для статических сайтов размещение может быть бесплатным. Для этого воспользуемся бесплатной платформой для разработчиков 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” (выбирается из списка):
a. Выбираем Record type = CNAME
b. Record name = www
c.
Value = mybusiness
.github.io
5. После этого подождите несколько, обычно до 24, часов, чтобы DNS записи прописались во всех маршрутизаторах на пути к AWS
Через некоторое время ваш сайт станет доступным с URL https://www.mybusiness.com . А пока можно заняться подготовкой бек-енда.
Облачный бекенд
Верифицируем домен для AWS SES
В цепочке отправки писем всегда есть Источник и Адресат. Адресатом в данном случае будет Email адрес, который вы уже сделали выше. Для отправки почты с помощью кода необходимо воспользоваться специальным сервисом AWS Simple Email Service, который будет являться Источником сообщений.
Первостепенным шагом является необходимость подтверждения того, что вы являетесь владельцем данного домена и имеете право отправлять почту от этого имени. Для подтверждения необходимо пройти процесс верификации вашего доменного имени и почтового адреса, с которого вы будете отправлять сообщения от сайта.
Переходите на сервис Amazon SES, Domains и нажимайте Verify a Domain Name, вводите домен своего сайта и следуйте инструкциям в верхней части формы (нижние нас пока не касаются):
1. В соседней вкладке браузера откройте сервис Route53, в котором перейдите на свою зону, как уже делали ранее.
2. Жмём “Create record” и создаём запись типа “TXT”:
a. Выбираем Record type = TXT
b. Record name = … значение поля Name выданное выше…
c.
Value = … значение поля Value
выданное выше…
3. Сохраните изменения
Наличие этих значений, привязанных к вашему домену, будет говорить SES о том, что вы полностью его контролируете, а значит, можете отправлять туда и обратно письма.
Создаём логику отправки сообщений
Сначала нужно разрешить коду, исполняемому в облаке, отправку сообщений. Для этого надо создать так называемые IAM-разрешения ( Оригинальные инструкции ):
1. В соседней вкладке браузера откройте сервис IAM (найдите его поиском, это удобно), и перейдите на страницу Policies.
2. Жмите "Create policy"
3. Выберите вкладку JSON
4. Вставьте в поле код нашего разрешения, приведённый ниже:
{
"Version": "2012-10-17",
"Statement": [
{
"Effect": "Allow",
"Action": [
"ses:SendEmail",
"ses:SendRawEmail",
"logs:CreateLogGroup",
"logs:CreateLogStream",
"logs:PutLogEvents"
],
"Resource": "*"
}
]
}
5. Дайте имя вроде
MyBusinessEmailSender
6. Сохраните изменения.
Теперь нужно создать роль и соединить её с разрешением.
7. Перейдите на страницу
Roles
и жмите "Create Role"
8. Выберите сервис
Lambda
9. Далее, выбирайте из списка ваше разрашение
MyBusinessEmailSender
10.Дайте Роли имя вроде
MyBusinessEmailSenderRole
11.Сохраните изменения.
Теперь самое время создать бессерверную функцию, которая будет просыпаться в момент прихода сообщения и слать его к вам на почту используя 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 , которую вам следует изучить детальнее , если вы планируете расширять функционал.
// Copyright 2019 Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
var aws = require("aws-sdk");
var ses = new aws.SES({ region: "us-east-1" });
exports.handler = (event, context, callback) => {
const querystring = require('querystring');
var parsedBody = querystring.parse(event.body);
var params = {
Destination: {
ToAddresses: ["hello@mybusiness.com"],
},
Message: {
Body: {
Text: { Data: "Source email: " + parsedBody.contactemail + "\r\n" + parsedBody.messagetext },
},
Subject: { Data: "Email from " + parsedBody.fullname },
},
Source: "hello@mybusiness.com",
};
ses.sendEmail(params).promise();
var response = {
"statusCode": 200,
"headers": {
"Access-Control-Allow-Headers" : "Content-Type",
"Access-Control-Allow-Origin": "https://mysuperbusiness.com",
"Access-Control-Allow-Methods": "OPTIONS,POST,GET"
},
"body": "{ Success: 'Email sent' }",
"isBase64Encoded": false
};
callback(null, response);
};
Такие функции работают на основе событий. События приходят, они их обрабатывают, отправляя либо ответ, либо создавая новые события следующим функциям или сервисам (как в нашем случае). Теперь давайте проверим, работает ли функция:
1. На странице вашей функции найдите вкладку Test
2. Выберите New event
3. Дайте имя вашему тесту, чтобы можно было его повторять
4. Введите данные теста в виде следующего JSON :
{
"Body": "subject=test%test.com&messagetext=This%20is%20my%20test%20message%20from%20some%20client "
}
5. Нажмите Test
6. Проверьте получение почты
В инструкции вы найдёте больше деталей о том как настроить тестовое событие.
Добавляем публичный API адрес через AWS API Gateway
Теперь необходимо дать возможность коду, внешнему к вашему облаку, и развёрнутому где-то на серверах 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. После успешного развёртывания система покажет вам ссылку, по которой можно вызвать ваш метод, сохраните её себе.
Связываем контактную форму с API
Осталось пойти в репозиторий с кодом на GitHub и отредактировать файл HTML формы, подставив в коде JavaScript правильный URL адрес в атрибут “action” вашей HTML формы:
<form id="sendemail" action="https://ttpohj3na7.execute-api.[REGION].amazonaws.com/Prod/send-email" method="POST">
Вместо [ REGION ] , разумеется, нужно вставить код своего региона. Но это вы уже умеете.
Можно тестировать!
Итого, мы построили техническое решение, которое:
- Располагается на бесплатном высокодоступном хостинге,
- Обрабатывает запросы от сайта в облаке и реализует задачу получения сообщений с фидбеком от клиентов,
- Требует меньше 10 долларов в месяц и предполагает дальнейшее расширение
Вы можете подобным образом сделать формы обработки фидбеков о купленном товаре, проведение опросов общественного мнения и прочее прочее.
Что следует знать
Это решение не идеально и требует доработок. Вот минимально необходимые доработки:
1. Добавить Captcha/ReCaptcha и тому подобные проверки перед отправкой формы, чтобы ваш API и ящик не завалили «спам» сообщениями, отправленными с помощью скриптов.
2. Создание полноценной аутентификации. Это позволило бы не только защититься от спама, но и создать базу клиентов с их контактами.
3. Автоматический деплой скриптами yaml. Это нужно разработчикам, для автоматизации и ускорения развёртывания.
Однако, вы можете сделать всю эту работу по мере того как ваш сайт/форма/бизнес набирает обороты. Уже после первой сотни обращений клиентов стоит задуматься о доработках, т.к. кто-то обязательно попытается зафлудить ваш ящик письмами... благо у вас есть первая линия обороны:
1. Лимит на отправку сообщений в минуту, выставленный на уровне AWS
2. Вы не платите за нагрузку/трафик, а лишь за запуск Lambda вычисления КОГДА НУЖНО и МОЖНО (в случае флуда вы не переплатите)
Это руководство позволяет сделать первый шаг. Не останавливайтесь, и делайте следующий!
Комментарии
Отправить комментарий