Как отправлять текстовые сообщения со статического сайта с помощью Netlify, Twilio и бессерверных функций

Пришло время быть Frontend-разработчиком. С появлением современных технологий, таких как бессерверные функции, интерфейсные инженеры могут делать то, что обычно могут делать только серверные инженеры. Это влечет за собой развертывание масштабируемых сайтов, отправку электронных писем или создание конечных точек HTTP. Благодаря мощи новых поставщиков услуг и бесчисленных API-интерфейсов создание высокопроизводительных приложений стало скорее игрой в соединение точек, чем построение всего с нуля.

В этой статье я хочу поделиться тем, как можно создать и развернуть масштабируемый статический сайт на Netlify и как можно использовать бессерверные функции для отправки текстовых сообщений с помощью Twilio.

Окончательный результат вы можете увидеть на 8-bit-revolution.netlify.com. Вы можете пойти туда и сказать мне, как сильно вы любите старый добрый 8-битный стиль с помощью SMS. Если вы хотите создать сайт, похожий на 8-битную революцию, вы можете заглянуть в ридми проекта. Он включает в себя кнопку установки в один клик, с помощью которой вы можете самостоятельно создать веб-сайт для отправки SMS. В настройках вы можете настроить телефонные номера получателей и текст, который хотите отправить.

Если вместо этого вы хотите продолжить и понять, как это работает, для начала вам потребуется:

Аккаунт Twilio
Аккаунт Netlify
Аккаунт GitHub
Node.js установлен

Почему статический?

HTML поддерживает Интернет, а статическое обслуживание HTML имеет несколько преимуществ. Статические сайты более безопасны, поскольку требуют меньше вычислений. HTML-код создается заранее, и файлы могут обслуживаться с сервера в соотношении 1: 1, что снижает количество векторов атаки. Кроме того, статические сайты дешевы. Страницы GitHub и другие поставщики услуг в основном предлагают бесплатный хостинг статических сайтов. И, наконец, статические сайты масштабируемы. Для обслуживания статических файлов не требуется больших вычислительных мощностей на стороне сервера, и в случае необходимости вы можете быстро разместить CDN перед своим сайтом, чтобы он был готов обслуживать миллионы посетителей.

Однако написание сотен простых HTML-страниц вручную может быть обременительным. Вот почему инструменты сборки и генераторы статических сайтов стали обычной практикой. Эти инструменты объединяют шаблоны с файлами Markdown или данными API для создания статического HTML.

Это приводит к необходимости более сложной настройки. Серверу необходимо сгенерировать HTML, а затем загрузить HTML на ваш статический хост сайта. Именно здесь вступают в игру системы непрерывной интеграции (CI), такие как TravisCI. Эти службы позволяют вам перестроить ваш сайт, когда вы отправляете обновления кода или когда контент был обновлен.

Netlify - ваш CI, CDN и бессерверная платформа

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

Звучит отлично? Давай сделаем это!

Создайте свой статический сайт

Создайте новый каталог и включите подкаталог dist. dist будет содержать все файлы, которые должны быть развернуты Netlify. Вы можете поместить туда файл barebones index.html, подобный приведенному ниже, и все готово.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>8-bit revolution</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="theme-color" content="#fafafa">
</head>
<body>
  <p>8-bit rocks!</p>
</body>
</html>

Кроме того, вы должны определить команду, которая должна запускаться при развертывании сайта. Инициализируйте новый проект npm в каталоге проекта.

Флаг --yes позволяет вам пропустить анкету, которая обычно идет с npm, когда вы создаете новый проект. Команда создает новый package.json, который является файлом конфигурации для проектов Node.js. Давайте добавим фиктивную команду сборки, которая отображает только сообщение журнала в свойстве scripts включенного объекта JSON.

Ваш package.json должен выглядеть примерно так:

{
  "name": "8-bit-revolution-tut",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "echo \"Building your new static site!\""
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/stefanjudis/8-bit-revolution-tut.git"
  },
  "keywords": [],
  "author": "stefan judis <[email protected]>",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/stefanjudis/8-bit-revolution-tut/issues"
  },
  "homepage": "https://github.com/stefanjudis/8-bit-revolution-tut#readme"
}

Примечание. Свойства имени, репозитория, автора, ошибок и домашней страницы будут отличаться и адаптированы для вашего пользователя и проекта.

