使用RenderRon的服务器端渲染-Angular 5，不使用firebase

我使用rendertron作为服务器端渲染的解决方案，下面是index.js文件。如何执行index.js以及在何处执行。我已经在我的服务器上使用docker设置了我自己的redertron实例，我的angular应用程序构建在dist文件夹中。如何使用Renderron呈现我的angular应用程序的完整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());
            });
    }
});

---

是

http://pqr.com/render

您的个人渲染服务器？如果没有，您必须将请求转发到

https://render-tron.appspot.com/render

或单独部署Rendertron

---

现在，您只需将创建的express实例分配给常量（

const app=express（“”）

），对其进行配置并将其导出到firebase（您不使用）。相反，您必须在node.js服务器上运行express yourself

我使用的是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中间件。你可以去看看

---

我从中找到了这个NGINX配置，您可以在不同的服务器或任何其他方法中找到一些有用的东西。

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

---

但这会在机器人端右侧渲染？？如何使它即使在客户端bcoz上也能呈现我也在使用我的应用程序的社交共享链接，这些链接需要meta标签。否。在代码中看到if-else

if（isBot）{}else{}

？如果为true，则将请求转发到运行rendertron的服务器。如果为false，它将转发到服务器，您在该服务器上托管已编译到/dist文件夹中的生产内置Angular应用程序。这就是为什么你有一个renderUrl和一个appurl，我用了if-else，但我没有在客户端得到呈现的html，甚至没有任何效果。您是否可以提供angular2应用程序和rendertron的完整使用步骤或报告？？自从上个2-3周以来，我一直在尝试这一点，但我什么也做不到。我现在正在用Angular/Firebase/Rendertron创建我的博客。如果你愿意，我可以在未来几天删除个人配置并将框架上传到github。但是它和教程项目没有太大区别，所以我不确定它是否会对你有多大帮助。但它将帮助我完成这些步骤。在教程项目中，我并没有完全清楚地知道如何使用和实现相同的功能。