Добавление API в Статические веб-приложения Azure с помощью Функций Azure

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

Примечание.

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

Предварительные требования

Учетная запись Azure с активной подпиской.
- Если у вас нет учетной записи, ее можно создать бесплатно здесьcreate one for free.
Visual Studio Code.
Расширение Статические веб-приложения Azure для Visual Studio Code.
Расширение службы "Функции Azure" для Visual Studio Code.
Node.js версии 18 для запуска интерфейсного приложения и API.

Совет

Средство nvm можно использовать для управления несколькими версиями Node.js в системе разработки. В системе Windows NVM for Windows можно установить через Winget.

Создание статического веб-приложения

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

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

Перед выполнением следующей команды обязательно замените <YOUR_GITHUB_USERNAME> на ваше имя пользователя GitHub.

git clone https://github.com/<YOUR_GITHUB_USERNAME>/my-first-static-web-app

В Visual Studio Code откройте корневой каталог репозитория своего приложения. Структура папок содержит исходный код вашего frontend-приложения, а также файл рабочего процесса GitHub Actions для Статические веб-приложения в папке .github/workflows.

├── .github
│   └── workflows
│       └── azure-static-web-apps-<DEFAULT_HOSTNAME>.yml
│
└── (folders and files from your static web app)

Создание API

Вам предстоит создать проект Функций Azure для API Статических веб-приложений. По умолчанию расширение "Статические веб-приложения" для Visual Studio Code создает проект в папке с именем api в корне репозитория.

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

При появлении запроса введите указанные ниже значения:

Запрос	Значение
Выбор языка	JavaScript
Выбор модели программирования	V4
Provide a function name (Укажите имя функции)	message

Совет

Дополнительные сведения о различиях между моделями программирования см. в руководстве разработчика по Функции Azure

Проект Функции Azure создается с помощью функции, активируемой HTTP. Теперь приложение должно иметь структуру проекта, подобную приведенному ниже примеру.

├── .github
│   └── workflows
│       └── azure-static-web-apps-<DEFAULT_HOSTNAME>.yml
│
├── api
│   ├── src
│   │   ├── functions
│   │   │   └── message.js
│   │   └── index.js
│   ├── .funcignore
│   ├── host.json
│   ├── local.settings.json
│   ├── package-lock.json
│   └── package.json
│
└── (...plus other folders and files from your static web app)

Далее измените функциюmessage так, чтобы она возвращала сообщение в интерфейсное приложение. Обновите функцию в src/functions/message.js следующим кодом.

const { app } = require('@azure/functions');

app.http('message', {
    methods: ['GET', 'POST'],
    authLevel: 'anonymous',
    handler: async (request, context) => {
        return { body: JSON.stringify({ "text": `Hello, from the API!` }) };
    }
});

Совет

Можно добавлять дополнительные функции API, повторно выбирая команду Статические веб-приложения Azure: создать функцию HTTP....

Обновление интерфейсного приложения для вызова API

Обновите интерфейсное приложение, чтобы оно вызывало API из раздела /api/message и отображало ответное сообщение.

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

Внесите в файл src/index.html следующий код, который получает текст из функции API и отображает его на экране.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Vanilla JavaScript App</title>
</head>

<body>
    <main>
    <h1>Vanilla JavaScript App</h1>
    <p>Loading content from the API: <b id="name">...</b></p>
    </main>

    <script>
    (async function() {
        const { text } = await (await fetch(`/api/message`)).json();
        document.querySelector('#name').textContent = text;
    }());
    </script>
</body>

</html>

Обновите содержимое файла src/app/app.module.ts следующим кодом, чтобы включить HttpClient в вашем приложении.

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from "./app.component";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HttpClientModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

Внесите в файл src/app/app.component.ts следующий код, который получает текст из функции API и отображает его на экране.

