Как создать приложение для SMS-уведомлений с помощью JavaScript и Serverless Framework

Кто любит собак? Я обожаю! Настолько, что решил создать сайт для устойчивых к спаму SMS-уведомлений с использованием Serverless Framework на AWS, Twilio, Google Recaptcha и Node.js (просто чтобы показать вам фотографии моего щенка). Создание этого проекта должно быть бесплатным или стоить всего несколько центов. Когда будете готовы, давайте разберем, как создать собственное Serverless-приложение и интегрировать его с несколькими API для расширения функциональности.

Первое, что нам нужно сделать, — собрать зависимости и учетные данные API. Для этого проекта мы будем использовать Git, Node.js и npm. Следуйте этому руководству, чтобы настроить Node и npm.

Начните с установки Serverless Framework, выполнив команду `npm install serverless -g` в терминале (или командной строке). Давайте настроим учетную запись AWS, если у вас ее еще нет. Весь процесс должен быть бесплатным — вам также не нужно подписываться на какие-либо платные планы поддержки при регистрации аккаунта. После этого настроим учетные данные AWS, следуя этому руководству. Учтите, что Serverless Framework в настоящее время требует довольно много разрешений. Поэтому вам нужно настроить его с помощью API-ключей, имеющих права администратора для вашей учетной записи.

Теперь получим учетные данные Google Recaptcha. Приложение использует Recaptcha V2 с чекбоксом «Я не робот» и проверкой. Вы можете зарегистрироваться для Recaptcha V2 с помощью учетной записи Google здесь. Во время регистрации для Recaptcha V2 убедитесь, что:

— Включили `amazonaws.com` в список доменов. Это позволит вашей Recaptcha загружаться на статическом сайте AWS, который мы будем развертывать.

— Скопировали значения `data-sitekey` и `secret` Recaptcha в место, где вы сможете к ним обратиться. Мы добавим их в файл конфигурации через минуту.

Наконец, создайте учетную запись Twilio, если у вас ее еще нет. При первом создании учетной записи вам нужно будет подтвердить номер телефона, который вы будете использовать с аккаунтом, но взамен вы получите несколько долларов в виде пробных кредитов для использования в этом приложении. После завершения регистрации и подтверждения аккаунта обязательно скопируйте значения «ACCOUNT SID» и «AUTH TOKEN» из раздела API Credentials на странице настроек аккаунта и сохраните их в надежном месте. Если вы их потеряете, вы всегда сможете найти их в Twilio Console. Вам также нужно будет создать номер телефона Twilio и сохранить его для дальнейшего использования.

После завершения этой настройки мы можем перейти к созданию нашего Serverless-сервиса!

Начните с клонирования моего репозитория GitHub для проекта с помощью этой команды:

`git clone https://github.com/fernando-mc/serverless-node-text-message-app`

В только что клонированном репозитории откройте файл `serverless.yml`. Замените значения по умолчанию в разделе `environment` на недавно полученные значения Twilio и Google Recaptcha. Также учтите, что в этот файл нужно вставить номер телефона Twilio, а не ваш личный номер. После завершения обязательно сохраните файл. Важное предупреждение: не фиксируйте учетные данные API в исходном коде. Существуют более безопасные способы управления API-ключами, но они немного выходят за рамки этого демонстрационного проекта!

После этого выполните команду `npm install` в корневой папке клонированного проекта, чтобы установить зависимости проекта. Это установит помощник Twilio, пакет `request` и плагин Serverless под названием `serverless-finch`. Если вы заметите какие-либо ошибки в процессе, я бы рекомендовал также выполнить команду `npm update`.

Теперь, когда все зависимости установлены и код настроен, давайте развернем наш Serverless API с помощью команды `serverless deploy`. Обязательно скопируйте значение, которое будет возвращено в консоли для конечной точки API Gateway. Оно должно выглядеть примерно так:

`https://qw324asdasd.execute-api.us-east-1.amazonaws.com/dev/api/sendSms`

Вы можете легко протестировать свою конечную точку с помощью Postman. Как на фотографии ниже, убедитесь, что вы изменили тип запроса на POST, тело запроса на необработанный JSON и ввели допустимый JSON, например `{“data”:”stuff”}`, в поле ввода тела перед нажатием кнопки отправки.

В Unix-среде вы также можете использовать `curl`:

`curl -X POST -d ‘{«data»:»stuff»}’ https://qw324asdasd.execute-api.us-east-1.amazonaws.com/dev/api/sendSms`

Ваш ответ должен выглядеть так:

Это на самом деле хорошая новость! Это означает, что функция, созданная Serverless Framework, проверяет входные данные POST-запроса и говорит «НЕТ!», потому что мы не предоставили ей действительный токен Recaptcha. Мы исправим это через минуту с помощью нашего статического сайта.

Давайте остановимся здесь и посмотрим, что мы на самом деле делаем с командой `serverless deploy`, которую использовали минуту назад. Вот основы:

