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

Руководство. Добавление подключения к базе данных MySQL в Статические веб-приложения Azure (предварительная версия)

  • Статья

В этом руководстве описано, как подключить базу данных гибкого сервера База данных Azure для MySQL к статическому веб-приложению. После настройки вы можете выполнить запросы REST или GraphQL к встроенной /data-api конечной точке для управления данными, не записывая внутренний код.

Для простоты в этом руководстве показано, как использовать базу данных Azure для локальных целей разработки, но вы также можете использовать локальный сервер базы данных для ваших локальных потребностей разработки.

Примечание.

В этом руководстве показано, как использовать гибкий сервер База данных Azure для MySQL. Если вы хотите использовать другую базу данных, ознакомьтесь с руководствами по Azure Cosmos DB, SQL Azure или PostgreSQL .

Web browser showing results from MySQL in the developer tools console window.

Из этого руководства вы узнаете, как:

  • Связывание базы данных База данных Azure для MySQL со статическим веб-приложением
  • Создание, чтение, обновление и удаление данных

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

Чтобы завершить работу с этим руководством, необходимо иметь существующую базу данных База данных Azure для MySQL и статическое веб-приложение. Кроме того, необходимо установить Azure Data Studio.

Ресурс Description
База данных Azure для MySQL (гибкий сервер) Если вам нужно создать базу данных, выполните действия, описанные в руководстве по созданию гибкого сервера База данных Azure для MySQL. Если вы планируете использовать проверку подлинности строка подключения для веб-приложения, убедитесь, что вы создадите базу данных с помощью проверки подлинности MySQL. Этот параметр можно изменить позже, если вы хотите использовать управляемое удостоверение позже.
Существующее статическое веб-приложение Если у вас еще нет одного, выполните действия, описанные в руководстве по началу работы , чтобы создать статическое веб-приложение No Framework .
Azure Data Studio с расширением MySQL Если у вас еще нет Azure Data Studio, следуйте инструкциям по установке Azure Data Studio с расширением MySQL. Кроме того, вы можете использовать любое другое средство для запроса базы данных MySQL, например MySQL Workbench.

Начните с настройки базы данных для работы с функцией подключения к базе данных Статические веб-приложения Azure.

Настройка подключения к базе данных

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

  1. Перейдите на гибкий сервер База данных Azure для MySQL в портал Azure.

  2. В разделе Параметры выберите "Сеть".

  3. В разделе правил брандмауэра нажмите кнопку "Добавить текущий IP-адрес клиента". На этом шаге вы можете использовать эту базу данных для локальной разработки.

  4. В разделе "Правила брандмауэра" выберите "Разрешить общедоступный доступ" из любой службы Azure в Azure на этот сервер проверка box. Этот шаг гарантирует, что развернутый ресурс Статические веб-приложения может получить доступ к базе данных.

  5. Выберите Сохранить.

Получение строка подключения базы данных для локальной разработки

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

  1. Перейдите на гибкий сервер База данных Azure для MySQL в портал Azure.

  2. В разделе Параметры выберите Подключение.

  3. В разделе Подключение из раздела приложения выберите ADO.NET строка подключения и установите его в текстовом редакторе.

  4. Замените {your_password} заполнитель в строка подключения паролем.

  5. Замените {your_database} заполнитель именем MyTestPersonDatabaseбазы данных. Вы создадите указанные MyTestPersonDatabase ниже действия.

  6. Удалите разделы SslMode и SslCa строка подключения, так как они требуют дополнительных шагов и предназначены для рабочих целей.

Создание примера набора данных

