如何使用 GitHub 工作流程在 Svelte 中通过数据库连接部署到 Azure Static Web App？

Question

我创建了一个 Svelte 骨架 Web 应用程序和一个 Cosmos NoSQL 数据库。我使用

swa

命令安装了

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

CLI 工具。此外，我还遵循 Azure 静态 Web 应用程序 (SWA) 文档中数据库连接部分下的Azure Cosmos DB 教程。我也根据文档成功创建了示例数据。

我设置数据库连接字符串环境变量：

export DATABASE_CONNECTION_STRING='<YOUR_CONNECTION_STRING>'

我使用

swa init

命令初始化了 SWA 配置。

/swa-db-connections

文件夹下的配置文件如下：

• staticwebapp.database.config.json：

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

• staticwebapp.database.schema.gql：

type Person @model {
  id: ID
  Name: String
}

我想模拟 Svelte 应用程序的生产版本并连接到 CosmosDB 以执行 CRUD 操作。

如何配置我的 Svelte 项目，以及将其部署到 Azure Static Web App 的 minimal GitHub 工作流文件是什么？

注意：我获得了 API 令牌密钥，它位于我的 GitHub 存储库设置 > 密钥和变量 > 操作 部分下。它被称为

AZURE_STATIC_WEB_APPS_API_TOKEN_BRAVE_COAST_063A3A503

。

Answer 1

首先，为生产版本配置

svelte.config.js

文件：

import adapter from '@sveltejs/adapter-static';

export default {
  kit: {
    adapter: adapter({
      pages: 'build',
      assets: 'build',
      fallback: 'index.html',
      precompress: false,
      strict: true
    })
  }
};

要测试数据库连接，请按照

routes/+page.svelte

主页中建议的教程列出 NoSQL 项目：

<script>
  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);
  }
</script>

<h1>Static Web Apps with Database Connections</h1>
<blockquote>Open the console in the browser developer tools to see the API responses.</blockquote>
<div>
  <button id="list" on:click={list}>List</button>
</div>

接下来，您可以使用以下命令在本地模拟静态 Web 应用程序：

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

转到 http://localhost:4280 URL，使用 F12 打开浏览器控制台，然后单击“列表”按钮。在控制台中，您将看到数据库容器中的项目。

创建 GitHub 工作流程的最后步骤。这是使用

Azure/static-web-apps-deploy@v1

操作的最小 azure-static-web-apps.yml 文件：

name: Azure Static Web Apps CI/CD

on:
  push:
    branches: 'main'

jobs:
  build_and_deploy_job:
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
      - uses: actions/checkout@v4
      - name: Build And Deploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_BRAVE_COAST_063A3A503 }}
          repo_token: ${{ secrets.GITHUB_TOKEN }}
          action: 'upload'
          app_location: '/'
          output_location: 'build'

验证 CosmosDB 是否已连接到 Azure 门户中的静态 Web 应用程序：

如果一切正常，您可以通过导航到静态 Web 应用程序资源下的概述 > 查看您的应用程序 > 访问您的站点按钮来访问并试用 Web 应用程序。