FetchError - 使用Rendertron进行服务器端渲染 - Firebase和Angular 5

Question

对于我的生活，我找不到适用于我的Angular 5站点的服务器端渲染解决方案。在我最近的尝试中，我一直在关注AngularFirebase.com提供的解决方案：https://angularfirebase.com/lessons/seo-angular-part-1-rendertron-meta-tags/

我的应用程序的所有内容都是硬编码的，所以我跳过了本教程的第一部分。我确实使用Firestore 2，但仅用于捕获联系表单上的字段。我的路由非常简单，都包含在module.ts文件中。我所做的事情的内容包含在我的index.js文件中：

const functions = require('firebase-functions');
const express = require('express');
const fetch = require('node-fetch');
const url = require('url');
const app = express('');

const appUrl = 'customapp.firebaseapp.com';
const renderUrl = 'https://render-tron.appspot.com/render';


    function generateUrl(request) {
        return url.format({
            protocol: request.protocol,
            host: appUrl,
            pathname: request.originalUrl
        });
    }
    function detectBot(userAgent){
        const bots = [
            'bingbot',
            'yandexbot',
            'duckduckbot',
            'slurp',
            //Social
            'twitterbot',
            'facebookexternalhit',
            'linkedinbot',
            'embedly',
            'pinterest',
            'W3C_Validator'
        ]

        const agent = userAgent.toLowerCase();

        for (const bot of bots) {
            if (agent.indexOf(bot) > -1) {
                console.log('bot detected', bot, agent);
                return true;
            }
        }

        console.log('no bots found');
        return false;
    }
app.get('*', (req, res) =>{
    const isBot = detectBot(req.headers['user-agent']);

    if (isBot) {
        const botUrl = generateUrl(req);

        fetch(`${renderUrl}/${botUrl}`)
            .then(res => res.text())
            .then(body => {
                res.set('Cache-Control', 'public, max-age=300, s-maxage=600');
                res.set('Vary', 'User-Agent');

                res.send(body.toString())
            });
    } else {
        fetch(`https://${appUrl}/`)
            .then(res => res.text())
            .then(body => {
                res.send(body.toString());
            });
    }
});

exports.app = functions.https.onRequest(app);

我已经使用这些重写设置了我的firebase.json：

"rewrites": [
      {
        "source": "**",
        "function": "app"
      }
    ]

一切都成功部署，但当我点击我的网站时，我的Firebase功能日志吐出：

Function execution took 677 ms, finished with status: 'crash'
warning  FetchError: request to https://test-297a3.firebaseapp.com/ failed, reason: getaddrinfo ENOTFOUND test-297a3.firebaseapp.com test-297a3.firebaseapp.com:443
        at ClientRequest.<anonymous> (/user_code/node_modules/node-fetch/lib/index.js:1376:11)
        at emitOne (events.js:96:13)
        at ClientRequest.emit (events.js:188:7)
        at TLSSocket.socketErrorListener (_http_client.js:310:9)
        at emitOne (events.js:96:13)
        at TLSSocket.emit (events.js:188:7)
        at connectErrorNT (net.js:1025:8)
        at _combinedTickCallback (internal/process/next_tick.js:80:11)
        at process._tickDomainCallback (internal/process/next_tick.js:128:9)
warning . Unhandled rejection

从我读到的here，似乎可能是我格式化URL，但我尝试以不同方式格式化它。在第二个fetch语句中，fetch(https：// $ {appUrl} / )我删除了“https：//”，但是fetch需要一个绝对URL。

我该如何解决这个冲突？任何建议表示赞赏！

Answer 1

看起来你是免费的Firebase游戏？如果是这样，您无法访问任何网络，只能使用Google API。需要启用结算功能。

您是否考虑过在FB云功能中运行Angular Universal？ Angularfire Lite支持这一点，我相信Angularfire2如果不是已经太早了。也可以在没有它们的情况下完成，但可能存在一些障碍，例如在服务器上手动关闭套接字连接，在zone.runOutsideAngular中包装东西等。