Рубрики
Без рубрики

Генерация безременительно с реагированием и AWS усиливает часть 2: Создание и использование сервисов без сервеса

Peter Mbanugo Go Serverless с React и AWS усиливаете часть 2: Создание и использование серверу сервера без сервеса – это модель выполнения облачного вычисления, в которой облачный провайдер отвечает за выполнение куска кода путем динамически выделения ресурсов для запуска кода при необходимости. В предыдущем посте мы

Автор оригинала: FreeCodeCamp Community Member.

Питер Мбануго

Serverless – это модель выполнения облака, в которой облачный провайдер отвечает за выполнение куска кода путем динамически выделения ресурсов для запуска кода при необходимости. В предыдущем пост Мы смотрели на то, что такое SESERLELS, и мы настроим наш компьютер, чтобы иметь возможность создавать серверульные приложения, используя AWS Amminify. Мы загрузили проект React и добавили к нему библиотеку усилителя. В этом посте мы будем использовать усилитель CLI для обеспечения обеспеченного Backend API и базы данных NoSQL. Тогда мы будем потреблять эту API из проекта React.

Создание сервисных служб без сервеса

Приложение, которое мы собираемся построить, позволит пользователям выполнять основные операции CRUD. Мы будем использовать API отдыха с базой данных NoSQL. Следуйте инструкциям ниже, чтобы создать бэкэнд без сервера.

  1. Откройте командную строку и перейдите в корневой каталог вашего проекта.
  2. Запустите команду Усилить Добавить API Отказ
  3. Вы получаете подсказку, чтобы выбрать тип услуг. Выберите Отдых и нажмите Enter.
  4. Он предлагает вам ввести имя для текущей категории (категория API). Введите Тодосапы и нажмите Enter.
  5. Вы просят путь. Примите по умолчанию Предметы Путь нажатием ввода.
  6. Следующая подсказка запрашивает источник лямбда. API Berstless REST работает, создавая путь на шлюзе API и сопоставление этого пути к функции лямбда. Функция Lambda содержит код для выполнения, когда запрос сделан на путь, который он сопоставлен. Мы создадим новую лямбда. Выберите опцию Создать новую лямбда-функцию и нажмите Enter.
  7. Введите Тодосламбда Как название ресурса для категории (категория функций) и нажмите Enter.
  8. Вас будет предложено название функции лямбда. Введите Тодос и нажмите Enter.
  9. Вам будет предложено выбрать шаблон для генерации кода для этой функции. Выберите опцию Crud Function для таблицы Amazon Dynamodb (интеграция с воротами Amazon API и Amazon Dynamodb) и нажмите Enter. Это создает архитектуру с использованием шлюза API с Express Whing в функции AWS Lambda, которая читает и пишет на Amazon Dynamodb.
  10. Следующая подсказка просит вас выбрать источник данных DynanoDB. У нас нет существующей таблицы dynamodb, поэтому мы выберем Создайте новую таблицу Dynamodb вариант. Нажмите Enter, чтобы продолжить. Теперь вы должны увидеть мастер базы данных Dynamodb. Это попросит серию вопросов, чтобы определить, как создать базу данных.
  11. Вам будет предложено ввести имя для этого ресурса. Введите Тодома ...| и нажмите Enter. Следующая подсказка для имени таблицы. Введите
  12. Тодос и нажмите Enter. Вам будет предложено добавить столбцы в таблицу dynamodb. Следуйте приглашению создать столбец
  13. ID с Строка как его тип. Выберите
  14. ID Столбец при запросе ключевой раздел (первичный ключ) для таблицы. Вам будет предложено, хотите ли вы добавить ключ сортировки в таблицу. Выберите ложь.
  15. Следующая подсказка запрашивает, хотите ли вы добавить глобальные дополнительные индексы на свой стол. Введите
  16. N и нажмите Enter. Вы должны увидеть сообщение Успешно добавлена таблица dynamodb локально Следующая подсказка запрашивает
  17. Вы хотите редактировать локальную функцию лямбда сейчас? Отказ Введите N и нажмите Enter. Вы должны увидеть сообщение Успешно добавил функцию лямбда локально Отказ Вы спрашиваете, хотите ли вы ограничить доступ к API. Введите
  18. y и нажмите Enter. Для следующей строки выберите
  19. Аутентифицированные и гостевые пользователи и нажмите Enter. Эта опция предоставляет как уполномоченным, так и гостевым пользователям доступ к API для отдыха. Далее вы спрашиваете
  20. Какой доступ вы хотите для аутентифицированных пользователей Отказ Выберите Читать/Написать и нажмите Enter. Теперь мы получаем подсказку выбрать тип доступа к неаутентифицированным пользователям (пользователи I.E Gues). Выберите
  21. читать и нажмите Enter. Вы должны получить сообщение Успешно добавлен ресурс AUTH на месте Отказ Это связано с тем, что мы решили ограничить доступ к API, а CLI добавил категорию AUTH к проекту, поскольку у нас нет для проекта. На данный момент мы добавили ресурсы, которые необходимы для создания нашего API (Gateway API, Dynamodb, Abambda функции и Cognito для аутентификации). Мы спрашиваем, хотите ли мы добавить еще один путь к API. Введите
  22. N и нажмите Enter. Это завершает процесс, и мы получаем сообщение Успешно добавлен ресурс ToSapi локально Отказ

