Firebase托管下登出功能失效及云函数生成静态HTML咨询

问题1：本地正常但Firebase Hosting部署后登出功能失效 #

先贴出你的代码方便分析：

firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
    // User is signed in.
    console.log("ADMIN is IN");
    // window.location.href = "admin.html"
  } else {
    // No user is signed in.
    console.log("No ADMIN");
    window.location.href = "login.html";
  }
});

function logout(){
  console.log("Function RAN");
  firebase.auth().signOut()
  .then(function() {
    console.log("FINE LOGOUT WORKED");
    window.location.href = "login.html";
  })
  .catch(function(error) {
    console.log(error);
  });
}

针对登出失效的问题，你可以按以下步骤排查解决：

• 检查Hosting缓存问题：Firebase Hosting默认会缓存静态资源，很可能是部署后旧的JS文件没被更新。部署时可以加上firebase deploy --only hosting --no-cache参数强制跳过缓存；或者在firebase.json里配置缓存规则，比如给JS文件设置较短的缓存有效期：

  "hosting": {
    "headers": [
      {
        "source": "**/*.js",
        "headers": [{"key": "Cache-Control", "value": "no-cache"}]
      }
    ]
  }
  

• 确认Auth授权域名：登录Firebase控制台，进入Auth模块的「登录方法」页面，检查「授权域」列表里是否包含你的Hosting域名（比如your-project.web.app或自定义域名），如果没加的话，Auth相关操作会被拦截。
• 查看浏览器控制台报错：部署后打开页面，按F12打开开发者工具，切换到Console标签，看看有没有CORS错误、Auth初始化失败之类的报错，这些信息能直接帮你定位问题。
• 检查logout函数的触发逻辑：如果是用onclick="logout()"绑定按钮，确认按钮的DOM元素是否正确加载，有没有被其他脚本覆盖事件；也可以改用addEventListener绑定事件，避免全局函数的冲突问题，比如：

  document.getElementById('logout-btn').addEventListener('click', logout);
  

• 统一Firebase SDK版本：确保本地开发和部署时使用的Firebase SDK版本一致，避免版本差异导致的兼容性问题，建议在引入SDK时固定版本号，比如<script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-auth.js"></script>。

问题2：能否通过Cloud Functions生成静态HTML并在Firebase Hosting提供服务？ #

完全可以实现，这里给你两种常用的方案：

方案一：动态生成HTML并通过Hosting重写访问 #

这种方式是用户访问特定URL时，触发Cloud Functions生成HTML并返回，配置步骤如下：

1. 在firebase.json里添加Hosting重写规则，把指定路径指向你的云函数：

   {
     "hosting": {
       "rewrites": [
         {
           "source": "/generated-page",
           "function": "generateStaticHtml"
         }
       ]
     }
   }
   

2. 在Cloud Functions中编写生成HTML的代码（以Node.js为例）：

   const functions = require("firebase-functions");
   
   exports.generateStaticHtml = functions.https.onRequest((req, res) => {
     // 动态生成HTML内容
     const htmlContent = `
       <!DOCTYPE html>
       <html>
         <head>
           <title>Cloud Functions Generated Page</title>
         </head>
         <body>
           <h1>这是由Cloud Functions动态生成的静态页面</h1>
         </body>
       </html>
     `;
     // 设置响应类型为HTML
     res.set('Content-Type', 'text/html');
     res.send(htmlContent);
   });
   

3. 部署函数和Hosting配置后，访问https://your-project.web.app/generated-page就能看到生成的HTML了。

方案二：预生成HTML并上传到Storage，由Hosting托管 #

如果你的HTML内容不需要实时生成，可以用Cloud Functions提前生成静态文件，上传到Cloud Storage，再让Hosting托管这些文件：

1. 编写Cloud Functions生成HTML并上传到Storage：

   const functions = require("firebase-functions");
   const { storage } = require("firebase-admin");
   const admin = require("firebase-admin");
   admin.initializeApp();
   
   exports.generateAndUploadHtml = functions.https.onRequest(async (req, res) => {
     const htmlContent = `<h1>预生成的静态HTML页面</h1>`;
     // 上传到Storage的指定路径
     await storage().bucket().file('generated/index.html').save(htmlContent, {
       contentType: 'text/html'
     });
     res.send('HTML文件已生成并上传');
   });
   

2. 在firebase.json里配置Hosting从Storage托管该目录：

   {
     "hosting": {
       "source": "storage://your-bucket-name/generated"
     }
   }
   

   或者混合托管，部分路径指向本地文件，部分指向Storage：

   {
     "hosting": {
       "public": "public",
       "rewrites": [
         {
           "source": "/static-generated/**",
           "storage": "/generated/**"
         }
       ]
     }
   }
   

两种方案各有优劣：动态生成适合需要实时内容的场景，但要考虑云函数的冷启动时间；预生成则能利用Hosting的CDN缓存，访问速度更快，适合内容更新不频繁的场景。

内容的提问来源于stack exchange，提问作者Sh Malik