Firebase Cloud Functions部署Swagger UI后跳转授权页面求助

问题根源 #

部署后访问https://region-name-project-name.cloudfunctions.net/cfunc/docs时，Swagger UI的静态资源请求会丢失/cfunc前缀，导致重定向到https://region-name-project-name.cloudfunctions.net/docs——这个路径不存在对应的云函数，触发Google的身份验证页面。核心原因是Swagger UI默认使用根路径加载静态资源，没有适配Firebase云函数的URL结构（带函数名前缀）。

解决方案 #

1. 为Swagger UI指定基础路径前缀 #

修改Swagger UI的serve配置，明确指定静态资源的基础路径，让所有资源请求带上/cfunc前缀：

const swaggerDoc = require('./docs/swagger.config.json')
// 为swaggerUi.serve指定root参数，匹配云函数的路径前缀
app.use(
    '/docs',
    allowCors,
    swaggerUi.serve('/cfunc/docs', swaggerDoc),
    swaggerUi.setup(swaggerDoc, {
        // 将自定义资源路径改为带云函数前缀的绝对路径
        customCssUrl: '/cfunc/assets/swagger.css',
        customSiteTitle: 'My Function Title',
        customfavIcon: '/cfunc/assets/logo.ico',
        swaggerOptions: {
            supportedSubmitMethods: [] // 禁用"Try it out"按钮
        }
    })
)

2. 调整Swagger配置文件的basePath #

在swagger.config.json中添加basePath字段，对应云函数的路径前缀：

{
  "swagger": "2.0",
  "info": {
    "title": "My Function API",
    "version": "1.0.0"
  },
  "basePath": "/cfunc",
  // 其他配置...
}

3. 确保静态资源的路由正确 #

如果你的assets目录下的资源（swagger.css、logo.ico）是通过Express托管的，需要确保路由也带上/cfunc前缀：

// 托管静态资源，路径前缀匹配云函数名
app.use('/cfunc/assets', express.static('assets'))

验证步骤 #

部署修改后的云函数后，访问https://region-name-project-name.cloudfunctions.net/cfunc/docs：

• 检查浏览器开发者工具的网络面板，确认所有静态资源请求的URL都包含/cfunc前缀（比如/cfunc/assets/swagger.css）
• 确认页面不再重定向到根路径下的/docs，Swagger文档正常加载

内容的提问来源于stack exchange，提问作者Juanma López