Давайте создадим бессерверный 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, которая вызвала нашу лямбда-функцию и показала наши результаты во внешнем интерфейсе. Это отличные строительные блоки, из которых вы можете разветвляться и делать гораздо больше. Я призываю вас посмотреть, что еще вы можете создать, и поделиться своими результатами здесь, комментируя статью. Кроме того, следите за тем, чтобы это было видео. Спасибо за чтение!
Дополнительный контент:
- Отраслевой прогноз на 2019 год
- Лучшие практики для бессерверной разработки
- Бессерверный CI / CD
- Бессерверные веб-приложения - AWS v GCP
- Бессерверное влияние, скорость разработчика
- Путеводитель, Первый бессерверный проект
Что делает Serverless Guru?
Serverless Guru помогает компаниям создавать масштабируемые и экономичные приложения в облаке. Мы помогаем обучать компании тому, как использовать IAC, бессерверные и облачные сервисы. Мы помогаем перенести существующие приложения в облако и оптимизировать существующие приложения в облаке, чтобы сделать их более рентабельными. Мы являемся партнером по бессерверной разработке и партнером-консультантом AWS.
Что мы упустили?
Когда вы оставляете свой ответ, обязательно оставьте комментарий ниже или напишите свой ответ @serverlessgurux в Twitter.
Джош Линтон
Облачный разработчик - Бессерверный гуру
LinkedIn - @lintonjh
Спасибо за чтение 😃
Если вы хотите узнать больше о Serverless Guru, подпишитесь на нас в Medium, Twitter, Instagram, Facebook или LinkedIn!