使用Firebase

时间：2018-02-18 18:55:07

标签： javascript reactjs firebase serverside-rendering

最近我努力使用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

enter image description here

但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文件读取或应该在哪里移动它，以便控制台在部署函数时不会抛出任何错误？

抱歉这么长的帖子。感谢您提供任何帮助。

0 个答案:

没有答案
相关问题
最新问题