Angular Universal - 只为网络爬虫预渲染？

Posted 2023-02-19

【中文标题】Angular Universal - 只为网络爬虫预渲染？

【英文标题】：Angular Universal - Pre-render only for web crawlers?

【发布时间】：2019-05-22 13:20:59

【问题描述】：

我打算将 Angular Universal 用于服务器端渲染 (s-s-r)，但这仅适用于来自选定搜索引擎的爬虫和机器人。

我想要的是以下架构：

来源：https://dingyuliang.me/use-prerender-improve-angularjs-seo/

在关注the official instructions 设置 s-s-r 后，我现在可以验证 Googlebot（最终）“看到”了我的网站并且应该能够对其进行索引。

但是，目前 所有 请求都在服务器上呈现。有没有办法确定传入的请求是否来自搜索引擎并仅为它们预渲染网站？

【参考方案1】：

您可以使用 nginx 来实现。

在 Nginx 中，您可以通过...将请求转发到通用服务的 Angular 应用程序。

        if ($http_user_agent ~* "googlebot|yahoo|bingbot") 
            proxy_pass 127.0.0.1:5000; 
            break;
        
        root /var/www/html;

..假设您正在为 Angular Universal via 127.0.0.1:5000 提供服务。

如果出现浏览器用户代理，我们会通过 root /var/www/html 提供页面

所以完整的配置应该是这样的......

server 
    listen 80 default;
    server_name angular.local;

    location / 
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $remote_addr;
        proxy_set_header Host $http_host;

        if ($http_user_agent ~* "googlebot|yahoo|bingbot") 
            proxy_pass 127.0.0.1:5000; 
            break;
        

        root /var/www/html;
    

【参考方案2】：

这是我想出的 IIS：

根据official guide将Angular Universal添加到您的项目中

为了摆脱复杂的文件夹结构，更改server.ts中的以下行

const distFolder = join(process.cwd(), 'dist/<Your Project>/browser');

到这里：

const distFolder = process.cwd();

运行npm run build:s-s-r 命令。您最终会在 dist 文件夹中看到 browser 和 server 文件夹。

在 IIS 中创建一个用于托管的文件夹，并将 browser 和 server 文件夹中的文件复制到创建的文件夹中。

iis\
  -assets\
  -favicon.ico
  -index.html
  -main.js => this is the server file
  -main-es2015.[...].js
  -polyfills-es2015.[...].js
  -runtime-es2015.[...].js
  -scripts.[...].js
  -...

将一个名为web.config 的新文件添加到此文件夹，内容如下：

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="Angular Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="REQUEST_FILENAME" matchType="IsFile" negate="true" />
            <add input="REQUEST_FILENAME" matchType="IsDirectory" negate="true" />
            <add input="HTTP_USER_AGENT" pattern="(.*[Gg]ooglebot.*)|(.*[Bb]ingbot.*)" negate="true" />
          </conditions>
          <action type="Rewrite" url="/index.html" />
        </rule>
        <rule name="ReverseProxyInboundRule1" stopProcessing="true">
          <match url=".*" />
          <conditions>
            <add input="HTTP_USER_AGENT" pattern="(.*[Gg]ooglebot.*)|(.*[Bb]ingbot.*)" />
          </conditions>
          <action type="Rewrite" url="http://localhost:4000/R:0" />
        </rule>
      </rules>
    </rewrite>
    <directoryBrowse enabled="false" />
  </system.webServer>
</configuration>

在此文件夹中打开命令提示符或 PowerShell 并运行以下命令：

> node main.js

现在您应该可以使用localhost:4000 查看您的服务器端渲染网站（如果您没有更改端口）

安装 IIS 重写模块

将文件夹添加到您的 IIS 以进行托管

IIS 会将包含googlebot 或bingbot 的请求重定向到由Express 处理的localhost:4000，并将返回服务器端呈现的内容。

您可以使用 Google Chrome 进行测试，打开开发者控制台，从菜单中选择“更多工具>网络条件”。然后从用户代理部分禁用“自动选择”并选择 Googlebot。