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

6 мин

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

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

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

Скачайте приложение Function

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

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

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

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

Вы только что создали ветвь API Git.

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

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

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

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

Папка и файл	Метод	Маршрут
api/products-post	ОПУБЛИКОВАТЬ	`products`
api/products-put	ПОЛОЖИТЬ	`products/:id`
api/products-delete	УДАЛИТЬ	`products/:id`

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

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

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

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

Перейдите в Visual Studio Marketplace и установите расширение Azure Functions для Visual Studio Code.
После того как вкладка расширения загрузится в Visual Studio Code, выберите Установить.
После завершения установки выберите перезагрузить.

Заметка

Не забудьте установить основные средства Функций Azure, которые позволяют выполнять функции Azure локально.

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

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

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

Заметка

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

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

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

Конечная точка маршрута имеет то же имя, что и папка, содержащая функцию, по соглашению. Так как функция создается в папке products-get , конечная точка маршрута создается как продукт-get по умолчанию. Однако вы хотите, чтобы конечным результатом были продукты .

Настройте функцию:

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

Теперь ваша функция активируется на HTTP-запрос GET для товаров . Ваш 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. Файл указан в .gitignore , так как в нем можно хранить секреты, которые не нужны в GitHub. Эта запись - причина, по которой вам пришлось создать файл при создании репозитория из шаблона.

Запуск API

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

Заметка

Не забудьте установить основные средства Функций Azure, которые позволяют выполнять функции 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 Functions.

Перейдите по ссылке http://localhost:4200.

Перейдите по ссылке http://localhost:3000.

Перейдите по ссылке http://localhost:5000.

Перейдите по ссылке http://localhost:8080.

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

Дальнейшие действия

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

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

Была ли эта страница полезна?

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

Скачайте приложение Function

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

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

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

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

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

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

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

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

Запуск API

Запуск веб-приложения

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

Запуск внешнего веб-приложения

Перейдите к приложению

Дальнейшие действия

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