标签: prerender

我想我尝试编写的这个Nginx配置可能比我可以尝试的更多。我是nginx config的新手，并且我正在尝试编写一个非常复杂的配置（至少对我来说）。任何帮助将不胜感激。

配置需要：

1. 将http $ http_x_forwarded_proto重定向到https（在ec2负载均衡器处https断开）
2. 与prerender.io的Nginx中间件一起使用（用于可爬网单页应用程序的SEO）
3. 将任何查询参数（_escaped_fragment_=）从http传递到https
4. 将所有子域请求重定向到https://example.com/c/ $ subdomain
5. 允许http://example.com/healthcheck.txt通过http（负载均衡器运行状况检查）

这是我当前的配置

server {
    listen 80;
    server_name example.com;

    root   /var/www/html/dist;
    index  index.html;

    error_log  /var/log/mysite/error.log;
    access_log /var/log/mysite/access.log;

    location /healthcheck.txt {
        break;
    }

    location / {
        try_files $uri @prerender;

        if ($http_x_forwarded_proto != "https") {
            set $urltest N;
        }

        if ($query_string) {
            set $urltest "${urltest}Y";
        }

        if ($urltest = N) {
            rewrite ^(.*)$ https://example.com$1 permanent;
        }

        if ($urltest = NY) {
            rewrite ^(.*)$ https://example.com$1?$query_string permanent;
        }
    } …

我正在将一个ASP.NET Core项目从AngularJS升级到Angular 4.现在Angular Universal(社区分支)已经集成到Angular本身,我想尝试服务器预渲染.

使用Vue 2和ASP.NET Core进行预渲染非常优雅(例如http://mgyongyosi.com/2016/Vuejs-server-side-rendering-with-aspnet-core/).

是否有关于将Angular 4服务器预渲染与ASP.NET Core 集成的类似示例或教程,避免从Angular Universal样本进行任何重构？

我有一个全新的 angular 通用项目，它似乎伪装了所有的 HTML（这很好）。但是，我正在尝试对我的 .NET 服务器进行 API 调用，该服务器是使用 weatherforecast API 构建的标准 API。

API 调用并且效果很好，但只有在我的 Web 应用程序从预渲染切换到 csr 后才会发生。参见示例 1。

示例 1

如果我在页面上禁用 javascript，这就是我得到的

这是 HTML 代码

  <div style="padding: 5rem">
    <h1>TEST</h1>
    <h2>{{ this.SampleMessage }}</h2>
    <div *ngFor="let product of weather$ | async">
      <p>{{ this.product.summary }}</p>
    </div>
  </div>

app.component.ts

import { AppService } from './app.service';
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  title …

根据Glassfish3.1.1的Mojarra-2.1.3(随Netbeans7.1一起发布)

我有一个带有侦听器void reset()的@SessionScoped支持bean跟踪器.

以下在f:使用template.xhtml的所有XHTML页面的元数据中都可以正常工作,例如/block/view.xhtml,它也采用查询参数id:

<f:view>
    <f:metadata>
        <f:viewParam name="id" value="#{blockManager.id}"/>
        <f:event type="preRenderView" listener="#{tracker.reset}"/>            
    </f:metadata>
</f:view>

<ui:composition template="/template.xhtml">

正如所料,每当我加载(GET)或重新加载页面时,无论id查询参数是什么,都会调用#{tracker.reset}侦听器(如调试日志记录所示).

但是,必须在每个XHTML页面(其中有数百个)中包含f:事件是很繁琐的,我首先尝试将其放在我的template.xhtml的f:metadata中.但是当我做了一些奇怪的事情时.它只调用#{tracker.reset}一次,第一次加载/block/view.xhtml(无论id查询参数是什么),然后在我加载另一个具有不同viewId的页面之后再没有调用它,例如/actor/view.xhtml,或/block/list.xhtml或/index.html.

我使用template.xhtml中的#{facesContext.viewRoot.viewId}检查了viewId.从viewId的角度来看很清楚,查询参数id在区分使用不同id查询参数调用的不同block/view.xhtml？id = [id]页面时没有任何作用,viewId总是只是'/ block /view.xhtml".

在写这个stackoverflow发布期间,我发现了我的问题的解决方案:只需将f:event放在f:metadata.xhtml的元数据之外(我在template.xhtml中使用f:metadata来分组f:events ).这适用于template.xhtml:

<f:metadata>
..
</f:metadata>
<f:event type="preRenderView" listener="#{tracker.reset}"/>
<h:head>

但我仍然有以下问题:

问:为什么我是否在模板中的f:元数据中放置f:事件会有所不同？

我问的原因是Stackoverflow上有很多例子,在template.xhtml中使用f:元数据,在f:元素模板中使用f:事件.

BalusC在何时使用f:viewAction/preRenderView与PostConstruct？:

在每个HTTP请求上调用preRenderView事件.

如果我在最终XHTML页面的f:元数据中有preRenderView f:事件,或者在模板的f:元数据之外,但不在f:元数据中,那么这似乎只是真实的(按预期工作)模板.

关于是否应该在f:模板的元数据中使用f:event,或者在模板中使用f:metadata,似乎存在一些争论.

JSF2完全参考(Burns和Schalk)p.540指出:

f:metadata标记封装了用于指定Facelets视图的元数据的元素集,因此必须是f:view标记的子元素,并且可能不会出现在模板中.从JSF2.0开始,此标记的唯一目的是封装f:viewParam标记.

但是有很多关于f的Stackoverflow的例子:在模板中使用的元数据,并且有很多f:在f:metadata中使用的事件的例子.这也在这里讨论:

是否在f:元数据中放置f:event是否重要？

BalusC在哪里帮助解释:

.. <f:event>并非严格要求放在<f:metadata>中.它可以附加到任何组件...当你有一堆<f:viewParam>并且希望挂钩<f:event>以在所有那些视图参数之后调用一个动作时,确实存在于<f:metadata>内的纯自我纪录目的已经设定好了...

但我上面的经验表明,在f:模板的元数据中放置和f:事件会产生稍微不同(奇怪)的行为.为什么？

我试图用每个视图检查身份验证

<f:event type="preRenderView" listener="{#loginControl.checkAuthentication}" /> 

标签.

机制有效,但看起来很糟糕,似乎缺少一些CSS.当我删除支票时,我的页面会按原样显示.

这是我的一个观点,其中是检查身份验证:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<f:event listener="#{loginControl.checkAuthorization}" type="preRenderView" />
<h:head>
...

调用以下方法:

public void checkAuthorization(ComponentSystemEvent evt){
  FacesContext ctx = FacesContext.getCurrentInstance();
  ConfigurableNavigationHandler nav = (ConfigurableNavigationHandler)      
  ctx.getApplication().getNavigationHandler();

  // navigate to login-screen
  if(this.user==null){          
   nav.performNavigation("login");
  } else {
   nav.performNavigation("welcome");
  }
}

输出是这样的:

http://www.convince-it.de/Auswahl_002.jpeg

http://www.convince-it.de/Auswahl_003.jpeg

正如您所看到的那样,当我检查授权时,组件不会被渲染.第一张图片是启用授权检查时生成的视图的屏幕截图.第二个视图是未经授权检查的渲染视图,但具有所需的外观.

有任何想法吗？

我试图在预渲染事件中隐藏/显示嵌套telerik rad网格上的不同列,基于一个标志,但无论我将可见或显示属性设置为什么,它们都显示

这些是我的网格列:

<telerik:GridBoundColumn UniqueName="LocalDeanery" ReadOnly="true" DataField="localdeanery" HeaderText="Local Deanery" SortExpression="localdeanery"
    HtmlEncode="false" >
</telerik:GridBoundColumn>               

<telerik:GridTemplateColumn UniqueName="Sector2013" HeaderText="Sector" SortExpression="hasBeenHeld desc,Sector" AllowFiltering="false" >
    <ItemTemplate>
        <asp:Label ID="Label2" runat="server" Text='<%# Eval("Sector").ToString() + " (" + Eval("PrefRank").ToString() + ") " + (Eval("conditional").ToString()==""?"":"Conditional")%>'
             Visible='<%#  Eval("OfferId").ToString()!="" %>' />
    </ItemTemplate>
</telerik:GridTemplateColumn>

<telerik:GridBoundColumn UniqueName="Region" ReadOnly="true" DataField="tRegion" HeaderText="Region" SortExpression="tRegion"
    HtmlEncode="false">
</telerik:GridBoundColumn>               

<telerik:GridBoundColumn UniqueName="Subregion" ReadOnly="true" DataField="tSubRegion" HeaderText="Sub-Region" SortExpression="tSubRegion"
    HtmlEncode="false" >
</telerik:GridBoundColumn>               

<telerik:GridBoundColumn UniqueName="Sector2014" ReadOnly="true" DataField="tSector" HeaderText="Sector" SortExpression="tSector"
    HtmlEncode="false" >
</telerik:GridBoundColumn>

这是隐藏列的代码:

protected void RadGrid1_PreRender(object sender, EventArgs e)
{
    RadGrid od = (RadGrid)RadGrid1.MasterTableView.Items[0].ChildItem.FindControl("OfferDataDetail"); …

我按照本教程:http: //www.ng-newsletter.com/posts/serious-angular-seo.html

我从这里使用修改过的apache conf(原来没有用,我更改了HTTP_USER_AGENT位) https://gist.github.com/thoop/8072354

现在我的.htaccess文件看起来像这样

    # Change YOUR_TOKEN to your prerender token and uncomment that line if you want to cache urls and view crawl stats
    # Change http://example.com (at the end of the last RewriteRule) to your website url


    <IfModule mod_headers.c>
        RequestHeader set X-Prerender-Token "MY TOKEN"
    </IfModule>

    <IfModule mod_rewrite.c>
        RewriteEngine on

        Options +FollowSymLinks
        #RewriteRule ^api/(.*)$ http://vivule.ee/api/$1 [P,L]

        # Don't rewrite files or directories
        RewriteCond %{REQUEST_FILENAME} -f [OR]
        RewriteCond %{REQUEST_FILENAME} -d
        RewriteRule ^ - [L]

        # Rewrite …

只是想说我真的很喜欢prerender.io,但我现在遇到了问题,我想知道是否我做错了什么,有更多经验的人可以帮助我.

我在prerender.io网站上遇到了同样的问题,并且我在Debian Linux机器箱中设置了prerender用于本地执行.

我的新站点是ASP.Net MVC和angular的混合,其中angular表示服务器上MVC路由中的工作流(或内容类别).

一类内容的示例是:

http://[somesitename]/PublicContent/#!/news

http://[somesitename]/PublicContent/#!/welcome

MVC服务器端路由是:

http://[somesitename]/PublicContent

和#!/ news和#!/ welcome是角度应用程序路由,欢迎也是默认路由.

当我将URL发送到prerender.io服务或我的本地实例时:

http://service.prerender.io/http://[somesitename]/PublicContent/#!/news

prerender服务只呈现:

http://[somesitename]/PublicContent

而#忽略了客户端路线#!

因此,对于每个MVC路由的所有页面,我只是获取多次呈现的默认路由...

这是prerender.io的错误吗？或者我没有没有正确配置的东西？

我有:

<meta name="fragment" content="!">

在我的所有页面的头部,如果那将是重要的.

我如何在 asp.net core 中实现 prerenderio，用于 angular spa。或者asp.net核心有什么方法可以做到这一点。实际上，我正在将旧的 asp.net 迁移到 asp.net 核心。

我正在开发一个动态angular网站（html5mode用于删除#）。它用于Elasticsearch抓取一些数据并呈现内容。nginx负责映射到Elasticsearch我的网站根目录。

为了获得整个网站的搜索引擎优化能力，我想整合预渲染，使用本地实例（http://localhost:3000 )。

我拼命地尝试将预渲染魔法与 nginx 结合使用location /angular_test。默认的 nginx 预渲染中间件配置不适用于locations。在我的 nginx 配置下面找到：

upstream elasticsearch {
    zone elasticsearch 64K;
    server localhost:9200;
}

server {
    listen 80 default_server;
    listen [::]:80 default_server;

    root /var/www/html;

    index index.html index.htm index.nginx-debian.html;

    server_name angular_test_server;

    location /angular_test {
        rewrite_log on;
        error_log /var/log/nginx/localhost.error_log notice;

        set $prerender 0;
        if ($http_user_agent ~* "baiduspider|twitterbot|facebookexternalhit|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest|slackbot|vkShare|W3C_Validator") {
            set $prerender 1;
        }
        if ($args ~ …

我有一个单页应用程序/渐进式 Web 应用程序，我使用 Nginx 作为静态文件使用以下设置为其提供服务：

server {
        listen 80;
        listen [::]:80;

        root /var/www/mydomain.com/html;

        index index.html index.htm index.nginx-debian.html;

        server_name mydomain www.mydomain;

        location / {
                sendfile           on;
                tcp_nopush on;
                sendfile_max_chunk 1m;

                tcp_nodelay       on;
                keepalive_timeout 65;

                # First attempt to serve request as file, then
                # as directory, then fall back to displaying a 404.
                try_files $uri $uri/ /index.html;
        }

}

现在我想检查用户代理是否是，例如，Facebook 爬虫，在这种情况下我想使用本地 NodeJS 服务器的代理，我对 Nginx 不太了解，但在谷歌搜索这个问题后我最终得到了以下代码：

server {
    listen 80;
    listen [::]:80;

    server_name mydomain www.mydomain;

    location / {
        try_files $uri @prerender;
    } …

我正在尝试使用 预渲染我的角度应用程序ng run [myAppName]:prerender。我只想预渲染 的内容，/因为其他路由不需要预渲染。尽管它找到了一种方法来预渲染我的 angular.json 配置中未包含的其他路由。

Angular.json

    "prerender": {
      "builder": "@nguniversal/builders:prerender",
      "options": {
        "browserTarget": "[myApp]:build:production",
        "serverTarget": "[myApp]:server:production",
        "routes": [
          "/" // <--- One route listed...
        ]
      },
      "configurations": {
        "production": {}
      }
    }

使用上面的配置，它仍然会预渲染 16 个其他路由（例如 /my-other-route）

有没有办法只能预渲染页面/？

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.901.10
@angular-devkit/build-angular     0.901.10
@angular-devkit/build-optimizer   0.901.10
@angular-devkit/build-webpack     0.901.10
@angular-devkit/core              9.1.10
@angular-devkit/schematics        9.1.10
@angular/cdk                      9.2.4
@angular/cli                      9.1.10
@angular/fire                     6.0.2
@angular/google-maps              10.0.2
@angular/material                 9.2.4
@angular/platform-server          9.1.12
@ngtools/webpack                  9.1.10
@nguniversal/builders             9.1.1
@nguniversal/common               9.1.1
@nguniversal/express-engine       9.1.1 …

我正在努力使我的 AngularJS 电子商务应用程序对 SEO 更友好，所以我正在努力让 Prerender.io 在应用程序上运行。

我的托管/服务文件设置是使用来自 AWS 上托管的 docker 容器的nginx。

到目前为止，我已经：

1. 更改了我的 nginx.conf -基于 Prerender 文档推荐的官方 nginx.conf

   server {
       listen 9001;
       server_name localhost;
       root /app;
       index index.html;
   
       location /store {  
           proxy_set_header X-Prerender-Token RIDE(H9j9jdeRANDOMtoken;
   
           set $prerender 0;
           if ($http_user_agent ~* "baiduspider|twitterbot|facebookexternalhit|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest|slackbot|vkShare|W3C_Validator") {
               set $prerender 1;
           }
           if ($args ~ "_escaped_fragment_") {
               set $prerender 1;
           }
           if ($http_user_agent ~ "Prerender") {
               set $prerender 0;
           }
           if ($uri ~* "\.(js|css|xml|less|png|jpg|jpeg|gif|pdf|doc|txt|ico|rss|zip|mp3|rar|exe|wmv|doc|avi|ppt|mpg|mpeg|tif|wav|mov|psd|ai|xls|mp4|m4a|swf|dat|dmg|iso|flv|m4v|torrent|ttf|woff|svg|eot)") {
               set $prerender 0;
           }
   
           #resolve …

   Run Code Online (Sandbox Code Playgroud)