Создайте образец таблицы и заполните его примерами данных, чтобы соответствовать учебнику. Здесь можно использовать Azure Data Studio, но вы можете использовать MySQL Workbench или любое другое средство.

  1. В Azure Data Studio создайте подключение к гибкому серверу Azure MySQL.

  2. Щелкните правой кнопкой мыши сервер и создайте новую базу данных. Введите MyTestPersonDatabase имя базы данных и выберите символ, который должен быть utf8mb4 , и параметры сортировки utf8mb4_0900_ai_ci.

  3. Щелкните правой кнопкой мыши сервер и выберите "Обновить".

  4. Щелкните базу данных правой кнопкой мыши MyTestPersonDatabase и выберите команду "Создать запрос". Выполните следующий скрипт, чтобы создать новую таблицу с именем MyTestPersonTable.

    CREATE TABLE MyTestPersonTable (
    Id INT AUTO_INCREMENT NOT NULL,
    Name VARCHAR(25) NULL,
    PRIMARY KEY (Id)
);

  5. Выполните следующий скрипт, чтобы добавить данные в таблицу MyTestPersonTable .

    INSERT INTO MyTestPersonTable (Name)
VALUES ('Sunny');

INSERT INTO MyTestPersonTable (Name)
VALUES ('Dheeraj');

  6. Щелкните таблицу правой кнопкой мыши MyTestPersonTable и выберите "Top 1000" , чтобы проверить наличие данных в базе данных.

Настройка статического веб-приложения

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

Важно!

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

  1. Переключитесь на ветвь main.

    git checkout main

  2. Синхронизируйте локальную версию с помощью git pullGitHub.

    git pull origin main

Создание файла конфигурации базы данных

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

  1. Откройте терминал и создайте новую переменную для хранения строка подключения. Конкретный синтаксис может отличаться в зависимости от используемого типа оболочки.

    export DATABASE_CONNECTION_STRING='<YOUR_CONNECTION_STRING>'

    Обязательно замените <YOUR_CONNECTION_STRING> значение строки подключения, которое вы задали в текстовом редакторе.

  2. Используйте npm для установки или обновления Статические веб-приложения CLI. Выберите нужную команду для вашей ситуации.

    Чтобы установить, используйте npm install.

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

    Чтобы обновить, используйте npm update.

    npm update

  3. swa db init Используйте команду для создания файла конфигурации базы данных.

    swa db init --database-type mysql

    Команда init создает файл staticwebapp.database.config.json в папке swa-db-connections .

  4. Вставьте этот пример в созданный файл staticwebapp.database.config.json .

{
  "$schema": "https://github.com/Azure/data-api-builder/releases/latest/download/dab.draft.schema.json",
  "data-source": {
    "database-type": "mysql",
    "options": {
      "set-session-context": false 
    },
    "connection-string": "@env('DATABASE_CONNECTION_STRING')"
  },
  "runtime": {
    "rest": {
      "enabled": true,
      "path": "/rest"
    },
    "graphql": {
      "allow-introspection": true,
      "enabled": true,
      "path": "/graphql"
    },
    "host": {
      "mode": "production",
      "cors": {
        "origins": ["http://localhost:4280"],
        "allow-credentials": false
      },
      "authentication": {
        "provider": "StaticWebApps"
      }
    }
  },
  "entities": {
    "Person": {
      "source": "MyTestPersonTable",
      "permissions": [
        {
          "actions": ["*"],
          "role": "anonymous"
        }
      ]
    }
  }
}

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

Компонент Описание
Подключение к базе данных В процессе разработки среда выполнения считывает строка подключения из значения строка подключения в файле конфигурации. Хотя вы можете указать строка подключения непосредственно в файле конфигурации, рекомендуется хранить строка подключения в локальной переменной среды. Значения переменных среды можно использовать в файле конфигурации с помощью @env('DATABASE_CONNECTION_STRING') нотации. Значение строка подключения перезаписывается Статические веб-приложения для развернутого сайта с данными, собранными при подключении базы данных.
Конечная точка API Конечная точка REST доступна, пока конечная точка GraphQL доступна в /data-api/graphql соответствии с /data-api/rest настройкой в этом файле конфигурации. Можно настроить пути REST и GraphQL, но /data-api префикс не настраивается.
Безопасность API Параметры runtime.host.cors позволяют определить разрешенные источники, которые могут выполнять запросы к API. В этом случае конфигурация отражает среду разработки и разрешает http://localhost:4280 расположение.
Модель сущностей Определяет сущности, предоставляемые через маршруты в REST API или как типы в схеме GraphQL. В этом случае имя Person — это имя, предоставляемое конечной точке, а entities.<NAME>.source это схема базы данных и сопоставление таблиц. Обратите внимание, что имя конечной точки API не должно совпадать с именем таблицы.
Безопасность сущностей Правила разрешений, перечисленные в массиве entity.<NAME>.permissions , управляют параметрами авторизации для сущности. Сущность можно защитить с ролями таким же образом, как и с помощью ролей.

