Rendertron的服务器端渲染 - 没有firebase的Angular 5

时间:2018-03-19 10:14:04

标签: angular fetch angular5 serverside-rendering

我使用rendertron作为服务器端渲染的解决方案,下面是index.js文件。如何执行index.js以及执行的位置。我已经在我的服务器上使用docker设置了我自己的redertron实例,我的角度应用程序构建在dist文件夹中如何使用rendertron呈现我的角度应用程序的完整html以及在哪里执行index.js

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

const appUrl = 'http://xyzabc.com';
const renderUrl = 'http://pqr.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());
            });
    }
});

3 个答案:

答案 0 :(得分:0)

http://pqr.com/render是您的个人渲染服务器吗?如果没有,您必须将请求转发给https://render-tron.appspot.com/render或自己单独部署Rendertron。

此外,您现在只需将创建的express-instance分配给常量(const app = express('')),对其进行配置并将其导出为firebase(您不使用)。相反,你必须在node.js服务器上运行表达自己。

答案 1 :(得分:0)

我正在使用Angular 6应用,并且遇到了同样的问题。我是在没有使用Express Server或Firebase的情况下完成此操作的,相反,我使用NGINX来检查代理标头,如果是机器人,则将其路由到rendertron,如果是普通用户,则将其路由到angular app。

如果您想使用NGINX采取这种方法。使用此配置。

server {
    server_name your-server-name;

    root /path to your dist;

    index index.html;

    location ~ /\. {
        deny all;
    }

    location / {
        try_files $uri @prerender;
    }

    location @prerender {
        set $prerender 0;

        if ($http_user_agent ~* "googlebot|yahoo|bingbot|baiduspider|yandex|yeti|yodaobot|gigabot|ia_archiver|facebookexternalhit|twitterbot|developers\.google\.com") {
            set $prerender 1;
        }

        if ($args ~ "_escaped_fragment_|prerender=1") {
            set $prerender 1;
        }

        if ($http_user_agent ~ "Prerender") {
            set $prerender 0;
        }

        if ($prerender = 1) {
            rewrite .* /render/$scheme://$host$request_uri? break;
            proxy_pass https://render-tron.appspot.com; #You can use our own hosted Rendertron
        }

        if ($prerender = 0) {
            rewrite .* /index.html break;
        }
    }
}

是的,如果它是机器人,则可以立即进行渲染。

如果您仍然想使用Express来做,那么rendertron提供了Express中间件。您可以检出here

我从prerender.io找到了这种NGINX配置,您可以在它们的repo中找到对其他服务器或任何其他方法有用的东西。

答案 2 :(得分:-1)

在使用aws帐户设置后,您就可以使用aws服务器体系结构,您可以登录那里并将所有代码都推送到rendertron文件夹中,请点击此链接

https://medium.com/@aakashbanerjee/deploying-rendertron-on-aws-ec2-8c00a4bb6b1e