基于Rendertron实现Angular 5无Firebase服务端渲染相关问询

我来一步步帮你解决这些问题：

一、如何执行你的index.js文件？应该在哪里执行？ #

• 执行命令：打开服务器的命令行终端，先导航到你的index.js文件所在的目录，然后运行 node index.js 即可启动服务。如果需要让服务后台持续运行（避免终端关闭后服务停止），可以用PM2工具：
  1. 先安装PM2：npm install -g pm2
  2. 启动服务：pm2 start index.js
  3. 后续可以用pm2 status查看状态，pm2 restart index.js重启服务
• 执行位置：优先在index.js所在的目录下执行命令，这样依赖查找和文件路径都更清晰。如果不方便切换目录，也可以用绝对路径执行，比如 node /home/your-user/project-folder/index.js。

二、如何借助自建Rendertron渲染Angular应用的完整HTML？ #

结合你已经用Docker部署Rendertron、Angular产物在dist文件夹的情况，需要完善Express服务的逻辑，让爬虫请求走Rendertron渲染，普通用户请求直接返回静态文件，步骤如下：

1. 完善你的index.js代码 #

首先补充代理和静态文件托管的逻辑，示例代码如下：

const express = require('express');
const fetch = require('node-fetch');
const url = require('url');
const app = express();

// 配置你的Angular应用访问地址（本地托管dist的话，后续用express.static处理即可）
const appUrl = 'http://localhost:3000'; 
// 替换为你Docker部署的Rendertron实例地址（默认端口3000，根据你的Docker映射端口调整）
const rendertronUrl = 'http://your-rendertron-container-ip:3000'; 

// 托管Angular的dist静态文件，普通用户请求直接访问
app.use(express.static('dist'));

// 定义需要触发SSR的爬虫User-Agent列表
const botUserAgents = [
  'googlebot', 'bingbot', 'slurp', 'duckduckbot',
  'baiduspider', 'yandexbot', 'sogoubot', 'facebot'
];

// 判断请求是否来自爬虫
const isBotRequest = (userAgent) => {
  return botUserAgents.some(bot => userAgent?.toLowerCase().includes(bot));
};

// 处理所有GET请求
app.get('*', async (req, res) => {
  const userAgent = req.headers['user-agent'];
  
  // 如果是爬虫请求，转发到Rendertron渲染完整HTML
  if (isBotRequest(userAgent)) {
    const targetUrl = url.resolve(appUrl, req.originalUrl);
    const renderRequestUrl = `${rendertronUrl}/render/${targetUrl}`;
    
    try {
      const renderResponse = await fetch(renderRequestUrl);
      const renderedHtml = await renderResponse.text();
      res.send(renderedHtml);
    } catch (error) {
      // 渲染失败时回退到静态文件，避免影响爬虫抓取
      console.error('Rendertron渲染失败:', error);
      res.sendFile('index.html', { root: 'dist' });
    }
  } else {
    // 普通用户请求直接返回Angular的入口文件
    res.sendFile('index.html', { root: 'dist' });
  }
});

// 启动Express服务
const port = process.env.PORT || 3000;
app.listen(port, () => {
  console.log(`Express服务运行在端口 ${port}`);
});

2. 启动服务并验证 #

• 按照第一部分的方法启动Express服务（node index.js或pm2 start index.js）
• 测试渲染效果：用curl模拟爬虫请求，比如 curl -A "Googlebot" http://your-express-server-url/your-angular-page，查看返回的HTML是否包含页面的完整内容（比如页面标题、正文文本，而不只是Angular的根<app-root>标签）

注意事项 #

• 确保你的Rendertron Docker容器和Express服务在同一网络下，或者Express服务能访问到Rendertron的地址（如果是远程服务器部署，要开放对应端口）
• 生产环境部署时，建议给Express服务配置反向代理（比如Nginx），处理HTTPS等场景

内容的提问来源于stack exchange，提问作者mpunit30