Усилить Добавить API Команда взяла нас через процесс создания API отдыха. Этот API будет создан на основе вариантов, которые мы выбрали. Для создания этого API требуется 4 Услуги AWS. Они:

  1. Amazon Dynamodb. Это будет служить нашей базой данных NoSQL. Мы создали таблицу Dynomodb с именем Тодос Когда мы добавили Тодома ...| ресурс. Мы дали ему 3 столбца с ID как первичный ключ. AWS LAMBDA Функции. Это позволяет нам запустить код без предоставления или управляющих серверов. Это то, где наш код для выполнения операций CRUD на таблице Dynamodb будет.
  2. Amazon Cognito. Это отвечает за аутентификацию и управление пользователями. Это позволяет нам добавить регистрацию пользователя, вход в систему и контроль доступа к нашему приложению. Мы выбрали возможность ограничить доступ к нашему API, и эта услуга поможет нам аутентифицировать пользователей.
  3. Amazon API Gateway. Это то, что позволяет нам создавать конечную точку API для отдыха. Мы добавили ресурс для этого имени
  4. Тодосапы , с путем Предметы Отказ Мы также выбрали опцию, чтобы ограничить доступ к API.

Тем не менее, спецификации обслуживания для этих услуг еще не в облаке. Нам нужно обновить проект в облаке с информацией, чтобы предоставить необходимые услуги. Запустите команду Усилить статус И мы должны получить стол с информацией о проекте усилителя.

Откройте файл Backend/function/todoslambda/src/app.js Отказ Вы заметите, что этот файл содержит код, сгенерированный во время процесса настроек ресурса. Использует Express.js настроить маршруты, а AWS-Serverless-Express Пакет для легко создавать reзов API с помощью Framework Express.js на вершине Gateway AWS Lambda и Amazon API.

Когда мы нажимаем на конфигурацию проекта в облако, он настроит простой прокси API Proxy, используя Gateway Amazon API и интегрировать его с помощью этой функции Lambda. Пакет включает в себя промежуточное программное обеспечение, чтобы легко получить объект Event Object Lambda от Gateway API. Это было применено на линии 32 app.use (awsserverredexpressmiddleware.eventcontext ()); и используется через маршруты с кодами, которые выглядят как req.apcistway.event. * Отказ Предварительно определенные маршруты позволяют выполнять операцию CRUD на таблице Dynamodb.

Мы сделаем пару изменений в этот файл. Первый будет изменять значение для Табличное значение переменная от Тодома ...| к Тодос Отказ При создании ресурса Dynamodb мы указали Тодома …| как имя ресурса и Тодос В качестве имени таблицы, поэтому он неправильно использовал имя ресурса в качестве имени таблицы при создании файла. Это, вероятно, будет зафиксировано в будущей версии CLI, поэтому, если вы не найдете его неправильно используемой, вы можете пропустить этот шаг. Нам также нужно будет обновить определения.

Измените первое определение маршрута, чтобы использовать код ниже.

app.get(path, function(req, res) {  const queryParams = {    TableName: tableName,    ProjectionExpression: "id, title"  };
  dynamodb.scan(queryParams, (err, data) => {    if (err) {      res.json({ error: "Could not load items: " + err });    } else {      res.json(data.Items);    }  });});

Это определяет маршрут, чтобы ответить на /Предметы Путь с кодом, чтобы вернуть все данные в таблице dynamodb. Проекционная экспрессия Значения используются для указания того, что он должен получить только столбцы ID и Название Отказ