Вы можете запускать все определенные script свойства в своем терминале, используя npm run, за которым следует имя свойства. При выполнении npm run build появится сообщение «Создание нового статического сайта!» к терминалу. Это еще не так много, и позже в этом руководстве вы добавите в этот скрипт дополнительные функции.

Инициализируйте git в корне вашего проекта и отправьте его в новый репозиторий GitHub.

После фиксации и отправки этих двух файлов на GitHub вы готовы к развертыванию сайта. Перейдите в Netlify, войдите в систему и нажмите «Новый сайт из Git», чтобы подключить ваш репозиторий к Netlify.

После подключения к GitHub вы сможете выбрать только что созданный репозиторий. Netlify спросит вас о ветке и каталоге, которые следует развернуть, и, дополнительно, о том, какой сценарий вы хотите выполнить в процессе развертывания. В данном случае это будут master, dist и npm run build.

Нажмите Развернуть сайт и увидите, как ваш статический сайт внедряется в Интернет. Развертывание займет всего пару секунд и будет доступно на случайном поддомене, например frosty-mclean-c6c41c в Netlify. Вы можете изменить этот поддомен или подключить свой домен, если хотите. 🎉

Поздравляю! Нажимая «развернуть сайт», вы настраиваете новый конвейер развертывания.

Самое интересное в соединении Netlify и GitHub заключается в том, что всякий раз, когда вы отправляете новый код на GitHub, Netlify получает уведомление через веб-перехватчики и автоматически развертывает ваш сайт. Он также готов принимать запросы от любой системы, которую вы используете, так что вы можете запускать перестройку после различных событий, таких как обновление контента в системе удаленного управления контентом.

Добавьте форму, чтобы разрешить ввод данных пользователем

Для отправки сообщений статического HTML недостаточно. Вы должны добавить способ разрешить ввод данных пользователем, например, нажатие кнопки или ввод данных. К счастью, Netlify предоставляет встроенную обработку форм. Замените 8-битные камни! абзац следующего вида.

<form name="contact" class="form" method="POST" data-netlify="true">
    <h1>Wanna spread the word?</h1>
    <button class="btn" type="submit">Send messages!</button>
</form>

Форма должна включать атрибут data-netlify=”true”. Это говорит Netlify, что вы хотите, чтобы отправка этой формы обрабатывалась их серверами. Зафиксируйте и вставьте код. Дождитесь завершения развертывания и вуаля - теперь вы можете обрабатывать отправку форм!

Данные всех отправленных форм будут доступны в админке Netlify в разделе «Формы». Это делает его идеальным для сбора данных из контактных форм и многого другого.

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

Я предпочитаю отправлять форму через JavaScript, чтобы избежать перенаправления.

Используйте Ajax для отправки форм

Благодаря реализации глобально доступного метода fetch вы можете делать запросы прямо из браузера без необходимости добавлять какие-либо зависимости.

Прежде чем приступить к реализации функциональности Ajax, добавьте на страницу еще два HTML-элемента. Эти элементы будут указывать на успешность или ошибку запроса на отправку формы.

<p class="successMsg" role="alert" hidden>Messages sent...</p>
<p class="errorMsg" role="alert" hidden>Something went wrong...</p>

Добавьте встроенный элемент script внизу страницы. Используя собственные методы DOM, вы можете прослушивать событие отправки формы и применять настраиваемые функции, такие как создание запроса AJAX.

<script>
  const form = document.querySelector('form');
  form.addEventListener('submit', async event => {
    event.preventDefault();
    
    // disable button to prevent multiple submissions
    form.querySelector('button').disabled = true;

    // make the request to submit the form
    try {
      const response = await fetch('/', {
        method: 'post',
        headers: {
          'Content-type': 'application/x-www-form-urlencoded; charset=UTF-8'
        },
        // parse and submit all included form data
        body: new URLSearchParams(new FormData(form)).toString()
      });

      // if it was successful show success message
      if (response.status === 200) {
        document.querySelector('.successMsg').hidden = false;
      } else {
        document.querySelector('.errorMsg').hidden = false;
      }
    } catch (e) {
      console.error(e);
    }
  });
</script>

Метод fetch возвращает обещание. Если поддержка вашего браузера это позволяет, вы можете использовать асинхронную функцию в качестве обработчика отправки, чтобы избежать обратных вызовов и затем-цепочек в сочетании с await и try/catch.

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

