Решил поделиться с сообществом практическим пошаговым руководством для новичков о том, как быстро и дёшево собрать простой сайт с формой обратной связи для проверки гипотезы бизнеса любой возможной сферы, в которой привлечение клиентов ожидается через веб.
В последнее время всё чаще слышно о концепции No-Code: создание приложений и сайтов без…
Конечно, тут приведен минимальный пример, который нужно привести в порядок с помощью CSS, но он уже функциональный. С помощью библиотеки jquery можно проверить поля на предмет наличия текста и отправить данные вашему API.
"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Размещение сайта в Internet"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"
Как было сказано выше, для статических сайтов размещение может быть бесплатным. Для этого воспользуемся бесплатной платформой для разработчиков 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, в котором это доменное имя прописано).
4. Нажмите “Create record” и создайте запись типа “CNAME” (выбирается из списка):
"}},{"type":"list","cover":false,"hidden":false,"anchor":"","data":{"items":["Выбираем Record type = CNAME","Record name = www","Value = mybusiness.github.io "],"type":"UL"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"","image":{"type":"image","data":{"uuid":"36553abf-2f44-56e5-a745-60f556c3d3b2","width":1339,"height":453,"size":46629,"type":"jpg","color":"f6f6f6","hash":"","external_service":[]}}}]}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"
5. После этого подождите несколько, обычно до 24, часов, чтобы DNS записи прописались во всех маршрутизаторах на пути к AWS
Через некоторое время ваш сайт станет доступным с URL https://www.mybusiness.com. А пока можно заняться подготовкой бек-енда.
"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Облачный бекенд"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Верифицируем домен для AWS SES"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"
В цепочке отправки писем всегда есть Источник и Адресат. Адресатом в данном случае будет Email адрес, который вы уже сделали выше. Для отправки почты с помощью кода необходимо воспользоваться специальным сервисом AWS Simple Email Service, который будет являться Источником сообщений.
Первостепенным шагом является необходимость подтверждения того, что вы являетесь владельцем данного домена и имеете право отправлять почту от этого имени. Для подтверждения необходимо пройти процесс верификации вашего доменного имени и почтового адреса, с которого вы будете отправлять сообщения от сайта.
Переходите на сервис Amazon SES, Domains и нажимайте Verify a Domain Name, вводите домен своего сайта и следуйте инструкциям в верхней части формы (нижние нас пока не касаются):
2. Жмём “Create record” и создаём запись типа “TXT”:
"}},{"type":"list","cover":false,"hidden":false,"anchor":"","data":{"items":["Выбираем Record type = TXT","Record name = … значение поля Name выданное выше…","Value = … значение поля Value выданное выше… "],"type":"UL"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"
Наличие этих значений, привязанных к вашему домену, будет говорить SES о том, что вы полностью его контролируете, а значит, можете отправлять туда и обратно письма.
Сначала нужно разрешить коду, исполняемому в облаке, отправку сообщений. Для этого надо создать так называемые IAM-разрешения (Оригинальные инструкции):
Таким образом, вы создали разрешение и роль. Они дают возможность отправлять Email, а так же логгировать события отправки для отладки. В официальной документации можно также найти примеры других разрешений IAM для SES.
4. Под Function code в редакторе editor pane, вставьте нижеследующий JavaScript код функции, представленный ниже, сначала заменив в одной из верхних строк код региона us-west-2 на код вашего региона выбранного в «Консоли AWS». Его можно найти в пункте меню справа сверху.
В коде функции мы используем возможности библиотеки разработки AWS SDK, которую вам следует изучить детальнее, если вы планируете расширять функционал.
"}},{"type":"code","cover":false,"hidden":false,"anchor":"","data":{"text":"// Copyright 2019 Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nvar aws = require(\"aws-sdk\");\nvar ses = new aws.SES({ region: \"us-east-1\" });\n\nexports.handler = (event, context, callback) => {\n const querystring = require('querystring');\n\n var parsedBody = querystring.parse(event.body);\n \n var params = {\n Destination: {\n ToAddresses: [\"hello@mysuperbusiness.com\"],\n },\n Message: {\n Body: {\n Text: { Data: \"Source email: \" + parsedBody.contactemail + \"\\r\\n\" + parsedBody.messagetext },\n },\n\n Subject: { Data: \"Email from \" + parsedBody.fullname },\n },\n Source: \"hello@mysuperbusiness.com\",\n };\n \n ses.sendEmail(params).promise();\n\n var response = {\n \"statusCode\": 200,\n \"headers\": {\n \"Access-Control-Allow-Headers\" : \"Content-Type\",\n \"Access-Control-Allow-Origin\": \"https://mysuperbusiness.com\",\n \"Access-Control-Allow-Methods\": \"OPTIONS,POST,GET\"\n },\n \"body\": \"{ Success: 'Email sent' }\",\n \"isBase64Encoded\": false\n };\n callback(null, response);\n};","lang":""}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"
Такие функции работают на основе событий. События приходят, они их обрабатывают, отправляя либо ответ, либо создавая новые события следующим функциям или сервисам (как в нашем случае). Теперь давайте проверим, работает ли функция:
В инструкции вы найдёте больше деталей о том как настроить тестовое событие.
"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Добавляем публичный API адрес через AWS API Gateway"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"
Теперь необходимо дать возможность коду, внешнему к вашему облаку, и развёрнутому где-то на серверах Git Hub, достучаться до вашей функции отправки сообщений. Для этого нам понадобится так называемое публичное API. Для этого мы воспользуемся ещё одним сервисом AWS API Gateway:
8. В результате, у вас должен появиться REST API с двумя методами: POST (для отправки сообщений) и OPTIONS (это метод, используемый браузерами для проверки безопасности).
10. После успешного развёртывания система покажет вам ссылку, по которой можно вызвать ваш метод, сохраните её себе.
"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Связываем контактную форму с API"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"
Осталось пойти в репозиторий с кодом на GitHub и отредактировать файл HTML формы, подставив в коде JavaScript правильный URL адрес в атрибут “action” вашей HTML формы: