使用 Firebase Functions 和 Firebase Hosting 进行动态渲染

Question

我正在尝试使用 Firebase 函数为托管在 Firebase 托管中的 React 应用程序实现动态渲染。

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

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

到目前为止，我刚刚更改了 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');
});

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

任何 help/suggestion 将不胜感激

Answer 1

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

等模块

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

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() 的参考。

使用 Firebase Functions 和 Firebase Hosting 进行动态渲染

Dynamic rendering with Firebase Functions and Firebase Hosting

node.js

express

firebase

firebase-hosting

google-cloud-functions