如何在使用SWA CLI部署Azure静态Web应用时修改dataApiPort

在Windows环境下使用SWA CLI启动关联Cosmos DB的Svelte应用时，默认Data API端口5000被占用，--port参数仅修改前端应用端口（默认4280）无法解决问题，以下是几种修改Data API端口的有效方法：

方法一：命令行参数直接指定 #

启动SWA模拟器时，添加--data-api-port参数指定新端口，示例命令：

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

方法二：通过SWA CLI配置文件设置 #

在项目根目录创建swa-cli.config.json文件，配置默认启动参数：

{
  "configurations": {
    "default": {
      "appLocation": "./build",
      "dataApiLocation": "swa-db-connections",
      "dataApiPort": 5001
    }
  }
}

配置完成后，直接执行swa start即可自动使用指定端口。

方法三：修改Data API Builder配置文件 #

在swa-db-connections/staticwebapp.database.config.json的runtime.host节点中添加port字段：

{
  "$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": {
      "port": 5001,
      "cors": {
        "origins": ["http://localhost:4280"],
        "allow-credentials": false
      },
      "authentication": {
        "provider": "StaticWebApps"
      },
      "mode": "production"
    }
  },
  "entities": {
    "Person": {
      "source": "MyTestPersonContainer",
      "permissions": [
        {
          "actions": ["*"],
          "role": "anonymous"
        }
      ]
    }
  }
}

验证配置 #

修改完成后，可执行以下命令确认端口配置是否生效：

swa --print-config

输出结果中查看dataApiPort字段是否为指定的新端口，再启动模拟器测试即可。

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