javascript - 如何将所有服务器请求重定向到 Firebase 托管中的函数
问题描述
尝试使用 Firebase 实现 SSR,因此我使用了一个函数来预渲染 React App 的每个页面。除了主页之外它运行良好,因此它必须是firebase重定向上的匹配错误或可能在快速路由本身上。
firebase.json
{
"firestore": {
"rules": "firestore.rules",
"indexes": "firestore.indexes.json"
},
"functions": {
"predeploy": [
"npm --prefix \"$RESOURCE_DIR\" run lint"
]
},
"hosting": {
"public": "build",
"rewrites": [
{
"source": "**",
"function": "contentServer"
}
],
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
}
}
内容服务器.js
import * as functions from 'firebase-functions';
import * as fs from 'fs';
import * as path from 'path';
import React from 'react';
import Helmet from 'react-helmet';
import { renderToString } from 'react-dom/server';
import Server from '../browser/Server.js';
const express = require('express');
const app = express();
// might be this? Also tried /**
app.get(['**'], (request, response) => {
const context = {};
const location = request.url;
console.log('Processing request for ', location);
let appCode;
try {
appCode = renderToString(<Server context={context} location={location} />);
} catch (err) {
appCode = 'with error';
}
// const appState = {
// pageTitle: 'Hello World',
// };
// const preloadedState = JSON.stringify(appState).replace(/</g, '\\u003c');
const fileName = path.join(__dirname, '../index.html');
const htmlTemplate = fs.readFileSync(fileName, 'utf8');
const head = Helmet.renderStatic();
const responseString = htmlTemplate
.replace('<div id="root"></div>', `<div id="root">${appCode}</div>`)
.replace('<title>React App</title>', `${head.title}\n${head.link}`);
return response.send(responseString);
});
export default functions.https.onRequest(app);
卷曲
我跑firebase serve --only functions,hosting
然后使用 curl 检查响应:
curl http://localhost:5000 - does not render the home page - just the standard react page
curl http://localhost:5000/ - also does not work - just the standard react page.
curl http://localhost:5000/contact-us - works well and returns the contact us page, all other pages on the site work and trigger the function.
解决方案
如果您想将每个 URL 重定向到您的主机到 Cloud Functions 中的快速应用程序,您需要执行以下操作:
确保您的公共托管文件夹中没有 index.html(否则它将始终与 path 一起提供/
)。
在 firebase.json 中配置 Firebase 托管以将所有 url 重写为一个函数(您目前正在“托管”块中执行此操作,这很好):
"rewrites": [
{
"source": "**",
"function": "contentServer"
}
]
编写一个与 rewrite 中的函数同名导出的云函数,并附加一个处理通配符的路由的快速应用程序*
。在您的函数文件夹中的 index.js 中,至少:
const functions = require('firebase-functions')
const express = require('express')
const app = express()
app.get("*", (request, response) => {
response.send("OK")
})
exports.contentServer = functions.https.onRequest(app)
如果您使用 本地运行它firebase serve --only hosting,functions
,您发送到 localhost:5000 的每个路径都会显示“OK”。
推荐阅读
- python - 如何将 Celery 从 AMQP 升级到 RPC?
- c# - 如何使用 .NET Framework 连接 SAP Business One 服务层
- c++ - 为什么这里的重载解决方案是错误的?
- vue.js - 使用 Vue 2 和 Vue 3 管理 Lerna monorepo
- powershell - 在 Powershell 中单击 ListBox 选择后设置变量
- python - 花式分度自动完成轴
- delphi - OleVariant 到 TStringList
- docker - 我可以用什么来代替heroku的音量
- r - R as.numeric() 更改值(不是因素问题)
- c++ - gcc -O2 优化到奇怪的行为,这是一个错误吗?