如何测试和调试触发云功能的漫游器请求

时间:2019-03-23 17:02:33

标签: angular seo google-cloud-functions

问题

我正在构建一个角度pwa,我想对其进行一些基本的seo优化。我设置了meta标签,以便在您使用seo服务导航到应用程序中的其他路由时进行更改。然后,我制作了一个使用该函数的firebase云函数。https.onRequest(myFunction)检查该请求是否来自机器人,如果是,则将其发送到rendertron,如果不是,它将把用户发送到我的页面。

我认为我的Firebase云功能出了点问题。它要么没有检测到机器人请求,要么没有正确地将请求发送到rendertron,但是我不确定如何调试它。

我尝试使用firebase serve模拟用户请求页面,并且一切正常。我只是不确定如何模拟本地请求页面的机器人,因此我可以看到发生了什么。我尝试部署该功能并通过在Facebook上共享该功能进行测试,但在Facebook预览中似乎只能看到初始的元标记,而不是已更改的标记。

seo服务

该服务似乎正常运行。我只是以为我会包括这个,这样您就可以了解如何动态更改元标记。

import { Injectable } from '@angular/core';
import { Meta } from '@angular/platform-browser';
import { SeoConfig } from '../interfaces/seo-config.interface';

@Injectable({
  providedIn: 'root'
})
export class SeoService {

  constructor(private meta: Meta) { }

  generateTags(config: SeoConfig) {
    config = {
      title: 'my default site title here...',
      description: 'my default description here...',
      image: 'my default path to image here...',
      slug: '',
      ...config
    }
    this.meta.updateTag({ property: 'og:title', content: config.title});
    this.meta.updateTag({ property: 'og:description', content: config.description});
    this.meta.updateTag({ property: 'og:image', content: config.image});
    this.meta.updateTag({ property: 'og:url', content:`https://paradigmShift.app/${config.slug}`});
    this.meta.updateTag({ name: 'twitter:card', content: 'summary_large_image'});
  }

firebase云功能

我怀疑这是问题所在

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

const appUrl = 'my domain here';
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 botList = 'baiduspider|facebookexternalhit|twitterbot|rogerbot|linkedinbot|embedly|quora\ link\ preview|showyoubot|outbrain|pinterest|slackbot|vkShare|W3C_Validator|slackbot|facebot|developers\.google\.com\/\+\/web\/snippet\/'.toLowerCase();

    if (userAgent.toLowerCase().search(botList) != -1) {
        return true;
    } else {
        return false;
    }
}

app.use(cors());

app.get('*',(req, res) => {
    const isBot = detectBot(req.headers['user-agent']);
    if (isBot) {
        const botUrl = generateUrl(req);
        console.log('bot detected', botUrl);
        fetch(`${renderUrl}/${botUrl}`)
            .then(res => res.text())
            .then(body => {
                res.set('Cache-Control', 'public, max-age=300, s-maxage=600');
                res.set('Very', 'User-Agent');
                res.send(body.toString());
            });
    } else {
        console.log('no bot detected', appUrl);
        fetch(`${appUrl}`)
            .then(res => res.text())
            .then(body => {
                console.log(body.toString());
                res.send(body.toString());
            });
    }
});

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

如果您可以在我的代码或云函数中发现任何错误,那将是非常棒的。如果没有,我正在寻找的是一种在漫游器请求页面时调试该功能的方法。

0 个答案:

没有答案