Question

我打算将Angular Universal用于服务器端渲染（SSR），但这仅应用于来自选定搜索引擎的爬虫和漫游器。

我想要的是以下架构：

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

按照the official instructions设置SSR之后，我现在可以验证Googlebot（最终）“看到”了我的网站并应该对其进行索引。

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

Answer 1

您可以使用Nginx来实现。

在Nginx中，您可以通过以下方式将请求转发到通用服务的角度应用程序。

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

..假设您正在使用通用角度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;
    }

}

Answer 2

这是我想出的IIS：

根据official guide

为了摆脱复杂的文件夹结构，请更改server.ts

中的以下行

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

对此：

const distFolder = process.cwd();

运行npm run build:ssr命令。您最终将在browser文件夹中找到server和dist文件夹。

创建一个用于在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的请求重定向到localhost:4000，由Express处理，并将返回服务器端呈现的内容。

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

Angular Universal-仅针对Web爬虫进行预渲染吗？

2 个答案: