最近我努力使用Firebase启用服务器端渲染。我在youtube上关注David East教程:
https://www.youtube.com/watch?v=82tZAPMHfT4&t=607s以及他对该项目的github回购:https://github.com/davideast/react-ssr-firebase-hosting
然而,github repo与他在youtube上制作的应用程序略有不同,因此可能会引起一些混淆:/
无论如何,我的问题是我错过了整个谜题的一小部分。
首先 ,我的应用程序具有以下结构:
- app
-- index.html
-- rest of files, store, app.js etc
-- all folders with components etc
- functions (google cloud functions)
-- index.js (holding my functions and code responsible for the SSR)
-- app (every file of my app compiled by babel, so I can render it to string)
-- package.json
-- node_modules
Okey,所以最重要的文件 - index.js
,其中包含我的代码,负责SSR +一些自定义谷歌云功能:
index.js
:const functions = require('firebase-functions');
const nodemailer = require('nodemailer');
import React from 'react';
import { renderToString } from 'react-dom/server';
import express from 'express';
import fs from 'fs';
import App from './app/containers/App';
const index = fs.readFileSync(__dirname + '/index.html', 'utf8');
const app = express();
app.get('**', (req, res) => {
const html = renderToString(<App />);
const finalHtml = index.replace('app', html);
res.set('Cache-Control', 'public, max-age=600, s-maxage=1200');
res.send(finalHtml);
});
export const ssrapp = functions.https.onRequest(app);
exports.someCustomFunction1 = functions.database.ref(...).onWrite(...);
exports.someCustomFunction2 = functions.database.ref(...).onWrite(...);
代码应该没问题......它与关于SSR的官方Firebase教程几乎相同。
index.html
(没什么特别的):<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="app">app</div>
<div id="fb-root"></div>
</body>
</html>
我的第一个问题:
如果我现在使用firebase deploy --only functions
,则说index.html
未找到 - 而且很明显,因为没有 {{1在} index.html
文件夹中。
然而,如果我将路径更改为:
functions
- 这是fs.readFileSync(__dirname + '/../build/index.html', 'utf8');
在构建过程之后的实际位置,然后我再次调用index.html
并出现另一个错误:
firebase deploy --only functions
但Function load error: Code in file index.js can't be loaded.
Is there a syntax error in your code?
Detailed stack trace: Error: ENOENT: no such file or directory, open '/user_code
/../build/index.html'
及其来自的是什么?
如果我删除负责阅读(fs)user_code
文件的部分,那么它看起来像:
index.html
第一秒只有页面加载时出现文本app.get('**', (req, res) => {
const html = renderToString(<App />);
res.set('Cache-Control', 'public, max-age=600, s-maxage=1200');
res.send(html);
});
,然后加载整个页面,所以看起来函数本身工作正常(正如你在我的app
文件中看到的那样&# 39;仅index.html
文本作为我app
中的内容。(服务器响应似乎工作正常,但实际上就是这样)
我应该怎样处理root div
文件读取或应该在哪里移动它,以便控制台在部署函数时不会抛出任何错误?
抱歉这么长的帖子。感谢您提供任何帮助。