— Файл serverless.yml преобразуется в стек AWS CloudFormation и используется для описания и создания необходимой инфраструктуры, включая:

— Конечную точку AWS API Gateway

— Функцию AWS Lambda на Node.js (которую мы рассмотрим более подробно чуть позже)

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

Если вы посмотрите на наш файл serverless.yml в разделе `functions`, то увидите, что мы описываем детали функции и «события», которые будут ее запускать. Код самой функции Lambda находится в файле handler.js. После развертывания конечная точка API Gateway создает общедоступную API-конечную точку, которую мы протестировали, отправив на нее POST-запрос.

Давайте рассмотрим сокращенную версию того, как файл handler.js проверяет данные, поступающие через API Gateway.

Но как мы будем использовать все это в приложении? Вы можете использовать эту конечную точку API практически на любом сайте. Поскольку мы создали нашу Recaptcha для использования с доменом `amazonaws.com`, мы воспользуемся статическим хостингом сайтов AWS.

Чтобы ускорить этот процесс, мы будем использовать две вещи: готовый шаблон статического сайта, включенный в папку client/dist/ в клонированном коде, и плагин Serverless Framework `serverless-finch`, который мы будем использовать для развертывания нашего статического сайта!

Сначала нам нужно подготовить наш статический сайт к развертыванию. Откройте файл index в `client/dist/index.html` с помощью текстового редактора и внесите два изменения:

— Замените текст `YOUR_RECAPTCHA_SITE_KEY` на значение `data-sitekey`, полученное на этапе настройки Google Recaptcha ранее. Это позволит статическому сайту загружать вашу конкретную Google Recaptcha для проверки. (Это значение отличается от значения `secret`, которое мы также скопировали и добавили в serverless.yml).

— Замените текст `YOUR_API_ENDPOINT_URL` на URL-адрес конечной точки, который вы скопировали в процессе развертывания. Это заставит ваш статический сайт отправлять данные на только что развернутую конечную точку API.

После внесения этих изменений и сохранения файла index.html откройте файл serverless.yml и замените последнее значение конфигурации `your-unique-bucketname-here` на уникальное имя S3-бакета для развертывания вашего приложения. Это значение должно быть уникальным, поскольку S3-бакеты уникальны в глобальном масштабе. Я бы предложил что-то вроде `fernandos-node-text-message-app-20170701`, чтобы избежать конфликтов имен. Сохраните файл serverless.yml после завершения.

Теперь давайте используем плагин `serverless-finch` для развертывания нашего статического сайта с помощью команды `serverless client deploy`. Это развернет содержимое нашей папки `client/dist/` как статический сайт в S3-бакете на AWS. По завершении процесса он должен вывести местоположение нашего развернутого проекта — скопируйте его в браузер и посмотрите!

По умолчанию страница называется «Woof Garden». Это вымышленный бизнес, который я использую как предлог, чтобы украшать большинство своих демонстрационных приложений фотографиями своих питомцев. Чтобы использовать приложение, введите номер телефона, который вы использовали для создания учетной записи Twilio (ваш личный номер мобильного телефона). Это связано с тем, что пробная учетная запись Twilio позволяет отправлять сообщения только на этот подтвержденный номер во время тестирования. Вам также нужно будет ввести сообщение и успешно пройти проверку Recaptcha, прежде чем вы сможете отправить сообщение. После успешной отправки вы получите это текстовое сообщение на свой мобильный телефон!

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

— Вкладка Network в Chrome — эта вкладка может показать, что происходит с вашими запросами, если у вас возникнут проблемы при создании этого приложения. Обычно это первое место, где стоит проверить сбои и ошибки запросов.

— Postman — отличный инструмент для тестирования ваших API-конечных точек, чтобы проверить, возвращают ли они ожидаемые данные для данного запроса. Я использую его, когда застреваю при создании нового Serverless API.

— Журналы CloudWatch — если вы видите ошибки 400/500 в ваших API-запросах, возможно, на самом деле есть проблема на стороне сервера, которая отображается как 405. Это может произойти, если в вашей функции Lambda есть ошибки, которые не обрабатываются должным образом. В этом случае я бы рекомендовал просмотреть журналы CloudWatch для ваших функций в консоли AWS. Они покажут трассировки стека и дополнительные детали сбоев, что поможет в отладке.

И это все! Мы только что развернули наше первое Serverless-приложение! Этот проект можно модифицировать для создания формы обратной связи по электронной почте, приложения для обмена SMS-сообщениями или множества других вещей. Самое лучшее в такой архитектуре — то, что вы можете платить доли цента (или ничего) за каждое использование и пользоваться преимуществами экономии и безопасности статических сайтов.

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

Вы также можете узнать больше о Serverless-темах из моих курсов на Pluralsight.

Также не стесняйтесь обращаться ко мне в Twitter через @fmc_sea.