代码之家 › 专栏 › 技术社区 › Stefan Falk

角度通用-仅用于网络爬虫的预渲染?

angular-universal serverside-rendering

Stefan Falk · 技术社区 · 6 年前

我想要的是以下模式:

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

之后 the official instructions 为了建立SSR,我现在可以验证Googlebot(最终)“看到”了我的网站,并且应该能够对其进行索引。

但目前, 全部的 请求在服务器上呈现。是否有办法确定传入的请求是否来自搜索引擎,并仅为它们预呈现站点?

0 回复 | 直到 6 年前

lolcatzftw 5 年前

您可以使用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;
    }

}

Sasan 5 年前

这就是我想到的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中托管的文件夹,并复制中的文件 浏览器 服务器 将中的文件夹添加到已创建的文件夹中。

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>

```
> node main.js
```
现在,您应该能够使用查看服务器端呈现的网站 localhost:4000
安装IIS重写模块
将文件夹添加到您的IIS以便托管

IIS将重定向具有 googlebot bingbot 在他们身上它由Express处理,并将返回服务器端呈现的内容。