Упражнение. Создание проекта Функций Azure

6 мин

Вашему веб-приложению со списком покупок требуется API. В этом упражнении вы создаете и запускаете API с помощью проекта Функции Azure. Затем вы расширяете API с помощью новой функции с помощью расширения Функции Azure для Visual Studio Code.

В этом упражнении выполните следующие действия.

Создание ветви при подготовке к внесению изменений в веб-приложение
Изучение проекта Функций Azure
Создание функции HTTP GET
Замена начального кода функции на логику для получения продуктов
Настройка веб-приложения для направления HTTP-запросов к API через прокси
Запуск API и веб-приложения

Получение приложения-функции

Теперь добавьте API и подключите его к интерфейсным приложениям. Незавершенный проект Функций Azure находится в папке api-starter. Итак, давайте завершим это сейчас.

Создание ветви API

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

Откройте палитру команд Visual Studio Code, нажав клавишу F1.
Введите и выберите Git: извлечь в....
Выберите Создать ветвь.
Введите в качестве имени новой ветви api и нажмите клавишу ВВОД.

Вы создали ветвь Git с именем api.

Завершение API Функций Azure

Чтобы завершить API, сначала переместите начальный код API в папку с именем API. Вы ввели это имя папки для api_location при создании экземпляра Статические веб-приложения.

Откройте палитру команд Visual Studio Code, нажав клавишу F1.
Введите и выберите Терминал: создать новый терминал (в активной рабочей области).
Убедитесь, что вы находитесь в корневой папке проекта.
Используя следующую команду git, переименуйте папку api-starter в api.
```
git mv api-starter api
```
Откройте палитру команд, нажав клавишу F1.
Введите и выберите Git: зафиксировать в.
Введите сообщение фиксации api и нажмите клавишу ВВОД.

Теперь вы увидите папку API в обозревателе Visual Studio Code. В папке api содержится проект Функций Azure, а также три функции.

Папка и файл	Способ	Маршрут
api/products-post	POST	`products`
api/products-put	PUT	`products/:id`
api/products-delete	DELETE	`products/:id`

Создание функции HTTP GET

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

Установка расширения "Функции Azure" для Visual Studio Code

Вы можете создавать приложения Функции Azure и управлять ими с помощью расширения Функции Azure для Visual Studio Code.

Откройте Visual Studio Marketplace и установите расширение Функции Azure для Visual Studio Code.
Когда вкладка расширения загрузится в Visual Studio Code, щелкните Установить.
После завершения установки нажмите кнопку Перезагрузить.

Примечание.

Не забудьте установить Функции Azure Core Tools, что позволяет выполнять Функции Azure локально.

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

Теперь вы расширяете приложение-функцию Azure с помощью функции, чтобы получить продукты.

Откройте палитру команд Visual Studio Code, нажав клавишу F1.
Введите и выберите элементы Функции Azure: создать функцию.
При появлении запроса на создание функции выберите Триггер HTTP.
Введите в качестве имени функции products-get.
В качестве уровня проверки подлинности выберите Анонимный.

Примечание.

Приложение "Функции Azure" находится в папке api, которая отделяет его от отдельных проектов веб-приложений. Все веб-приложения, использующие интерфейсные платформы, вызывают один и тот же API. Вы можете выбрать любую структуру для своего приложения, но в этом примере такое разделение удобно.

Настройка метода HTTP и конечной точки маршрута

Обратите внимание на то, что папка api/products-get содержит файл function.json. В этом файле находится конфигурация вашей функции.

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

Настройте свою функцию соответствующим образом.

Откройте файл api/products-get/function.json.
Обратите внимание на то, что методы позволяют использовать как запросы GET, так и запросы POST.
Измените массив методов таким образом, чтобы он разрешал только запросы GET.
Добавьте запись "route": "products" после массива методов.

Теперь функция будет запускаться при получении HTTP-запроса GET к products. Файл function.json должен выглядеть следующим образом.

{
  "bindings": [
    {
      "authLevel": "anonymous",
      "type": "httpTrigger",
      "direction": "in",
      "name": "req",
      "methods": ["get"],
      "route": "products"
    },
    {
      "type": "http",
      "direction": "out",
      "name": "res"
    }
  ]
}

Обновление логики функции

Файл index. js в папке api/products-get содержит логику, которая выполняется при передаче HTTP-запроса к маршруту.

Чтобы получить продукты, необходимо обновить логику. В модуле JavaScript есть логика доступа к данным /shared/product-data.js. Модуль product-data предоставляет функцию getProducts для получения продуктов по списку покупок.

Теперь измените конечную точку функции, чтобы она возвращала продукты.

Откройте файл api/products-get/index.js.

Замените его содержимое на следующий код:

const data = require('../shared/product-data');

