Я получил в свои руки некоторые продукты 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.