Примечание.

Файл connection-stringhost.modeконфигурации и graphql.allow-introspection свойства перезаписываются при развертывании сайта. Строка подключения перезаписывается с данными проверки подлинности, собранными при подключении базы данных к ресурсу Статические веб-приложения. Для host.mode свойства задано productionзначение , а graphql.allow-introspection для свойства задано значение false. Эти переопределения обеспечивают согласованность в файлах конфигурации в рабочих нагрузках разработки и рабочей среды, гарантируя, что ресурс Статические веб-приложения с подключения к базе данных включен безопасно и готов к рабочей среде.

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

Обновление домашней страницы

Замените разметку между body тегами в файле index.html следующим html.

<h1>Static Web Apps Database Connections</h1>
<blockquote>
    Open the console in the browser developer tools to see the API responses.
</blockquote>
<div>
    <button id="list" onclick="list()">List</button>
    <button id="get" onclick="get()">Get</button>
    <button id="update" onclick="update()">Update</button>
    <button id="create" onclick="create()">Create</button>
    <button id="delete" onclick="del()">Delete</button>
</div>
<script>
    // add JavaScript here
</script>

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

Теперь вы можете запускать веб-сайт и управлять данными в базе данных напрямую.

  1. Запустите статическое веб-приложение с конфигурацией базы данных.

    swa start ./src --data-api-location swa-db-connections

Теперь, когда интерфейс командной строки запущен, вы можете получить доступ к базе данных через конечные точки, как определено в файле staticwebapp.database.config.json .

Конечная http://localhost:4280/data-api/rest/<ENTITY_NAME> точка принимает и DELETE запрашивает GETPUTPOST управление данными в базе данных.

Конечная http://localhost:4280/data-api/graphql точка принимает запросы GraphQL и изменения.

Обработка данных

Следующие команды, не зависящие от платформы, демонстрируют, как выполнять полные операции CRUD в базе данных.

Выходные данные для каждой функции отображаются в окне консоли браузера.

Откройте средства разработчика, нажав клавиши CMD/CTRL + SHIFT + I и выберите вкладку "Консоль".

Вывод списка всех элементов

Добавьте следующий код между тегами script в index.html.

async function list() {
  const endpoint = '/data-api/rest/Person';
  const response = await fetch(endpoint);
  const data = await response.json();
  console.table(data.value);
}

В этом примере:

  • Запрос по умолчанию для fetch API использует команду GET.
  • Данные в полезных данных ответа находятся в свойстве value .
async function list() {

  const query = `
      {
        people {
          items {
            Id
            Name
          }
        }
      }`;

  const endpoint = "/data-api/graphql";
  const response = await fetch(endpoint, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ query: query })
  });
  const result = await response.json();
  console.table(result.data.people.items);
}

В этом примере:

  • Запрос GraphQL выбирает Id и Name поля из базы данных.
  • Для запроса, переданного серверу, требуется полезные данные, в которых query свойство содержит определение запроса.
  • Данные в полезных данных ответа находятся в свойстве data.people.items .

Обновите страницу и нажмите кнопку "Список ".

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

ИД Имя
1 Солнечно
2 Dheeraj

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

Web browser showing results from a database selection in the developer tools console window.

Получение по идентификатору

Добавьте следующий код между тегами script в index.html.

