Azure部署Node.js Socket.io应用：多模块路径与CORS配置求助

要在Azure上实现三个模块（spareparty、fastparty、easyparty）的独立Socket.io路径和CORS配置，需要同时调整代码逻辑和Azure平台设置，以下是具体步骤：

一、代码层面调整 #

1. 为每个模块创建独立的Socket.io实例 #

每个模块需单独初始化Socket.io实例，指定唯一路径和对应CORS源，建议通过环境变量区分开发/生产环境的配置：

模块Socket.io配置示例（spareparty为例，其余模块同理）

// _iospareparity.js
const setIoSpare = (server) => {
  const corsOrigin = process.env.NODE_ENV === 'production' 
    ? process.env.SPARE_PARTY_ORIGIN // 生产环境前端域名，如https://spareparty.yourdomain.com
    : "http://localhost:5173"; // 开发环境本地地址

  _ioSpareParty = new Server(server, {
    path: "/api/v1/games/spareparty", // 唯一路径，与其他模块区分
    cors: {
      origin: corsOrigin,
      methods: ["GET", "POST"],
      allowedHeaders: [
        "Origin",
        "X-Requested-With",
        "Content-Type",
        "Accept",
        "Authorization",
      ],
      credentials: true,
      optionSuccessStatus: 200,
    },
  });

  return _ioSpareParty;
};

// 同理创建fastparty和easyparty的配置文件：
// fastparty路径设为"/api/v1/games/fastparty"，CORS源用process.env.FAST_PARTY_ORIGIN
// easyparty路径设为"/api/v1/games/easyparty"，CORS源用process.env.EASY_PARTY_ORIGIN

服务器端初始化三个实例

// server.js
import { createServer } from "http";
import express from "express";
import { useAzureSocketIO } from "@azure/web-pubsub-socket.io";
import { setIoSpare } from "./_iospareparity.js";
import { setIoFast } from "./_iofastparity.js";
import { setIoEasy } from "./_ioeasyparity.js";

const app = express();
const server = createServer(app);
const PORT = process.env.PORT || 8000;
const webPubSubConnStr = process.env.WebPubSubConnectionString;

// 初始化三个模块的Socket.io实例
let ioSpareParty = setIoSpare(server);
let ioFastParty = setIoFast(server);
let ioEasyParty = setIoEasy(server);

// 绑定Azure Web PubSub，每个模块对应独立hub
useAzureSocketIO(ioSpareParty, {
  hub: "spare_hub",
  connectionString: webPubSubConnStr,
});

useAzureSocketIO(ioFastParty, {
  hub: "fast_hub",
  connectionString: webPubSubConnStr,
});

useAzureSocketIO(ioEasyParty, {
  hub: "easy_hub",
  connectionString: webPubSubConnStr,
});

// 绑定各自的连接处理逻辑
ioSpareParty.on("connection", spareParity);
ioFastParty.on("connection", fastParity);
ioEasyParty.on("connection", easyParity);

// 数据库连接与启动服务器逻辑保持不变...

2. 环境变量配置 #

在本地.env文件和Azure App Service应用设置中添加以下变量：

NODE_ENV=production
WebPubSubConnectionString=你的Azure Web PubSub连接字符串
SPARE_PARTY_ORIGIN=https://spareparty.yourdomain.com
FAST_PARTY_ORIGIN=https://fastparty.yourdomain.com
EASY_PARTY_ORIGIN=https://easyparty.yourdomain.com

二、Azure平台设置 #

1. Azure App Service配置 #

• 启用WebSocket：进入App Service -> 配置 -> 常规设置，将"WebSocket协议"设置为"开启"。
• 应用设置：将上述环境变量添加到App Service的"配置 -> 应用设置"中，避免硬编码敏感信息。
• CORS设置：在App Service的"配置 -> CORS"中，添加三个模块的前端源（即*_PARTY_ORIGIN的值），开发阶段可额外添加http://localhost:5173。

2. Azure Web PubSub资源配置 #

• 创建独立Hub：在Web PubSub资源中，创建三个独立Hub：spare_hub、fast_hub、easy_hub（需与代码中配置的hub名称完全一致）。
• CORS配置：进入Web PubSub资源 -> CORS，添加所有允许的前端源，确保与代码中CORS origin一致。
• 权限检查：确保Web PubSub连接字符串拥有Send和Listen权限，可在连接字符串生成页面选择对应权限范围。

三、验证配置 #

1. 本地测试：启动本地服务器和前端，分别连接三个模块的Socket.io路径（如http://localhost:8000/api/v1/games/spareparty），检查浏览器控制台是否有CORS错误，确认WebSocket连接成功建立。
2. 生产环境测试：部署代码到Azure后，使用生产前端域名连接对应路径，通过浏览器网络面板查看WebSocket请求状态，确认连接正常。

内容的提问来源于stack exchange，提问作者Baibhav Mandal