Краткое руководство Создание функции JavaScript в Azure с помощью Visual Studio Code

Статья
06/03/2024

С помощью Visual Studio Code создайте функцию JavaScript, которая отвечает на HTTP-запросы. Протестируйте код в локальной среде, а затем разверните его в бессерверном окружении Функций Azure.

Внимание

Содержимое этой статьи изменяется на основе выбранной модели программирования Node.js в селекторе в верхней части страницы. Модель версии 4 общедоступна и предназначена для более гибкого и интуитивно понятного интерфейса для разработчиков JavaScript и TypeScript. Дополнительные сведения о различиях между версиями 3 и 4 см. в руководстве по миграции.

Завершение этого краткого руководства повлечет за собой небольшую стоимость нескольких центов США или меньше в вашей учетной записи Azure.

Существует также версия этой статьи для интерфейса командной строки.

Настройка вашей среды

Перед началом работы убедитесь, что выполнены следующие предварительные требования.

Учетная запись Azure с активной подпиской. Создайте учетную запись бесплатно .
Node.js 14.x или более поздней версии. Используйте команду node --version, чтобы проверить установленную версию.
Visual Studio Code на одной из поддерживаемых платформ.
Расширение "Функции Azure" для Visual Studio Code. Это расширение устанавливает Функции Azure Core Tools при первом запуске функций.

Учетная запись Azure с активной подпиской. Создайте учетную запись бесплатно .
Node.js 18.x или более поздней версии. Используйте команду node --version, чтобы проверить установленную версию.
Visual Studio Code на одной из поддерживаемых платформ.
Расширение Функции Azure версии 1.10.4 или более поздней версии для Visual Studio Code. Это расширение устанавливает Функции Azure Core Tools при первом запуске функций. Node.js версии 4 требуется версия 4.0.5382 или более поздняя версия Core Tools.

Установка или обновление основных средств

Расширение Функции Azure для Visual Studio Code интегрируется с Функции Azure core Tools, чтобы вы могли выполнять и отлаживать функции локально в Visual Studio Code с помощью среды выполнения Функции Azure. Прежде чем приступить к работе, рекомендуется установить Core Tools локально или обновить существующую установку, чтобы использовать последнюю версию.

В Visual Studio Code выберите F1, чтобы открыть палитру команд, а затем выполните поиск и выполните команду Функции Azure: установка или обновление основных инструментов.

Эта команда пытается запустить установку на основе пакета последней версии Core Tools или обновить существующую установку на основе пакетов. Если на локальном компьютере не установлено npm или Homebrew, необходимо вручную установить или обновить основные средства.

Создание локального проекта

В этом разделе вы используете Visual Studio Code, чтобы создать локальный проект Функций Azure на JavaScript. Далее в этой статье вы опубликуете код функции в Azure.

В Visual Studio Code нажмите клавишу F1 , чтобы открыть палитру команд и выполнить поиск и выполнить команду Azure Functions: Create New Project....
Выберите расположение каталога для рабочей области проекта и нажмите кнопку Выбрать. Нужно либо создать новую папку, либо выбрать пустую папку для рабочей области проекта. Не выбирайте папку проекта, которая является частью рабочей области.

Введите следующие сведения по соответствующим запросам:

Prompt	Выбор
Выбор язык для проекта приложения-функции	Выберите `JavaScript`.
Выбор модели программирования JavaScript	Выберите `Model V3`.
Выбор шаблона для первой функции проекта	Выберите `HTTP trigger`.
Укажите имя функции	Введите `HttpExample`.
Уровень авторизации	выберите `Anonymous`, что позволит любому пользователю вызывать конечную точку функции. Дополнительные сведения см . на уровне авторизации.
Выбор способа открытия проекта	Выберите `Open in current window`.

Используя эти сведения, Visual Studio Code создает проект функций Azure с триггером HTTP. Файлы локального проекта можно просмотреть в Explorer. Дополнительные сведения см. в разделе Generated project files (Созданные файлы проекта).

Введите следующие сведения по соответствующим запросам:

Prompt	Выбор
Выбор язык для проекта приложения-функции	Выберите `JavaScript`.
Выбор модели программирования JavaScript	Выберите `Model V4`.
Выбор шаблона для первой функции проекта	Выберите `HTTP trigger`.
Укажите имя функции	Введите `HttpExample`.
Выбор способа открытия проекта	Выберите `Open in current window`.

Используя эти сведения, Visual Studio Code создает проект функций Azure с триггером HTTP. Файлы локального проекта можно просмотреть в Explorer. Дополнительные сведения о созданных файлах см. в руководстве разработчика JavaScript Функции Azure.

Локальное выполнение функции

Visual Studio Code интегрируется с Azure Functions Core Tools, чтобы перед публикацией в Azure можно было запустить этот проект на локальном компьютере разработки.

Чтобы запустить функцию локально, нажмите клавишу F5 или значок запуска и отладки на панели действий слева. На панели Терминал отобразятся выходные данные из Core Tools. Ваше приложение запускается в панели Терминал. Отобразится URL-адрес конечной точки активируемой HTTP-запросом функции, которая выполняется локально.

При возникновении проблем с запуском в Windows убедитесь, что в качестве терминала по умолчанию для Visual Studio Code не используется оболочка WSL.
Во время выполнения Core Tools в Терминале щелкните значок Azure на панели действий. В области Рабочая область разверните узел Локальный проект>Функции. Щелкните правой кнопкой мыши (Windows) или CTRL - щелкните новую функцию (macOS) и выберите "Выполнить функцию сейчас...".
В поле Введите текст запроса отображается текст сообщения запроса { "name": "Azure" }. Нажмите клавишу ВВОД, чтобы отправить это сообщение запроса в свою функцию.
При выполнении функции локально и возврате ответа в Visual Studio Code отобразится уведомление. Сведения о выполнении функции отображаются на панели Терминал.
Откройте панель терминала и нажмите клавиши CTRL+C, чтобы остановить основные инструменты и отключить отладчик.

Убедившись, что функция выполняется правильно на локальном компьютере, опубликуйте проект в Azure с помощью Visual Studio Code.

Прежде чем создавать ресурсы Azure или публиковать приложение, необходимо войти в Azure.

Если вы еще не вошли, на панели действий выберите значок Azure. Затем в разделе "Ресурсы" выберите вход в Azure.

Если вы уже выполнили вход и видите существующие подписки, перейдите к следующему разделу. Если у вас еще нет учетной записи Azure, выберите "Создать учетную запись Azure". Учащиеся могут выбрать "Создать учетную запись Azure для учащихся".
При появлении запроса в браузере выберите свою учетную запись Azure и войдите с помощью учетных данных учетной записи Azure. Если вы создаете новую учетную запись, вы можете выполнить вход после ее создания.
После успешного входа можно закрыть новое окно браузера. Подписки, принадлежащие вашей учетной записи Azure, отображаются на боковой панели.

Создание приложения-функции в Azure

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

В Visual Studio Code нажмите клавишу F1, чтобы открыть палитру команд. В командной строке (>), введите и выберите Функции Azure: создание приложения-функции в Azure.

В запросах укажите следующие сведения:

Prompt	Действие
Выбор подписки	Выберите подписку Azure для использования. Запрос не отображается, если в разделе "Ресурсы" отображается только одна подписка.
Ввод глобально уникального имени для приложения-функции	Введите имя, допустимое в URL-пути. Введенное имя проверяется, чтобы убедиться, что оно уникально в Функции Azure.
Выберите стек сред выполнения	Выберите языковую версию, выполняемую локально.
Выбор расположения для новых ресурсов	Выберите регион Azure. Для повышения производительности выберите регион рядом с вами.

На панели "Журнал действий" расширение Azure отображает состояние отдельных ресурсов, созданных в Azure.

Снимок экрана: журнал создания ресурсов Azure.

При создании приложения-функции в подписке Azure создаются следующие связанные ресурсы. Ресурсы именуются на основе имени, введенного для приложения-функции.
- группу ресурсов — логический контейнер связанных ресурсов;
- Учетная запись хранения Azure уровня "Стандартный" для сохранения состояния и других сведений о проектах.
- Приложение-функция, которое предоставляет окружение для выполнения кода вашей функции. Приложение-функция позволяет группировать функции в логические единицы и упростить развертывание, масштабирование и совместное использование ресурсов, а также управление ими в рамках единого плана размещения.
- План службы приложение Azure, определяющий базовый узел приложения-функции.
- Экземпляр Application Insights, подключенный к приложению-функции, и который отслеживает использование функций в приложении.
После создания приложения-функции и применения пакета развертывания отобразится уведомление.

Совет

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

Развертывание проекта в Azure

Внимание

Развертывание в существующем приложении-функции всегда перезаписывает содержимое этого приложения в Azure.

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

Запуск функции в Azure

Нажмите клавишу F1 , чтобы отобразить палитру команд, а затем выполните команду Azure Functions:Execute Function Now.... Если появится запрос, выберите подписку.
Выберите новый ресурс приложения-функции и HttpExample в качестве функции.
Введите тип { "name": "Azure" }текста запроса, а затем нажмите клавишу ВВОД, чтобы отправить это сообщение в функцию.
При выполнении функции в Azure ответ отображается в области уведомлений. Разверните уведомление, чтобы просмотреть полный ответ.

Изменение кода и повторное развертывание в Azure

В Visual Studio Code в представлении обозревателя выберите файл ./HttpExample/index.js.

Замените файл следующим кодом, чтобы создать объект JSON и вернуть его.

module.exports = async function (context, req) {

    try {
        context.log('JavaScript HTTP trigger function processed a request.');

        // Read incoming data
        const name = (req.query.name || (req.body && req.body.name));
        const sport = (req.query.sport || (req.body && req.body.sport));

        // fail if incoming data is required
        if (!name || !sport) {

            context.res = {
                status: 400
            };
            return;
        }

        // Add or change code here
        const message = `${name} likes ${sport}`;

        // Construct response
        const responseJSON = {
            "name": name,
            "sport": sport,
            "message": message,
            "success": true
        }

        context.res = {
            // status: 200, /* Defaults to 200 */
            body: responseJSON,
            contentType: 'application/json'
        };
    } catch(err) {
        context.res = {
            status: 500
        };
    }
}

Повторно запустите приложение-функцию локально.
В тексте запроса Введите текст запроса измените текст сообщения запроса на {"name": "Tom", "sport":"баскетбол" }. Нажмите клавишу ВВОД, чтобы отправить это сообщение запроса в свою функцию.

Просмотрите ответ в уведомлении:

{
  "name": "Tom",
  "sport": "basketball",
  "message": "Tom likes basketball",
  "success": true
}

Повторно разверните функцию в Azure.

Устранение неполадок

Используйте следующую таблицу, чтобы устранить наиболее распространенные проблемы, возникающие при использовании этого краткого руководства.

Проблема	Решение
Не удается создать локальный проект приложения-функции?	Убедитесь, что у вас установлено расширение Функций Azure.
Не удается запустить функцию локально?	Убедитесь, что установлена последняя версия Функции Azure Core Tools. При запуске в Windows убедитесь, что в качестве оболочки терминала по умолчанию для Visual Studio Code не настроена оболочка WSL Bash.
Не удается развернуть функцию в Azure?	Проверьте выходные данные на наличие сведений об ошибке. Выходные данные также можно просмотреть, щелкнув значок колокольчика в правом нижнем углу. Публикация выполнялась в существующем приложении-функции? Это действие перезаписывает содержимое приложения в Azure.
Не удается выполнить облачное приложение-функцию?	Не забудьте использовать строку запроса для отправки параметров.

Очистка ресурсов

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

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

В Visual Studio Code выберите значок Azure, чтобы открыть обозреватель Azure.
В разделе "Группы ресурсов" найдите группу ресурсов.
Щелкните группу ресурсов правой кнопкой мыши и выберите Удалить.

Дополнительные сведения о затратах на использование Функций см. в статье Estimating Consumption plan costs (Оценка затрат на план потребления).

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

С помощью Visual Studio Code вы создали приложение-функцию с простой функцией, активируемой HTTP-запросом. В следующей статье показано, как расширить эту функцию путем подключения к Azure Cosmos DB или службе хранилища Azure. Дополнительные сведения о подключении к другим службам Azure см. в статье Подключение функций к службам Azure с помощью привязок. Если вы хотите узнать больше о безопасности, см. статью Защита Функций Azure.

Подключение к Azure Cosmos DB

Подключение к хранилищу очередей Azure

С помощью Visual Studio Code вы создали приложение-функцию с простой функцией, активируемой HTTP-запросом.

Дополнительные сведения о функциях JavaScript

Поделиться через

Краткое руководство Создание функции JavaScript в Azure с помощью Visual Studio Code

Настройка вашей среды

Установка или обновление основных средств

Создание локального проекта

Локальное выполнение функции

Создание приложения-функции в Azure

Развертывание проекта в Azure

Запуск функции в Azure

Изменение кода и повторное развертывание в Azure

Устранение неполадок

Очистка ресурсов

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

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

Дополнительные ресурсы

Поделиться через

Краткое руководство Создание функции JavaScript в Azure с помощью Visual Studio Code

Настройка вашей среды

Установка или обновление основных средств

Создание локального проекта

Локальное выполнение функции

Вход в Azure

Создание приложения-функции в Azure

Развертывание проекта в Azure

Запуск функции в Azure

Изменение кода и повторное развертывание в Azure

Устранение неполадок

Очистка ресурсов

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

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

Дополнительные ресурсы