使用Rendertron进行服务器端渲染-Angular 5无需Firebase

问题描述 投票:2回答:3

我正在使用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());
            });
    }
});
angular fetch angular5 serverside-rendering
3个回答
0
投票

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

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


0
投票

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

如果您想使用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中找到对其他服务器或任何其他方法有用的东西。


0
投票

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

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

© www.soinside.com 2019 - 2024. All rights reserved.