使用 Rendertron 进行服务器端渲染 - 没有 Firebase 的 Angular 5 [英] Server-side rendering with Rendertron - Angular 5 without firebase

问题描述

我使用 rendertron 作为服务器端渲染的解决方案，下面是 index.js 文件.如何执行 index.js 以及在哪里执行.我已经在我的服务器上使用 docker 设置了我自己的 redertron 实例，我的 angular 应用程序构建在 dist 文件夹中如何使用 rendertron 呈现我的 angular 应用程序的完整 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 应用程序，但遇到了同样的问题.我没有使用快速服务器或 firebase，而是使用 NGINX 检查代理标头并将它们路由到渲染器(如果它是机器人)或到角应用程序(如果它是普通用户).

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.

Incase，如果您想使用 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 配置，你可以找到对不同服务器或任何其他方法有用的东西在他们的 repo 中.

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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！