Ably与Vercel集成问题：部署后无法发布/订阅频道

我在Express应用中使用Ably作为WebSocket服务提供商，Vercel官方也推荐使用Ably管理WebSocket。但部署到Vercel后，应用虽能成功连接Ably，却无法发布或订阅频道，本地环境完全正常，怀疑是Vercel配置问题。

项目依赖 #

{
  "devDependencies": {
    "@types/jest": "^29.5.12",
    "@types/mongoose": "^5.11.97",
    "@types/uuid": "^9.0.8",
    "dotenv": "^16.4.5",
    "eslint": "^9.0.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-config-standard-with-typescript": "^43.0.1",
    "eslint-plugin-import": "^2.25.2",
    "eslint-plugin-n": "^15.0.0 || ^16.0.0 ",
    "eslint-plugin-prettier": "^5.1.3",
    "eslint-plugin-promise": "^6.0.0",
    "jest": "^29.7.0",
    "nodemon": "^3.1.0",
    "pre-commit": "^1.2.2",
    "prettier": "^3.2.5",
    "ts-jest": "^29.1.4",
    "ts-loader": "^9.5.1",
    "tsx": "^4.9.3",
    "typescript": "^5.4.5",
    "webpack": "^5.91.0",
    "webpack-cli": "^5.1.4"
  },
  "dependencies": {
    "@types/cors": "^2.8.17",
    "@types/express": "^4.17.21",
    "@types/node": "^20.11.22",
    "@typescript-eslint/eslint-plugin": "^7.0.0",
    "@typescript-eslint/parser": "^7.1.0",
    "ably": "^2.0.4",
    "cors": "^2.8.5",
    "express": "^4.19.2",
    "fp-ts": "^2.16.6",
    "io-ts": "^2.2.21",
    "mongodb": "^6.6.0",
    "mongoose": "^8.3.3",
    "random-words": "^2.0.1",
    "uuid": "^9.0.1"
  }
}

Vercel配置（vercel.json） #

{
  "version": 2,
  "builds": [
    {
      "src": "dist/bundle.js",
      "use": "@vercel/node",
      "config": { "includeFiles": ["dist/**"] }
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "dist/bundle.js",
      "methods": ["GET", "POST", "PATCH", "DELETE", "OPTIONS"],
      "headers": {
        "Access-Control-Allow-Origin": "*"
      }
    }
  ]
}

可能的原因分析 #

• Vercel无服务器函数的生命周期限制：Vercel的Node.js函数是按需启动的，请求结束后函数实例会被销毁，无法长期保持Ably客户端的订阅状态。本地环境是持续运行的服务器，客户端实例一直存在，但Vercel的函数每次请求结束就释放，新请求的实例没有订阅之前的频道，导致发布/订阅失效。
• Ably客户端实例未全局复用：如果你的代码在每次请求时才初始化Ably客户端，而不是创建全局单例，那么Vercel函数每次启动都会生成新的客户端，无法继承之前的订阅关系。本地环境中实例一直存在，自然能维持订阅。
• CORS配置缺失WebSocket相关头：虽然你设置了Access-Control-Allow-Origin: *，但WebSocket连接需要额外的CORS头支持，比如Access-Control-Allow-Headers需包含Authorization、Upgrade等Ably所需的头，或者Access-Control-Allow-Methods未覆盖WebSocket的升级请求逻辑，导致浏览器端的订阅请求被拦截。
• 环境变量配置不一致：本地用dotenv加载的Ably密钥等环境变量，在Vercel平台上可能未正确配置，或者权限不足。比如ABLY_API_KEY是否在Vercel的环境变量中正确设置？即使连接成功，若密钥权限限制了发布/订阅操作，也会导致功能失效。
• Webpack打包导致Ably模块异常：Webpack打包过程中可能对Ably的内部模块进行了不合理的处理，比如移除了WebSocket的polyfill，或者压缩时破坏了Ably的客户端逻辑，导致在Vercel的Node环境中无法正常执行发布/订阅操作。
• 路由未处理WebSocket升级请求：WebSocket连接依赖Upgrade请求头，但你的路由配置中只指定了常规HTTP方法，没有处理WebSocket的升级请求。Vercel的Node函数需要显式处理Upgrade事件，否则无法建立持久的WebSocket连接通道，进而影响发布/订阅。

内容的提问来源于stack exchange，提问作者L. Pier Roberto