module.exports = async function (context, req) {
  try {
    const products = data.getProducts();
    context.res.status(200).json(products);
  } catch (error) {
    context.res.status(500).send(error);
  }
};

Функция получает продукты и возвращает их с кодом состояния 200 при успешном выполнении.

Вам не нужно беспокоиться о CORS при публикации в Статические веб-приложения Azure. Служба статических веб-приложений Azure автоматически настроит ваше приложение так, чтобы оно могло взаимодействовать с вашим API в Azure через обратный прокси-сервер. Но при локальном запуске CORS необходимо настроить так, чтобы ваше веб-приложение могло взаимодействовать с API.

Для этого Функции Azure должны разрешать вашему веб-приложению отправлять HTTP-запросы к API на вашем компьютере.

Создайте файл с именем api/local.settings.json.

Добавьте в этот файл следующее.

{
  "Host": {
    "CORS": "http://localhost:4200"
  }
}

{
  "Host": {
    "CORS": "http://localhost:3000"
  }
}

{
  "Host": {
    "CORS": "http://localhost:5000"
  }
}

{
  "Host": {
    "CORS": "http://localhost:8080"
  }
}

Примечание.

Файл local.settings.json указан в файле .gitignore, что не позволяет отправлять этот файл в GitHub. В этом файле можно хранить секреты, которые вы не хотите передавать в GitHub. Вот почему вам нужно было создать этот файл при создании репозитория на основе шаблона.

Запуск API

Теперь проверим, как ваше веб-приложение и проект Функций Azure работают вместе. Для начала запустите проект Функций Azure локально, выполнив следующие действия:

Примечание.

Не забудьте установить Функции Azure Core Tools, что позволяет выполнять Функции Azure локально.

Откройте терминал Git и перейдите в папку API :
```
cd api
```
Запустите приложение Функций Azure локально.
```
npm install
```
```
npm start
```

Запустите веб-приложение.

Ваш API запущен. Теперь нужно настроить ваше интерфейсное приложение на отправку HTTP-запроса к API. Интерфейсное приложение выполняется на одном порту, а API — на другом (7071). Каждую интерфейсную платформу можно настроить на безопасную передачу HTTP-запросов в необходимый порт через прокси-сервер.

Настройка порта прокси-сервера

Настройте прокси-сервер для своего интерфейсного приложения, выполнив следующие действия.

Откройте файл angular-app/proxy.conf.json.
Найдите параметр target: 'http://localhost:7071'.
Обратите внимание на то, что в качестве целевого порта указан порт 7071.

Откройте файл react-app/package.json.
Найдите параметр "proxy": "http://localhost:7071/",.
Обратите внимание на то, что в качестве порта прокси-сервера указан порт 7071.

Откройте файл svelte-app/rollup.config.js.
Найдите строку кода const api = 'http://localhost:7071/api';.
Обратите внимание, что порт API указывает на 7071.

Откройте файл vue-app/vue.config.js.
Найдите параметр target: 'http://localhost:7071',.
Обратите внимание на то, что в качестве целевого порта указан порт 7071.

Запустите свое интерфейсное веб-приложение.

Ваш API уже выполняется через 7071. Теперь, когда вы запускаете веб-приложение, он выполняет HTTP-запросы к API. Запустите свое веб-приложение, выполнив следующие действия.

Откройте второй экземпляр терминала Git.
Затем введите следующую команду, чтобы перейти к папке предпочтительной интерфейсной платформы:
```
cd angular-app
```
```
cd react-app
```
```
cd svelte-app
```
```
cd vue-app
```
Запустите интерфейсное клиентское приложение.
```
npm start
```
```
npm start
```
```
npm run dev
```
```
npm run serve
```

Перейдите к своему приложению.

Теперь посмотрим, как ваше приложение выполняется локально, используя API Функций Azure.

Перейдите в http://localhost:4200.

Перейдите в http://localhost:3000.

Перейдите в http://localhost:5000.

Перейдите в http://localhost:8080.

Вы собрали приложение, и теперь оно работает локально, отправляя HTTP-запросы GET к вашему API. Теперь закройте свое запущенное приложение и API, нажав клавиши CTRL+C в окне терминала.

Следующие шаги

Приложение работает локально, и следующий шаг — опубликовать приложение с помощью API.

Упражнение. Создание проекта Функций Azure

Получение приложения-функции

Создание ветви API

Завершение API Функций Azure

Создание функции HTTP GET

Установка расширения "Функции Azure" для Visual Studio Code

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

Настройка метода HTTP и конечной точки маршрута

Обновление логики функции

Локальная настройка общего доступа к ресурсам независимо от источника (CORS)

Запуск API

Запустите веб-приложение.

Настройка порта прокси-сервера

Запустите свое интерфейсное веб-приложение.

Перейдите к своему приложению.

Следующие шаги

Обратная связь