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

Статья
06/01/2023

Вы можете добавлять бессерверные 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 для работы интерфейсного приложения и API

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

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

В 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 -D @azure/static-web-apps-cli

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

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

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

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

npm install
npm run build --prod

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

npm install
npm run build

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

npm install
npm run build

Запуск CLI

Инициируйте совместное выполнение интерфейсного приложения и 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
```
После запуска процессов 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.
Сохраните файл.

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

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

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

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

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

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