async function get() {
  const id = 1;
  const endpoint = `/data-api/rest/Person/Id`;
  const response = await fetch(`${endpoint}/${id}`);
  const result = await response.json();
  console.table(result.value);
}

В этом примере:

  • Конечная точка суффиксирована /person/Id.
  • Значение идентификатора добавляется в конец расположения конечной точки.
  • Данные в полезных данных ответа находятся в свойстве value .
async function get() {

  const id = 1;

  const gql = `
    query getById($id: Int!) {
      person_by_pk(Id: $id) {
        Id
        Name
      }
    }`;

  const query = {
    query: gql,
    variables: {
      id: id,
    },
  };

  const endpoint = "/data-api/graphql";
  const response = await fetch(endpoint, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(query),
  });
  const result = await response.json();
  console.table(result.data.person_by_pk);
}

В этом примере:

  • Запрос GraphQL выбирает Id и Name поля из базы данных.
  • Для запроса, переданного серверу, требуется полезные данные, в которых query свойство содержит определение запроса.
  • Данные в полезных данных ответа находятся в свойстве data.person_by_pk .

Обновите страницу и нажмите кнопку "Получить ".

В окне консоли браузера теперь отображается таблица с описанием одной записи, запрошенной из базы данных.

ИД Имя
1 Солнечно

Обновить

Добавьте следующий код между тегами script в index.html.

Статические веб-приложения поддерживают как команды, так PUT и PATCH команды. Запрос PUT обновляет всю запись, в то время как PATCH выполняет частичное обновление.

async function update() {

  const id = 1;
  const data = {
    Name: "Molly"
  };

  const endpoint = '/data-api/rest/Person/Id';
  const response = await fetch(`${endpoint}/${id}`, {
    method: "PUT",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(data)
  });
  const result = await response.json();
  console.table(result.value);
}

В этом примере:

  • Конечная точка суффиксирована /person/Id/.
  • Значение идентификатора добавляется в конец расположения конечной точки.
  • Команда REST — PUT обновить запись базы данных.
  • Данные в полезных данных ответа находятся в свойстве value .
async function update() {

  const id = 1;
  const data = {
    Name: "Molly"
  };

  const gql = `
    mutation update($id: Int!, $item: UpdatePersonInput!) {
      updatePerson(Id: $id, item: $item) {
        Id
        Name
      }
    }`;

  const query = {
    query: gql,
    variables: {
      id: id,
      item: data
    } 
  };

  const endpoint = "/data-api/graphql";
  const res = await fetch(endpoint, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(query)
  });

  const result = await res.json();
  console.table(result.data.updatePerson);
}

В этом примере:

  • Запрос GraphQL выбирает Id и Name поля из базы данных.
  • Объект query содержит запрос GraphQL в свойстве query .
  • Значения аргументов функции GraphQL передаются через query.variables свойство.
  • Для запроса, переданного серверу, требуется полезные данные, в которых query свойство содержит определение запроса.
  • Данные в полезных данных ответа находятся в свойстве data.updatePerson .

Обновите страницу и нажмите кнопку "Обновить ".

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

ИД Имя
1 Молли

Создание

Добавьте следующий код между тегами script в index.html.

async function create() {

  const data = {
    Name: "Pedro"
  };

  const endpoint = `/data-api/rest/Person/`;
  const response = await fetch(endpoint, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(data)
  });
  const result = await response.json();
  console.table(result.value);
}

В этом примере:

  • Конечная точка суффиксирована /person/.
  • Команда REST — POST добавить запись базы данных.
  • Данные в полезных данных ответа находятся в свойстве value .
async function create() {

  const data = {
    Name: "Pedro"
  };

  const gql = `
    mutation create($item: CreatePersonInput!) {
      createPerson(item: $item) {
        Id
        Name
      }
    }`;

  const query = {
    query: gql,
    variables: {
      item: data
    } 
  };

  const endpoint = "/data-api/graphql";
  const result = await fetch(endpoint, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(query)
  });

  const response = await result.json();
  console.table(response.data.createPerson);
}

