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

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

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

Замечание

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

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

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

Предпосылки

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

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

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

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

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

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

2. В разделе Настройки выберите пункт Сеть.

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

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

5. Нажмите кнопку "Сохранить".

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

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

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

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

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

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

5. Замените заполнитель {your_database} именем базы данных MyTestPersonDatabase. Вы создадите MyTestPersonDatabase на следующих этапах.

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

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

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

1. В Visual Studio Code с расширением оболочки MySQL создайте подключение к гибкому серверу 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.

   Bash

   git checkout main
   

   PowerShell

   git checkout main
   

2. Синхронизируйте вашу локальную версию с тем, что на GitHub, используя git pull.

   Bash

   git pull origin main
   

   PowerShell

   git pull origin main
   

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

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

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

   Bash

   export DATABASE_CONNECTION_STRING='<YOUR_CONNECTION_STRING>'
   

   PowerShell

   $env:DATABASE_CONNECTION_STRING='<YOUR_CONNECTION_STRING>'
   

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

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

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

   Bash

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

   PowerShell

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

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

   Bash

   npm update
   

   PowerShell

   npm update
   

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

   Bash

   swa db init --database-type mysql
   

   PowerShell

   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"
        }
      ]
    }
  }
}

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

Функция	Explanation
Подключение к базе данных	При разработке среда выполнения считывает строку подключения из указанного в файле конфигурации значения. Хотя вы можете указать строку подключения непосредственно в файле конфигурации, рекомендуется хранить строки подключения в локальной переменной среды. Значения переменных среды можно использовать в файле конфигурации через синтаксис @env('DATABASE_CONNECTION_STRING'). Значение строки подключения перезаписывается статическими веб-приложениями для развернутого сайта с данными, собранными при подключении базы данных.
Конечная точка API	Конечная точка REST доступна через /data-api/rest, в то время как конечная точка GraphQL доступна через /data-api/graphql в соответствии с настройками в этом файле конфигурации. Можно настроить пути 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 --data-api-location swa-db-connections
   

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

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

Конечная 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	Sunny
2	Дхирадж

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

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

Добавьте следующий код между 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	Sunny

Update

Добавьте следующий код между 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	Молли

Create

Добавьте следующий код между 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	Педро

Delete

Добавьте следующий код между 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. В окне "Ссылка существующей базы данных " введите следующие значения:

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

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

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

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

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

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

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

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

   

Очистите ресурсы

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

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

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

Дальнейшие шаги

Добавление API