如何用swa CLI本地模拟Svelte应用并通过GitHub Workflow部署至Azure静态Web应用

问题背景 #

已创建Svelte骨架Web应用和Cosmos NoSQL数据库，通过npm install -g @azure/static-web-apps-cli安装了SWA CLI工具，遵循Azure静态Web应用数据库连接板块的Cosmos DB教程操作：

• 已在Cosmos DB创建示例数据，添加了list API测试部署，src/routes/+page.svelte内容如下：

<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>

已完成的配置 #

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

export DATABASE_CONNECTION_STRING='<YOUR_CONNECTION_STRING>'

2. 通过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
   }
   

3. /svelte.config.js内容：

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

export default {
  kit: {
    adapter: adapter()
  }
};

遇到的问题 #

执行swa start ./src --data-api-location swa-db-connections本地模拟时，输出显示SWA模拟器启动在http://localhost:4280，但访问时返回404: Not Found，Svelte应用无法加载。

需要解决：

1. 如何用SWA CLI本地正确模拟Svelte应用？
2. 用于自动部署的最简GitHub Workflow文件是什么？

解答 #

1. 本地模拟Svelte应用的正确方法 #

问题出在直接指定./src作为静态内容目录——Svelte Kit项目需要先构建生成静态文件，或者通过开发服务器代理到SWA模拟器，两种可行方案：

方案一：先构建Svelte应用，再启动SWA模拟器

1. 执行Svelte构建命令，生成生产环境静态文件：

npm run build

默认配置下，静态文件会输出到build目录。
2. 启动SWA模拟器，指定构建后的目录作为静态内容源：

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

方案二：同时启动Svelte开发服务器和SWA模拟器（适合开发调试）

1. 在一个终端启动Svelte开发服务器：

npm run dev

默认运行在http://localhost:5173。
2. 在另一个终端启动SWA模拟器，代理到Svelte开发服务器：

swa start http://localhost:5173 --data-api-location swa-db-connections

既可以享受Svelte的热重载，又能通过SWA模拟器访问Data API。

2. 最简GitHub Workflow部署文件 #

以下是适配Svelte Kit + Azure Static Web Apps的最简Workflow，包含自动构建、部署以及Data API配置：

name: Deploy to Azure Static Web Apps

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]
    types: [ opened, synchronize, reopened ]

jobs:
  build_and_deploy_job:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
      - uses: actions/checkout@v4
        with:
          submodules: true
          lfs: false
      - name: Build Svelte app
        run: |
          npm install
          npm run build
      - name: Deploy to Azure Static Web Apps
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
          repo_token: ${{ secrets.GITHUB_TOKEN }}
          action: "upload"
          app_location: "/" # 项目根目录
          api_location: "" # 无自定义API，留空
          output_location: "build" # Svelte构建输出目录
          config_file_location: "swa-db-connections" # 指定Data API配置目录
          env:
            DATABASE_CONNECTION_STRING: ${{ secrets.DATABASE_CONNECTION_STRING }}

说明：

• 需在GitHub仓库的Settings > Secrets and variables > Actions中添加两个密钥：
  • AZURE_STATIC_WEB_APPS_API_TOKEN：从Azure静态Web应用的部署中心获取
  • DATABASE_CONNECTION_STRING：Cosmos DB的连接字符串
• 若Svelte项目构建输出目录不是build，需对应修改output_location的值

内容的提问来源于stack exchange，提问作者Péter Szilvási