使用 Firebase 函数和 Firebase 托管进行动态渲染答案

【问题标题】：Dynamic rendering with Firebase Functions and Firebase Hosting使用 Firebase 函数和 Firebase 托管进行动态渲染
【发布时间】：2021-06-30 06:09:32
【问题描述】：

我正在尝试使用 Firebase 功能为托管在 Firebase 托管中的我的反应应用程序实现动态渲染。

其背后的想法来自这篇文章， https://dev.to/burhanahmeed/dynamic-rendering-simple-solution-for-spa-when-shared-on-social-media-amd

我想要实现的是 Firebase Functions 处理所有请求，根据用户代理提供动态生成的静态内容，否则提供托管在 Firebase Hosting 中的主应用程序。

到目前为止，我刚刚更改了 firebase.json 以将所有请求重定向到我的“app”函数而不是“/index.html”

    "rewrites": [
      {
        "source": "**",
        "function": "app"
      }
    ]

我的应用功能类似于

app.get('*', (req, res) => {
  if(isBot()){
    // serve static content
  }else{
    // serve the index of my hosted app
    res.render('/index'); // <--- how to access hosted /index.html in build ??
  }
});

exports.app = functions.https.onRequest(app);

我面临的问题是，从 Firebase Functions 中运行的函数中，我无法从“build”文件夹中获取内容

我正在尝试类似的东西

app.get('*', (req, res) => {
  res.render('../build/index');
});

但这显然行不通，我不确定什么是最好的方法..

任何帮助/建议将不胜感激

【问题讨论】：

我更新了我的答案，希望对你有帮助。
嗨@giovanni 和@Dondi，我正在使用firebase 函数托管来实现它，但我收到错误“错误：未指定默认引擎且未提供扩展名。在新视图中” 。这就是我的index.js 看起来像const app = express(); app.set('views', path.join(__dirname, '..', 'build')); app.get('**', function (req, res) { res.render('index'); }); exports.app = functions.https.onRequest(app);
@AhsanUllah 请检查此answer。如果这不能解决您的问题，我的建议是发布一个新问题，以便您进一步详细说明。
@Dondi 问题解决了我发现无法渲染 html 文件，我们需要发送 html 文件而不是渲染。 这解决了我的问题， res.sendFile('index.html)谢谢你的回复

标签： node.js firebase express google-cloud-functions firebase-hosting

【解决方案1】：

res.render() 接受绝对路径，或相对于视图设置的路径。为了正确遍历文件系统，需要使用path等模块。

以下是从where the current JS file 所在位置向上移动到“build”目录的方法，例如：

const express = require('express');
const path = require('path');

...

app.set('views', path.join(__dirname, '..', 'build'));

然后渲染你的模板：

res.render('index');

或者，另一种不指定视图的方法是直接渲染模板，如下示例：

res.render(path.join(__dirname, '..', 'build', 'index'));

res.render(path.join(__dirname, '..', 'build') + '/index');

这里是如何使用path.join()的参考。

【讨论】：