Прежде чем реализовывать часть отправки SMS, давайте вернем на сайт 8-битный стиль. Скопируйте стили из репозитория примеров и вставьте их в новый файл styles.css в вашем dist каталоге. Кроме того, добавьте ссылку на шрифт Google, на который есть ссылка в только что вставленных стилях в index.html.

<head>
  <meta charset="utf-8">
  <title>8-bit revolution</title>
  <!-- reference the new stylesheet -->
  <link rel="stylesheet" href="/styles.css" />
  <!-- load Google Font to get get a nice 8-bit font -->
  <link
    href="https://fonts.googleapis.com/css?family=Maven+Pro|Yrsa|Press+Start+2P"
    rel="stylesheet"
  />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="theme-color" content="#fafafa">
</head>

Не так уж плохо! Теперь, когда ваш сайт выглядит красивым и «8-битным», давайте реализуем функцию SMS.

Реагирование на отправленные формы с использованием бессерверных функций

Когда пользователь отправляет форму, ничего не происходит, за исключением того, что Netlify сохраняет данные формы. Для реализации функции отправки SMS вы можете использовать бессерверные функции, предоставляемые Netlify. Для создания этих функций рекомендуется использовать пакет netlify-lambda npm. Установите пакет через командную строку.

npm install --save netlify-lambda

netlify-lambda встраивает все зависимости, включенные в ваши функции, чтобы они стали исполняемыми в среде Netlify. Создайте каталог с именем functions и добавьте файл JavaScript submission-created.js. Netlify следует соглашениям об именах для запуска функций после определенных событий. Кроме того, вы можете дать своему функциональному файлу имя, которое не включено в список, чтобы также запускать новые конечные точки HTTP.

// submission-created.js
exports.handler = function(event, context, callback) {
  console.log('Submission created!')
};

Прежде чем вы сможете сгенерировать функцию, вы должны определить каталог, в котором она должна храниться. Создайте netlify.toml файл в корне вашего проекта. Определите свойство [build] и укажите конфигурацию, в которой ваши сгенерированные готовые к запуску функции будут храниться в каталоге .functions.

[build]
  functions = ".functions"

Настройте свой package.json для построения бессерверных функций во время развертывания.

{
  "scripts": {
      "build": "netlify-lambda build functions"
    } 
}

Когда вы запускаете npm run build локально, он генерирует новый .functions каталог, включающий функции, которые готовы к запуску в Netlify. Новый каталог .functions включает сгенерированный код, и, возможно, не стоит проверять его в git и отправлять на GitHub. Обязательно создайте .gitignore файл, содержащий сгенерированный каталог.

# .gitignore
# generated functions
.functions

С этими настройками вы можете зафиксировать и отправить на GitHub. Netlify автоматически развернет веб-сайт, включая функцию, которая запускается, когда кто-то отправляет форму.

Когда вы отправите форму, чтобы рассказать миру о 8-битной системе и попадете в журнал функций в Netlify, вы увидите сообщение «Отправка создана!» сообщение.

Отправка SMS в бессерверной функции

На этом этапе ваша функция готова реагировать на отправку формы, и вы можете начать отправлять текстовые сообщения. Чтобы отправлять сообщения с помощью Twilio, вы должны указать конфиденциальную информацию, такую как SID вашей учетной записи, токен вашей учетной записи и номера телефонов людей, которым вы хотите отправлять сообщения. Убедитесь, что они не попали в общедоступный репозиторий git.

Установите пакет dotenv, используя npm install --save dotenv. Он позволяет вам читать переменные конфигурации из .env файла в корне каталога и делает их доступными в вашей бессерверной функции через process.env. Создайте файл .env, включите его в свой .gitignore и определите следующие значения, заменив их своими собственными:

TWILIO_ACCOUNT_SID = “YOUR-TWILIO-ACCOUNT-SID”
TWILIO_AUTH_TOKEN = “YOUR-TWILIO-AUTH-TOKEN”
BOT_NUMBER = “YOUR-BOUGHT-TWILIO-NUMBER”
BOT_MESSAGE = "YOUR-MESSAGE"
CONTACT_NUMBERS = "NUMBERS-THAT-SHOULD-RECEIVE-A-MESSAGE"

