Javascript 使用Angular 5-Firebase实现Rendertron

我正试图通过Firebase托管的Angular 5网站实现Rendertron。我一直在密切关注。在他开始在index.js中实现自定义函数之前，我一直能够让一切正常工作。他在视频中9点12分开始

以下是index.js文件中的代码：

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

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

admin.initializeApp(functions.config().firebase);

function generateUrl(request) {
  return url.format({
    protocol: request.protocol,
    host: appUrl,
    pathname: request.originalUrl
  });
}

function dectectBot(userAgent) {
  const bots = [
    'bingbot',
    'yandexbot',
    'duckduckbot',
    'slurp',

    'twitterbot',
    'facebookexternalhit',
    'linkedinbot',
    'embedly',
    'baiduspider',
    'pinterest',
    'slackbot',
    'vkShare',
    'facebot',
    'outbrain',
    '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 = dectectBot(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文件中引用app变量，如下所示：

"public": "dist",
    "rewrites": [
      {
        "source": "**",
        "destination": "app"
      }
    ],

我的IDE在代码中没有显示任何错误，但我在尝试部署函数时看到以下错误：

36:3   warning  Arrow function expected no return value     consistent-return
   89:5   error    Expected catch() or return                  promise/catch-or-return
   91:13  error    Each then() should return a value or throw  promise/always-return
   98:5   error    Expected catch() or return                  promise/catch-or-return
  100:13  error    Each then() should return a value or throw  promise/always-return

✖ 5 problems (4 errors, 1 warning)

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! functions@ lint: `eslint .`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the functions@ lint script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/username/.npm/_logs/2018-02-19T15_12_33_236Z-debug.log

Error: functions predeploy error: Command terminated with non-zero exit code1

我确信这不是最佳实践，但我在firebase.json文件中关闭了linter。一旦我这样做了，我就可以部署函数了

但是，部署托管文件时，会出现以下错误：

Error: HTTP Error: 400, hosting.rewrites[0] is not exactly one from [subschema 0],[subschema 1]

我找到了该错误的以下解决方案：

---

问题是我对Javascript和Angular非常陌生，所以我不确定如何实现该修复。另外，我不知道lint错误是否与此相关。

您的部署脚本是什么样子的？我的是

“部署”：“ng构建--prod--构建优化器和firebase部署--仅宿主和cd函数和firebase部署--仅函数”

部署后，我不调用服务器的函数

https://us-central1-your-project-name.cloudfunctions.net/app

（这给了我和你一样的错误）

但主机服务器：

---

https://your-project-name.firebaseapp.com

找到了您的问题，而不是需要添加函数并指向函数名称的目标。像这样：

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

---

此外，修复lint错误也不会有什么坏处。他们基本上是说，您需要为每个使用的

添加
。catch（）
。然后（）

。

我的答案太离谱了，我没有正确阅读代码！如果您切换到NGINX，请查看。