import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<div>{{message}}</div>`,
})
export class AppComponent {
  message = '';

  constructor(private http: HttpClient) {
    this.http.get('/api/message')
      .subscribe((resp: any) => this.message = resp.text);
  }
}

Внесите в файл src/App.js следующий код, который получает текст из функции API и отображает его на экране.

import React, { useState, useEffect } from 'react';

function App() {
  const [data, setData] = useState('');

  useEffect(() => {
    (async function () {
      const { text } = await (await fetch(`/api/message`)).json();
      setData(text);
    })();
  });

  return <div>{data}</div>;
}

export default App;

Внесите в файл src/App.vue следующий код, который получает текст из функции API и отображает его на экране.

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      message: ""
    };
  },
  async mounted() {
    const { text } = await (await fetch("/api/message")).json();
    this.message = text;
  }
};
</script>

Локальное выполнение интерфейсного приложения и API

Для локального выполнения интерфейсного приложения и API в Статических веб-приложениях Azure предусмотрен интерфейс командной строки (CLI), эмулирующий облачную среду. Интерфейс командной строки использует Функции Azure Core Tools для запуска API.

Установка программ командной строки

Убедитесь, что у вас установлены необходимые программы командной строки.

Внимание

Чтобы повысить безопасность развертываний из интерфейса командной строки Статические веб-приложения, было введено критическое изменение, требующее обновления до последней версии (2.0.2) Статические веб-приложения CLI к январю 15 января 2025 года.

npm install -g @azure/static-web-apps-cli

Совет

Если вы не хотите устанавливать командную swa строку глобально, можно использовать npx swa вместо swa приведенных ниже инструкций.

Сборка интерфейсного приложения

Если ваше приложение использует ту или иную платформу, выполните его сборку, чтобы получить выходной код перед запуском CLI Статических веб-приложений.

Нет необходимости создавать приложение.

Установите зависимости npm и создайте приложение в папку dist/angular-basic .

npm install
npm run build --prod

Установите зависимости npm и соберите приложение в папку build.

npm install
npm run build

Установите зависимости npm и создайте приложение в папку dist .

npm install
npm run build

Локальный запуск приложения

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

В корневом каталоге репозитория запустите интерфейс командной строки Статические веб-приложения с помощью команды start. Если у приложения другая структура папок, скорректируйте аргументы соответствующим образом.
Передайте в CLI текущую папку (src) и папку API (api).
```
swa start src --api-location api
```
Передайте в CLI выходную папку сборки (dist/angular-basic) и папку API (api).
```
swa start dist/angular-basic --api-location api
```
Передайте в CLI выходную папку сборки (build) и папку API (api).
```
swa start build --api-location api
```
Передайте в CLI выходную папку сборки (dist) и папку API (api).
```
swa start dist --api-location api
```
Windows брандмауэр может предложить разрешить среде выполнения Функции Azure доступ к Интернету. Выберите Разрешить.
После запуска процессов CLI вы получите доступ к приложению по адресу http://localhost:4280/. Обратите внимание на то, как страница вызывает API и отображает выходные данные — текст Hello from the API.
Чтобы остановить интерфейс командной строки, введите CTRL+C.

Добавление расположения API в рабочий процесс

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

Откройте файл рабочего процесса по адресу .github/workflows/azure-static-web-apps-<DEFAULT-HOSTNAME>.yml.

Найдите свойство api_location и задайте для него значение api.

###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
# For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
app_location: "src" # App source code path
api_location: "api" # Api source code path - optional
output_location: "" # Built app content directory - optional
###### End of Repository/Build Configurations ######

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

Сохраните файл.

Развертывание изменений

Чтобы опубликовать изменения в статическом веб-приложении Azure, зафиксируйте и отправьте свой код в удаленный репозиторий GitHub.

Нажмите клавишу F1, чтобы открыть палитру команд.
Выберите команду Git: Commit All.
Когда появится запрос на ввод сообщения коммита, введите feat: add API и зафиксируйте все изменения в вашем локальном репозитории git.
Нажмите клавишу F1, чтобы открыть палитру команд.
Выберите команду Git: push.

Изменения будут отправлены в удаленный репозиторий GitHub, в результате чего рабочий процесс GitHub Actions Статических веб-приложений произведет сборку и развертывание приложения.
Откройте репозиторий в GitHub, чтобы отслеживать состояние выполнения рабочего процесса.
По завершении рабочего процесса откройте статическое веб-приложение, чтобы просмотреть внесенные изменения.

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

Настройка параметров приложения

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

Были ли сведения на этой странице полезными?

Last updated on 2024-11-25

Добавление API в Статические веб-приложения Azure с помощью Функций Azure

Предварительные требования

Создание статического веб-приложения

Создание API

Обновление интерфейсного приложения для вызова API

Локальное выполнение интерфейсного приложения и API

Установка программ командной строки

Сборка интерфейсного приложения

Локальный запуск приложения

Добавление расположения API в рабочий процесс

Развертывание изменений

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

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

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