执行firebase serve时出现CANNOT GET/错误无法访问自建站点

问题排查与修复方案 #

CANNOT GET / 报错的核心原因是没有配置根路径的请求处理逻辑，也没有打通firebase hosting和云函数的路由转发，可按以下步骤逐一修复： #

1. 云函数侧代码修正 #

你当前的云函数只初始化了express实例，既没有定义路由规则，也没有导出为firebase可识别的云函数：

补充根路径路由与导出逻辑

在你现有云函数代码末尾添加以下内容：

// 定义根路径请求处理逻辑
app.get('/', async (req, res) => {
  const deviceData = await getFirestore()
  // 渲染views目录下的index.hbs模板，可按需传递参数
  res.render('index', { deviceData: deviceData })
})

// 将express实例导出为firebase云函数，函数名为app
exports.app = functions.https.onRequest(app)

修正getFirestore函数的返回逻辑

你现有的getFirestore没有正确返回查询结果，调整如下：

async function getFirestore() {
  const firestore = admin.firestore();
  try {
    const doc = await firestore.collection('device').doc("device").get()
    if (doc.exists) return doc.data()
    console.log("No such document!")
    return null
  } catch (err) {
    console.log('Error getting document', err)
    return null
  }
}

修正admin初始化配置错误

你当前admin.initializeApp里的databaseURL填错为服务账号邮箱，需改为你的实时数据库地址：

admin.initializeApp({
    credential: admin.credential.cert(serviceAccount),
    databaseURL: "https://unabiz-firebase-default-rtdb.firebaseio.com"
})

2. firebase.json配置修正 #

要让hosting的请求转发到你的云函数，需要在firebase.json中添加rewrite规则：

{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "function": "app"
      }
    ]
  },
  "functions": {
    "source": "functions"
  }
}

如果你不需要用服务端渲染，只是要托管静态html，直接把你的index.html放到public目录下即可，不需要配置rewrite规则，也不需要写express相关代码，直接启动serve就能访问。 #

3. 前端index.html语法修正 #

你当前的前端代码存在script标签嵌套错误，把内层的script引入删除，改为ES模块导入即可：

<script type="module">
  // 正确导入firebase初始化方法
  import { initializeApp } from "https://www.gstatic.com/firebasejs/9.1.1/firebase-app.js";
  const firebaseConfig = {
      apiKey: "AIzaSyDVYsLyFvqo8jYc28QPiD5Os69PxKvnG1g",
      authDomain: "unabiz-firebase.firebaseapp.com",
      databaseURL: "https://unabiz-firebase-default-rtdb.firebaseio.com",
      projectId: "unabiz-firebase",
      storageBucket: "unabiz-firebase.appspot.com",
      messagingSenderId: "48829412875",
      appId: "1:48829412875:web:6273116637b54d0bc2b90e"
  };
  const app = initializeApp(firebaseConfig);
</script>

验证步骤 #

修改完成后重新执行firebase serve --only hosting,functions，查看终端输出的云函数是否正常启动，访问对应地址即可正常加载页面。

内容的提问来源于stack exchange，提问作者Javier Wong