Чтобы получить все эти значения, войдите в Twilio. Вы можете найти SID своей учетной записи и токен авторизации на панели управления. Токен аутентификации - это очень конфиденциальная информация, поскольку он может предоставить тот же доступ, что и текущий пользователь. Я рекомендую ознакомиться с некоторыми лучшими практиками по обеспечению безопасности вашего токена аутентификации, прежде чем продолжить.

Далее вам нужно купить номер телефона Twilio. Убедитесь, что вы покупаете один с возможностью отправки SMS.

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

Тогда ваш .env файл должен выглядеть так:

TWILIO_ACCOUNT_SID = "AC..."
TWILIO_AUTH_TOKEN = "a8..."
BOT_NUMBER = "+4915735982595"
BOT_MESSAGE = "8-bit rocks!"
CONTACT_NUMBERS = "+491761234567;+49170987654"

Настройте свою функцию для доступа к определенным выше значениям.

// submission-created.js
// load the env file and make values accessible via process.env
require('dotenv').config();

const {
  TWILIO_ACCOUNT_SID,
  TWILIO_AUTH_TOKEN,
  CONTACT_NUMBERS,
  BOT_NUMBER,
  BOT_MESSAGE
} = process.env;

exports.handler = function(event, context, callback) {
  console.log('Submission created!')
  // the logic for sending the message will go here
};

Установите вспомогательную библиотеку Twilio в командной строке.

npm install --save twilio

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

// submission-created.js

// ...
// 👆 dotenv and process.env handling as above

// initialize the helper library client
const client = require('twilio')(TWILIO_ACCOUNT_SID, TWILIO_AUTH_TOKEN);

exports.handler = function(event, context, callback) {
  Promise.all(
    // split the string of several messages into single numbers
    // send message to each of them
    CONTACT_NUMBERS.split(';').map(num => {
      return client.messages.create({
        from: BOT_NUMBER,
        to: num,
        body: BOT_MESSAGE
      });
    })
  )
    .then(() => callback(null, { statusCode: 200, body: 'Created' }))
    .catch(e => {
      console.log(e);
      callback(e);
    });
};

Чтобы запустить вашу функцию локально, добавьте команду serve к package.json, чтобы запустить локальный сервер разработки.

{
  "scripts": {
      "serve": "netlify-lambda serve functions"
    } 
}

Приведенная выше команда netlify-lambda построит и сгенерирует вашу функцию и откроет конечную точку HTTP. Если вы запустите npm run serve, а затем откроете http: // localhost: 9000 / submission-created, он запустит вашу функцию и отправит SMS-сообщения. 🎉

Зафиксируйте и нажмите новую функцию и дождитесь развертывания. Но подождите ... когда вы попытаетесь отправить SMS, нажав кнопку на развернутом сайте Netlify, вы обнаружите, что это еще не работает. Помните, что вы поместили свой .env файл в .gitignore?

Работа с .env файлами в сочетании с переменными среды - обычная практика, позволяющая избежать утечки учетных данных. Используя dotenv, вы можете убедиться, что ваше приложение работает как с определенными переменными среды, так и .env файлами конфигурации. Локально dotenv читает файл .env и помещает значения в process.env. В производстве - вы должны сами определить эти переменные среды в process.env. Таким образом, вам не нужно размещать учетные данные в общественных местах.

Вы можете определить переменные среды в административной области Netlify в разделах «Сборка», «Параметры сборки» и «Переменные среды сборки».

Сохраните значения и запустите новую сборку. Теперь нажатие на кнопку покажет всем получателям, что вы любите 8-битный формат. 🎉

Окончательную реализацию функции вы можете найти на GitHub.

Вывод

В этом руководстве вы узнали, как развертывать статические сайты с помощью Netlify, обогащать свои сайты с помощью бессерверных функций и отправлять SMS с помощью Twilio.

Бессерверные функции - прекрасные соединители в мире, управляемом API, в котором мы живем. Они могут подключать сервисы, принимать веб-перехватчики или даже отвечать на SMS-сообщения.

Сообщите мне, какие сообщения вы отправляете. Вы можете найти полный код на GitHub. Он включает в себя более сложный процесс отправки формы, который вы, возможно, захотите проверить.

Если у вас есть какие-либо вопросы, не стесняйтесь обращаться по следующим каналам:

Электронная почта: [email protected]
Github: stefanjudis
Twitter: @stefanjudis

Первоначально опубликовано на www.twilio.com.