Давайте создадим бессерверный REST API для нашего веб-сайта ReactJS!

В моей последней статье Развертывание приложения ReactJS со статическим хостингом S3 мы обсуждали размещение простого приложения React на AWS с S3. Это отлично подходит для простых статических страниц, но что, если вы хотите сделать что-то еще? Как вы размещаете свой API на S3? Это то, что мы сегодня обсуждаем, как интегрировать API в наше приложение для получения или публикации информации из нашей собственной базы данных. Мы будем использовать Lambda, DynamoDB и шлюз API. Итак, приступим.

Наше приложение будет брать карточки из нашей базы данных и показывать их пользователю. Это работает, когда пользователь запрашивает карту с нашего веб-сайта, API Gateway вызывает нашу функцию Lambda, которая получает данные из DynamoDB и показывает их пользователю! Достаточно просто.

Создайте таблицу Amazon DynamoDB

Войдите в Консоль AWS и с помощью панели поиска перейдите к сервису DynamoDB.

Создать таблицу

Щелкните «Создать таблицу».

Назовите его «MagicCards». Введите «CardId» для ключа раздела и выберите «String».

Теперь у нас должно получиться что-то вроде этого.

Перейдем на вкладку «Элементы», выберем и создадим элемент. Добавьте значение в CardId. Вы даже можете добавить другие поля.

Создать роль IAM

Все функции Lambda нуждаются в роли IAM. Это то, что позволяет другим сервисам AWS взаимодействовать с нашей функцией. Найдите IAM в меню «Службы».

Создать новую роль IAM

Найдите роли слева и нажмите «Создать новую роль IAM».

Выберите Lambda в качестве основной услуги

В разделе «Выберите службу, которая будет использовать эту роль» выберите «Лямбда» и нажмите «Далее: разрешения».

Установить роль AWS IAM

Найдите «AWSLambdaBasicExecutionRole», выберите его и нажмите «Далее: Теги». Пропустите любые другие шаги и нажмите «Далее: Обзор».

Назови свою роль

Назовите роль как хотите, я выбираю «MagicCardsLambda». Затем нажмите «Создать роль».

Добавить встроенную политику

Щелкните свою новую роль. В правой части вкладки разрешений нажмите «Добавить встроенную политику».

Выберите сервис DynamoDB

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

В разделе ресурсов выберите Добавить ARN. Здесь мы используем ранее использованное имя ресурса Amazon. Как только это будет выбрано, нажмите «Добавить», а затем «Просмотреть политику».

Назовите политику

Введите имя, например «DynamoDBWrite», и нажмите «Создать политику».

Создать лямбда-функцию

Используйте меню «Службы» для поиска службы «Лямбда».

Создать функцию

Здесь мы можем создать его с нуля, использовать план или просмотреть репозиторий бессерверных приложений. Выберем вариант «Выбрать автора с нуля». Введите «GetMagicCard» или любое другое имя, которое хотите. В настоящее время используйте последнюю версию Runtime, это Node.js 8.10. Для роли «Исполнение» выберите «Использовать существующую роль». Здесь появляется наша роль IAM, выберите ее.

Создайте функцию

Нажмите «Создать функцию» и прокрутите вниз до «Код функции», здесь мы размещаем код для нашей лямбда-функции.

Скопируйте следующий код

Используйте приведенный ниже код для примера кода, затем нажмите «Сохранить».

Создать REST API

Теперь мы находимся на последней части, создавая REST API с API Gateway. В разделе «Службы» снова перейдите к «API Gateway».

Выберите НОВЫЙ API

Amazon API Gateway - это сервис AWS для создания, публикации, обслуживания, мониторинга и защиты REST и WebSocket API в любом масштабе. Разработчики API могут создавать API для доступа к AWS или другим веб-сервисам, а также к данным, хранящимся в облаке AWS.

Назовите свой API

Я назвал свой API «Волшебные карты». Оставьте «Тип конечной точки» как «Региональный». Затем нажмите «Создать API»! 🎉

Назовите свой API

Я назвал свой API «Волшебные карты». Оставьте «Тип конечной точки» как «Региональный». Затем нажмите «Создать API»! 🎉

Создать метод

Давайте создадим метод. Мы можем получить доступ к нашему API, и он запустит нашу новую функцию Lambda. Щелкните действие ›Создать метод. В новом раскрывающемся списке выберите Получить. Здесь мы можем выбрать лямбда-функцию для нашего типа интеграции, us-west-1 для лямбда-области, для лямбда-функции выберите имя, которое вы выбрали для своей функции, и нажмите «Сохранить»!

Создайте наш URL. Мы почти закончили с нашим API!

Теперь, когда у нас есть настройка Get, перейдите и выберите Stages слева. Здесь мы можем создать этап, на котором будут развернуты наши API. Вы можете создать тестовую версию и производственную версию. Придумайте название и описание теста. Выберите свое развертывание и создайте.

Возьмите наш URL. Мы сделали!

Нажмите на нашу сцену, и URL-адрес прямо здесь. Все, что нам нужно сделать, это просто вызвать этот URL-адрес в нашем приложении ReactJS, и все готово. Чтобы проверить это сначала, я предлагаю нажать на ссылку и убедиться, что вы получите правильный ответ.

Подключение API к приложению ReactJS

Теперь мы собираемся взять наш URL-адрес Invoke и добавить его в наше приложение React.

Скопируйте следующий код

Это довольно простой пример с веб-сайта React о том, как добавить API извлечения в ваше приложение React. Мы обращаемся к нашему API и настраиваем ответ на наше состояние. Затем, ниже, в нашей функции рендеринга, мы рендерим результаты.

Протестируйте локально

Для тестирования мы можем запустить npm run start, и мы должны увидеть всплывающее окно нашего веб-сайта с данными, поступающими из нашей таблицы DynamoDB 🔥

Поздравляю 🎉

Мы многое сделали для переноса нашего приложения в AWS. Мы создали таблицу DynamoDB и ввели некоторые элементы. Затем мы создали лямбда-функцию, которая при срабатывании будет сканировать нашу таблицу и возвращать результаты. Наконец, мы создали конечную точку API с API Gateway, которая вызвала нашу лямбда-функцию и показала наши результаты во внешнем интерфейсе. Это отличные строительные блоки, из которых вы можете разветвляться и делать гораздо больше. Я призываю вас посмотреть, что еще вы можете создать, и поделиться своими результатами здесь, комментируя статью. Кроме того, следите за тем, чтобы это было видео. Спасибо за чтение!

Дополнительный контент:

Что делает Serverless Guru?

Serverless Guru помогает компаниям создавать масштабируемые и экономичные приложения в облаке. Мы помогаем обучать компании тому, как использовать IAC, бессерверные и облачные сервисы. Мы помогаем перенести существующие приложения в облако и оптимизировать существующие приложения в облаке, чтобы сделать их более рентабельными. Мы являемся партнером по бессерверной разработке и партнером-консультантом AWS.

Что мы упустили?

Когда вы оставляете свой ответ, обязательно оставьте комментарий ниже или напишите свой ответ @serverlessgurux в Twitter.

Джош Линтон

Облачный разработчик - Бессерверный гуру

LinkedIn - @lintonjh

Спасибо за чтение 😃

Если вы хотите узнать больше о Serverless Guru, подпишитесь на нас в Medium, Twitter, Instagram, Facebook или LinkedIn!