如何使用 Azure Static Web App 中的“mssql”包与 Svelte 连接到 Azure SQL 数据库？

Question

我使用 Svelte 框架部署了 Azure Static Web App (SWA)。 SWA 连接到 Azure SQL 数据库并使用 GraphQL 端点来查询数据库。我想用 SQL 查询替换 GraphQL 查询，因为当前查询“非常慢”。在约 21000 行的表上，第一个查询大约需要 10-11 秒。后续查询仍会执行大约 5-6 秒（连接可能已缓存）。 所以我决定使用

mssql

包来加快查询速度：

  const sql = require('mssql');

  const config = {
    server: '<server_name>.database.windows.net',
    database: '<database_name>',
    user: process.env.USER,
    password: process.env.PASSWORD,
    options: {
      encrypt: true
    }
  };

  onMount(async () => {
    const result = await sql
      .connect(config)
      .then(() => sql.query('SELECT * FROM <my_table>'))
      .then((result) => result.recordset)
      .catch((error) => console.warn('Error querying database: ', error));
    console.log(result);
  });

不幸的是，我在导入阶段遇到了错误。

未捕获（承诺中）ReferenceError：未定义需求

这是有道理的，因为 Svelte 在

module

文件下使用类型

commonjs

而不是

package.json

：

{
  ...
  "type": "module",
  "dependencies": {
    ...
  }
}

因此，我将 

const sql = require('mssql');

替换为

import sql from 'mssql';

import 语句。但我在构建过程中收到警告：

(!)有些块修改后大于 500 kB。

如果我忽略此警告，则会出现以下错误：

ReferenceError：缓冲区未定义

我找到了

Skipping Large chunks while running "Npm run build"

答案，它通过更新 vite.config.js 文件修复了警告。但是，在导入过程中我收到另一个“500 内部服务器错误”并显示以下错误消息：

类型错误：类扩展值未定义不是构造函数或 null

是否有一种简单的方法可以使用

mssql

包，而在导入语句期间无需太多解决方法？

Answer 1

mssql

包连接数据库的简单替代方案。诀窍是

使用 Azure Functions 将 API 添加到 Azure 静态 Web 应用

，导入/使用 mssql 包，然后通过 REST API 公开它。生成 API 最简单的方法是安装两个 VSCode 扩展：

Azure 静态 Web 应用程序
• 扩展
Azure Functions
• 扩展
这些是根据当前文档的步骤：

在项目根目录创建一个

api
• 文件夹按
F1
• 打开命令面板 选择
Azure Static Web Apps: Create HTTP Function....
• 在
Select a language
• 输入

  JavaScript

  在
Select a programming model
• 输入

  型号 V4

  在
Provide a function name
• 输入

  databaseEndpoint

它将用内容填充

api

文件夹。安装

mssql

软件包：cd api && npm install mssql

现在，我们可以使用

src/functions/databaseEndpoint.js

文件中的包了：

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

const config = {
  server: '<server_name>.database.windows.net',
  database: '<database_name>',
  // The environment variables can be stored under the `api/local.settings.json` file
  user: process.env.USER,
  password: process.env.PASSWORD,
  options: {
    encrypt: true
  }
};

app.http('databaseEndpoint', {
  methods: ['GET', 'POST'],
  authLevel: 'anonymous',
  handler: async (request, context) => {
    return await sql
      .connect(config)
      .then(() => sql.query('SELECT * FROM <my_table>'))
      .then((result) => ({ jsonBody: result.recordset }))
      .catch((error) => ({ jsonBody: `Error querying database: ${error}` }));
  }
});

最后，我们可以在 Svelte (

+page.svelte

) 应用程序中使用创建的 API：

<script>
  import { onMount } from 'svelte';

  onMount(async () => {
    const result = await fetch('api/databaseEndpoint')
      .then((response) => response.json())
      .catch((error) => console.warn('Error at fetching databaseEndpoint endpoint: ', error));
    console.log(result);
  });
</script>

使用以下命令构建并模拟 SWA：

npm run build
swa start build --api-location api

通过替换 GraphQL 端点，我获得了显着的性能。从 Azure Function 端点获取数据仅需约 1 秒（加速 5 倍）。

部署

不要忘记在部署期间在

api_location

文件中添加

azure-pipelines.yaml

：

      - task: AzureStaticWebApp@0
        inputs:
          azure_static_web_apps_api_token: $(AZURE_STATIC_WEB_APPS_API_TOKEN_GRAY_WAVE_014164E03)
          app_location: '/'
          api_location: 'api'
          output_location: 'build'