如何解决NextJS部署到Firebase后访问报403 Forbidden、已配置函数Invoker权限仍无效的问题

核心排查方向与对应修复手段 #

1. Hosting与函数区域不匹配 #

你在函数代码中将nextApp部署到了asia-southeast2区域，但firebase.json的rewrites配置未声明关联的函数区域，Firebase Hosting默认会尝试调用us-central1区域的同名函数，找不到对应服务就会直接返回403。

• 修复方式：修改firebase.json的rewrites配置，显式指定关联函数的所在区域，替换原有的字符串类型function配置为对象格式：

"rewrites": [
  {
    "source": "**",
    "function": {
      "source": "nextApp",
      "region": "asia-southeast2"
    }
  }
]

2. 函数部署配置错误 #

• 当前配置将项目根目录作为函数部署源（"source": "."），会导致部署包过大、Next.js构建产物路径识别异常，需将函数入口、依赖、构建后的.next目录统一放到单独的子部署目录下，避免和前端项目的配置、依赖文件冲突
• 当前使用的nodejs12运行时已停止维护，Firebase不再支持该版本的新部署，需更换为受支持的运行时（如nodejs18）
• 检查functions配置的ignore规则，确保.next构建目录不会被错误过滤出部署包

3. IAM权限配置错配 #

你为allUsers添加Cloud Function Invoker角色时，需确认授权的目标资源是asia-southeast2区域下的nextApp函数本身，而非项目全局或其他区域的服务资源。同时需确认Firebase Hosting的默认服务账号已被添加为函数的invoker主体，否则Hosting路由请求到函数时会因权限校验失败被拦截。

4. 函数入口逻辑错误 #

你当前的代码在每次收到请求时才执行app.prepare()初始化流程，会导致冷启动时间过长、高并发下资源竞争，甚至触发请求超时被拦截。

• 修复方式：将Next.js初始化逻辑移到请求监听外层，仅在函数冷启动时执行一次：

const functions = require('firebase-functions');
const { default: next } = require('next');

const dev = process.env.NODE_ENV !== 'production';
const app = next({
  dev,
  conf: {
    distDir: '.next',
    future: {
      strictPostcssConfiguration: false,
      excludeDefaultMomentLocales: true,
      webpack5: false,
    },
  },
});
const handle = app.getRequestHandler();

// 函数初始化阶段完成Next.js加载，避免重复执行
app.prepare().then(() => {
  exports.nextApp = functions.region('asia-southeast2').https.onRequest((req, res) => {
    console.log('File: ' + req.originalUrl);
    return handle(req, res);
  });
});

内容的提问来源于stack exchange，提问作者Marcus Lee