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

问题描述

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

I am using rendertron as a solution for server side rendering, below is index.js file. How to execute index.js and where to execute. I have setup my own instance of redertron using docker on my server and my angular app build is within dist folder how to render complete html of my angular app using rendertron and where to execute 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 6应用，但遇到了同样的问题.我是在没有使用Express Server或Firebase的情况下完成此操作的，相反，我使用NGINX来检查代理标头，如果是机器人，则将其路由到rendertron，如果是普通用户，则将其路由到angular应用程序.

I'm using an Angular 6 app and I was facing the same issue. I did it without using an express server or firebase, instead I used NGINX to check the agent header and route them to rendertron if it's a bot or to the angular app if it's a normal user.

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

Incase, if you wanted to take this approach using NGINX. Use this configuration.

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;
        }
    }
}

是的，如果它是机器人，则现在可以进行预渲染.

And yes, you can now pre-render if it's a bot.

如果您仍然想使用Express来做，那么rendertron提供了Express中间件.您可以在此处查看.

If you still wanted to do it using a express, rendertron offers an express middleware. You can check it out here.

我从 prerender.io 找到了这种NGINX配置，您可以找到适用于不同服务器或任何其他方法的内容在他们的回购中.

I found this NGINX configuration from prerender.io, you can find something useful for different server or any other approach in their repo.

这篇关于使用Rendertron进行服务器端渲染-无Firebase的Angular 5的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！