Измените определение маршрута в строке 77, чтобы прочитать как app.get (путь + hashkeypath + sortkeepath, функция (req, res) { . Это позволяет нам получить элемент по его ID после пути /items/: id . Кроме того, изменение Line 173, чтобы быть app.delete (путь + hashkeypath + sortkeepath, function (req, res) { . Это отвечает на метод удаления http, чтобы удалить элемент, следующий на пути /items/: id .

Ресурсы AWS были добавлены и обновлены локально, и нам нужно обеспечить их в облаке. Откройте командную строку и запустите Усилить толчок Отказ Вы получите подсказку, если хотите продолжить выполнение команды. Введите y и нажмите Enter. Что это делает, так это то, что он загрузит последние версии шаблонов вложенных ресурсов в развертываемые вложенные ресурсы в ведро развертывания S3, а затем вызовите API AWS CloudFormation для создания/обновления ресурсов в облаке.

Строительство Frontend

Когда Усилить толчок Команда завершается, вы увидите файл AWS-Exports.js В SRC папка. Этот файл содержит информацию для ресурсов, которые были созданы в облаке. Каждый раз ресурс создан или обновляется запуском толчок Команда, этот файл будет обновлен. Он создан для проектов JavaScript и будет использоваться в усилении библиотеки JavaScript. Мы будем использовать это в нашем проекте реагирования. Мы также будем использовать Bootstrap для стиля страницы. Открыть Public/index.html и добавьте следующее в голове:

Добавить новый файл SRC/list.js Со следующим контентом:

import React from "react";
export default props => (  
    List    
      {renderListItem(props.list, props.loadDetailsPage)}    
  
);
function renderListItem(list, loadDetailsPage) {  const listItems = list.map(item => (    
  •  loadDetailsPage(item.id)}    >      {item.title}    
    •   ));
      return 
      {listItems}
    ;}

    Этот компонент сделает список предметов из API. Добавить новый файл SRC/Details.js Со следующим контентом:

    import React from "react";
    export default props => (  
        
    Details
        
                    
        {props.item.title}    
          
    {props.item.content}
        
      
    );

    Этот компонент будет отображать детали элемента с помощью кнопок, чтобы удалить этот элемент или вернуться к представлению списка. Открыть SRC/App.js И обновите это с этим кодом:

    import React, { Component } from "react";import List from "./List";import Details from "./Details";
    import Amplify, { API } from "aws-amplify";import aws_exports from "./aws-exports";import { withAuthenticator } from "aws-amplify-react";Amplify.configure(aws_exports);
    class App extends Component {  constructor(props) {    super(props);    this.state = {      content: "",      title: "",      list: [],      item: {},      showDetails: false    };  }
      async componentDidMount() {    await this.fetchList();  }  handleChange = event => {    const id = event.target.id;    this.setState({ [id]: event.target.value });  };
      handleSubmit = async event => {    event.preventDefault();    await API.post("todosApi", "/items", {      body: {        id: Date.now().toString(),        title: this.state.title,        content: this.state.content      }    });
        this.setState({ content: "", title: "" });    this.fetchList();  };  async fetchList() {    const response = await API.get("todosApi", "/items");    this.setState({ list: [...response] });  }
      loadDetailsPage = async id => {    const response = await API.get("todosApi", "/items/" + id);    this.setState({ item: { ...response }, showDetails: true });  };
      loadListPage = () => {    this.setState({ showDetails: false });  };
      delete = async id => {    //TODO: Implement functionality  };
      render() {    return (      
            
              Add          
                                      
              
                                      
                      
            
            {this.state.showDetails ? (          
            ) : (                  )}      
        );  }}
    export default withAuthenticator(App, true);

    Мы импортировали библиотеку усилителя и инициализировали его, позвонив Усилить .Configure (AWS_Exports); Отказ Когда компонент установлен, мы называем fetchlist () Чтобы извлечь элементы из API.

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

    Для нашего проекта мы указываем только apirame и путь при вызове функций из клиента API. LoadDetailSpage () Функция выбирает определенный элемент из базы данных через API. Затем устанавливает Предмет Состояние с ответом и ShowDetails правда. Это ShowDetails Используется в функции рендеринга для переключения между отображением списка элементов или страницы деталей выбранного элемента. Функция handlesubmit () называется, когда форма представлена. Он отправляет данные формы на API для создания документа в базе данных, с столбцами ID , Название и Содержание Затем звонит fetchlist () обновить список. Я оставил Удалить () Функция пустая, чтобы вы могли реализовать его самостоятельно. Какой лучший способ учиться, чем попробовать сами?

    Эта функция будет вызываться из кнопки удаления в Детали составная часть. Код, который вы имеете в нему, должны вызвать API, чтобы удалить элемент по ID и отобразить компонент списка с правильными элементами.

    Мы завернули компонент приложения с С карунтикатором Компонент более высокого порядка из амплифицирующей библиотеки React. Это обеспечивает приложение с полными потоками для регистрации пользователей, регистрации, регистрации и выйти. Только подписанные пользователями могут получить доступ к приложению, поскольку мы используем этот компонент более высокого порядка. С карунтикатором Компонент автоматически обнаруживает состояние аутентификации и обновляет пользовательский интерфейс. Если пользователь подписан, основной Приложение Отображается компонент, в противном случае отображаются элементы управления входа/регистрации.

    Второй аргумент, который был установлен на правда Подсказывает его отобразить кнопку выхода в верхней части страницы. Используя С карунтикатором Компонент является простейшим способом добавления потоков аутентификации в ваше приложение. Вы также можете иметь пользовательский интерфейс и использовать набор API из библиотеки усилителя для реализации потоков входа и регистрации. Увидеть Документы Больше подробностей.

    У нас есть весь код, необходимый для использования приложения. Откройте терминал и запустите NPM начать Чтобы начать приложение. Вам нужно будет зарегистрировать и войти в систему, чтобы использовать приложение.

    Обертывание

    Мы прошли через создание наших бэкэндских услуг с помощью усилителя CLI. Команда Усилить Добавить API Взял нас через добавление ресурсов для Dynamodb, Lambda, API Gateway и Cognito для аутентификации. Мы обновили код в Backend/function/todoslambda/src/app.js соответствовать нашему требованию API. Мы добавили компоненты пользовательского интерфейса для выполнения операций CRUD в приложении и использовали компонент более высокого порядка из библиотеки Amplify React, чтобы разрешить только аутентифицированные пользователи доступ к приложению.

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

    Читайте ещё по теме: