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

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

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

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

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

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

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

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

  1. Щелкните значок Azure на панели действий. Затем в области Рабочая область (локальная) нажмите кнопку + и выберите пункт Создать функцию в раскрывающемся списке. В ответ на запрос выберите вариант Создать проект.

    Снимок экрана: окно создания проекта.

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

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

    prompt Выбор
    Выбор язык для проекта приложения-функции Выберите JavaScript.
    Выбор шаблона для первой функции проекта Выберите HTTP trigger.
    Provide a function name (Укажите имя функции) Введите HttpExample.
    Уровень авторизации выберите Anonymous, что позволит любому пользователю вызывать конечную точку функции. Дополнительные сведения об уровне авторизации см. в разделе Authorization keys (Ключи авторизации).
    Выбор способа открытия проекта Выберите Add to workspace.

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

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

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

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

    Снимок экрана: выходные данные VS Code локальной функции.

    При возникновении проблем с запуском в Windows убедитесь, что в качестве терминала по умолчанию для Visual Studio Code не используется оболочка WSL.

  2. Во время выполнения Core Tools в Терминале щелкните значок Azure на панели действий. В области Рабочая область разверните узел Локальный проект>Функции. Щелкните правой кнопкой мыши (Windows) или CTRL. Щелкните (macOS) новую функцию и выберите команду Выполнить функцию сейчас....

    Вариант

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

  4. При выполнении функции локально и возврате ответа в Visual Studio Code отобразится уведомление. Сведения о выполнении функции отображаются на панели Терминал.

  5. Откройте панель терминала и нажмите клавиши CTRL+C, чтобы остановить основные инструменты и отключить отладчик.

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

Вход в Azure

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

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

    Снимок экрана с окном входа в Azure в VS Code.

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

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

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

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

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

  1. Щелкните значок Azure на панели действий. Затем в области Ресурсы щелкните значок + и выберите вариант Создать приложение-функцию в Azure.

    Создание ресурса в подписке Azure

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

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

    Расширение показывает на панели Azure: журнал действий состояние отдельных ресурсов по мере их создания в Azure.

    Журнал создания ресурсов Azure

  3. После завершения создания в вашей подписке будут созданы приведенные ниже ресурсы Azure. Имена ресурсов основаны на имени приложения-функции.

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

    После создания приложения-функции и применения пакета развертывания отобразится уведомление.

    Совет

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

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

Важно!

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

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

    Развертывание проекта из рабочей области Visual Studio Code

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

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

    Снимок экрана: окно

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

  1. Вернувшись в область Ресурсы на боковой панели, разверните узел подписки, узел нового приложения-функции и узел Функции. Щелкните правой кнопкой мыши (в Windows) или используйте Ctrl-щелчок (в macOS) на функции HttpExample и выберите Выполнить функцию... .

    Снимок экрана: выполнение функции в Azure из Visual Studio Code.

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

  3. При выполнении функции в Azure и возврате ответа в Visual Studio Code отобразится уведомление.

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

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

  2. Замените файл следующим кодом, чтобы создать объект 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
            };
        }
    }
    
  3. Повторно запустите приложение-функцию локально.

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

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

    {
      "name": "Tom",
      "sport": "basketball",
      "message": "Tom likes basketball",
      "success": true
    }
    
  6. Повторно разверните функцию в Azure.

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

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

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

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

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

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

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

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

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

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