使用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 个答案:

没有答案