使用 Rendertron 进行服务器端渲染 - 不带 firebase 的 Angular 5

我使用 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 6 应用程序，并且遇到了同样的问题。我没有使用 Express 服务器或 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.

我发现这个 NGINX 配置来自预渲染io，您可以找到对不同服务器有用的东西或他们的任何其他方法repo.