В этом примере:

  • Запрос GraphQL выбирает Id и Name поля из базы данных.
  • Объект query содержит запрос GraphQL в свойстве query .
  • Значения аргументов функции GraphQL передаются через query.variables свойство.
  • Для запроса, переданного серверу, требуется полезные данные, в которых query свойство содержит определение запроса.
  • Данные в полезных данных ответа находятся в свойстве data.updatePerson .

Обновите страницу и нажмите кнопку "Создать ".

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

ИД Имя
3 Педро

Удаление

Добавьте следующий код между тегами script в index.html.

async function del() {
  const id = 3;
  const endpoint = '/data-api/rest/Person/Id';
  const response = await fetch(`${endpoint}/${id}`, {
    method: "DELETE"
  });
  if(response.ok) {
    console.log(`Record deleted: ${ id }`)
  } else {
    console.log(response);
  }
}

В этом примере:

  • Конечная точка суффиксирована /person/Id/.
  • Значение идентификатора добавляется в конец расположения конечной точки.
  • Команда REST — DELETE удалить запись базы данных.
  • Если удаление выполнено успешно, свойство полезных данных ok ответа равно true.
async function del() {

  const id = 3;

  const gql = `
    mutation del($id: Int!) {
      deletePerson(Id: $id) {
        Id
      }
    }`;

  const query = {
    query: gql,
    variables: {
      id: id
    }
  };

  const endpoint = "/data-api/graphql";
  const response = await fetch(endpoint, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(query)
  });

  const result = await response.json();
  console.log(`Record deleted: ${ result.data.deletePerson.Id }`);
}

В этом примере:

  • Запрос GraphQL выбирает Id поле из базы данных.
  • Объект query содержит запрос GraphQL в свойстве query .
  • Значения аргументов функции GraphQL передаются через query.variables свойство.
  • Для запроса, переданного серверу, требуется полезные данные, в которых query свойство содержит определение запроса.
  • Данные в полезных данных ответа находятся в свойстве data.deletePerson .

Обновите страницу и нажмите кнопку "Удалить ".

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

Удаленная запись: 3

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

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

Чтобы развернуть этот сайт в рабочей среде, необходимо просто зафиксировать файл конфигурации и отправить изменения на сервер.

  1. Добавьте изменения файла для отслеживания.

    git add .

  2. Зафиксируйте изменения конфигурации.

    git commit -am "Add database configuration"

  3. Отправьте изменения на сервер.

    git push origin main

Подключение базу данных в статическое веб-приложение

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

  1. Откройте статическое веб-приложение на портале Azure.

  2. В разделе Параметры выберите подключение к базе данных.

  3. В разделе "Рабочая среда" выберите ссылку "Связать существующую базу данных".

  4. В окне "Ссылка существующей базы данных" введите следующие значения:

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

  5. Нажмите ОК.

Убедитесь, что база данных подключена к ресурсу Статические веб-приложения

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

  1. Откройте статическое веб-приложение на портале Azure.

  2. В разделе Essentials выберите URL-адрес ресурса Статические веб-приложения, чтобы перейти к статическому веб-приложению.

  3. Нажмите кнопку "Список", чтобы вывести список всех элементов.

    Выходные данные должны выглядеть примерно так, как показано на этом снимке экрана.

    Web browser showing results from listing records from the database in the developer tools console window.

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

Если вы хотите удалить ресурсы, созданные в рамках этого руководства, необходимо отменить связь с базой данных и удалить образцы данных.

  1. Отмена связи базы данных: откройте статическое веб-приложение в портал Azure. В разделе Параметры выберите подключение к базе данных. Рядом с связанной базой данных выберите "Просмотреть сведения". В окне сведений о подключении к базе данных нажмите кнопку "Отменить связь ".

  2. Удалите примеры данных: в базе данных удалите таблицу с именем MyTestPersonTable.

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

Добавление API