如何部署Angular与Socket.io应用？Firebase部署失败该如何处理？

核心前提：Firebase默认静态托管仅支持静态资源存储分发，Socket.io需要的WebSocket/长连接后端服务无法直接在Hosting上运行，需要搭配Cloud Functions/Cloud Run部署后端服务，再配置代理规则完成连通。

前端Angular项目适配 #

• 调整Socket.io客户端连接配置，不要写死本地测试地址，生产环境用相对路径走Firebase代理，示例代码：

import { io } from 'socket.io-client';
// 生产环境请求会自动转发到后端服务
const socket = io('/api');

• 打包生产环境产物，执行命令：

ng build --configuration production

打包完成后默认产物生成在dist/你的项目名目录，后续托管需要用到该路径。

Firebase基础环境配置 #

• 本地安装Firebase脚手架工具：

npm install -g firebase-tools

• 登录Firebase账号：

firebase login

• 项目根目录下初始化Firebase配置：

firebase init

初始化时按以下规则选择配置：

• 勾选 Hosting 和 Functions 两个功能项（高并发场景可选Cloud Run替代Functions）
• 绑定你提前在Firebase控制台创建的对应项目
• Hosting公共目录设置为Angular打包生成的dist/你的项目名路径
• 确认开启单页应用路由重写规则，不要覆盖已有的index.html文件

编写Socket.io后端Cloud Functions #

进入自动生成的functions目录，安装所需依赖：

cd functions
npm install express socket.io cors

修改functions/index.js文件，编写Socket.io后端服务逻辑：

const functions = require("firebase-functions");
const express = require("express");
const http = require("http");
const { Server } = require("socket.io");
const cors = require("cors");

// 配置运行参数，避免冷启动和超时
const runtimeOpts = {
  timeoutSeconds: 120,
  memory: "256MB"
};

const app = express();
app.use(cors({ origin: true }));

const server = http.createServer(app);
const io = new Server(server, {
  cors: {
    origin: "*",
    methods: ["GET", "POST"]
  }
});

// 替换为你的Socket.io业务逻辑
io.on("connection", (socket) => {
  console.log("用户连接成功", socket.id);
  socket.on("disconnect", () => {
    console.log("用户断开连接", socket.id);
  });
});

exports.api = functions.runWith(runtimeOpts).https.onRequest(server);

配置Hosting代理规则 #

修改项目根目录的firebase.json文件，添加路径重写规则，将/api开头的请求全部转发到后端Cloud Functions：

{
  "hosting": {
    "public": "dist/你的项目名",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "/api/**",
        "function": "api"
      },
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

执行部署 #

回到项目根目录，运行部署命令：

firebase deploy

部署完成后返回的Firebase Hosting地址即可正常访问，Socket.io功能可以正常运行。

提示：如果应用并发连接量较高，建议改用Cloud Run部署后端服务，规避Cloud Functions的冷启动延迟问题。

内容的提问来源于stack exchange，提问作者Somesh Khandelwal