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

Статья
05/08/2024

Вы можете добавлять бессерверные 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 для Windows можно установить с помощью Winget.

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

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

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

git clone https://github.com/my-username/my-first-static-web-app

В Visual Studio Code откройте корневой каталог репозитория своего приложения. Структура папок содержит исходный код интерфейсного приложения и рабочий процесс GitHub Статических веб-приложений в папке .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, установите его и повторно выполните следующую команду.

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

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

Совет

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

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

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

Далее измените функциюmessage так, чтобы она возвращала сообщение в интерфейсное приложение. Внесите следующий код в функцию, содержащуюся в файле api/message/index.js.
```
module.exports = async function (context, req) {
    context.res.json({
        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.

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

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

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

Совет

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

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

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

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

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

npm install
npm run build --prod

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

npm install
npm run build

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

npm install
npm run build

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

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

В корневом каталоге репозитория запустите CLI Статических веб-приложений с помощью команды 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: "/" # App source code path
api_location: "api" # Api source code path - optional
output_location: "build" # Built app content directory - optional
###### End of Repository/Build Configurations ######

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

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

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

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

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

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

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

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

Необходимые компоненты

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

Создание API

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

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

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

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

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

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

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

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

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