Я получил в свои руки некоторые продукты Amazon Web Services (AWS) и подумал об использовании DynamoDB для одного из своих проектов, чтобы получить практический опыт работы с продуктом и посмотреть, как он работает.

Для этого проекта я использовал следующее:

  • Реагировать
  • Amazon DynamoDB
  • АВС Лямбда
  • Шлюз API Amazon

Ниже вы можете узнать, как я это сделал, или посмотреть код на Github.

Создать React-приложение

Вы можете использовать интерфейс командной строки или добавить компоненты React на существующий HTML-сайт. Я использую CLI:

npx create-react-app my-app
cd my-app
npm start

Для этого приложения я буду использовать Библиотеку форм React Hook, которая будет обрабатывать проверку, и Tailwind для обработки пользовательского интерфейса, поэтому давайте установим ее:

npm install react-hook-form

А для Tailwind можно следовать инструкции здесь.

Добавим в нашу форму:

Как видите, это простая форма, которая отправляет 3 поля (имя, сообщение и адрес электронной почты). Мы еще не настроили отправку в AWS, но вернемся к этому позже.

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

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

В консоли AWS вы можете выбрать DynamoDB в верхнем меню или выполнить поиск в верхней строке поиска.

Выберите Создать таблицу, она должна находиться в правой части целевой страницы DynamoDB.

В следующем окне введите имя вашей таблицы и дайте ей первичный ключ.

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

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

Теперь мы собираемся создать функцию Lambda для отправки данных из шлюза API в DynamoDB.

В консоли AWS вы можете выбрать Lambda в верхнем меню или выполнить поиск в верхней строке поиска.

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

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

Затем вы попадете в редактор кода для Lambda с некоторым кодом по умолчанию для функции. Но давайте взглянем на код, который я написал для сбора данных и отправки их в таблицу DynamoDB:

Вы можете запустить лямбда-тест, чтобы проверить, вставлены ли значения в таблицу DynamoDB:

{
  "name": "value1",
  "email": "[email protected]",
  "message": "Testing from lambda"
}

Теперь наша лямбда-функция и таблица готовы. Переходим к следующему пункту.

Создать шлюз API Amazon

Нам нужен API, чтобы иметь возможность подключить приложение React к DynamoDB. Вы можете создать свой собственный API или использовать Amazon API Gateway, чтобы все заработало.

В консоли AWS вы можете выбрать API Gateway в верхнем меню или найти его в верхней строке поиска.

Выберите Создать API, он должен быть расположен в правой части целевой страницы шлюза API.

Выберите REST API (не частный), дайте ему имя и/или описание.

В следующем окне создайте Ресурс (выберите раскрывающийся список Действия). Дайте ресурсу имя и включите CORS.

Затем создайте метод POST (выберите раскрывающийся список «Действия») для ресурса. Убедитесь, что тип интеграции — Lambda, и найдите свою функцию Lambda, чтобы она использовала ее при вызове этого метода.

Теперь нам нужно развернуть API, чтобы мы могли использовать его в нашем приложении. В раскрывающемся списке Действия выберите Развернуть API, и всплывающее окно должно запросить у вас промежуточную среду, в которой его следует развернуть. Вы также можете создать его в этом окне, я назвал свой prod по умолчанию.

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

Подключение API в React

Теперь, когда все готово, нам просто нужно завершить вызов API в приложении React.

Я собираюсь использовать Axios для обработки вызовов API, так что вперед, устанавливайте его:

npm install axios

Затем мы можем обновить метод onSubmit для нашей формы следующим образом:

  const onSubmit = (data) => {
    const payload = {
      name: data.name,
      email: data.email,
      message: data.message,
    };
    //Submission to AWS goes here
    axios.post('your-api-gateway-url-goes-here/prod/messages', payload)
    .then(function (response) {
      console.log(response);
    })
    .catch(function (error) {
      console.log(error);
    });
  };

Вы можете сделать то же самое или создать сервис/помощник для Axios и создать экземпляр Axios с базовым URI API.

Я надеюсь, что это помогло вам в вашем путешествии по DynamoDB.