nginx,预渲染和角度路由问题

mat*_*hes 1 seo nginx prerender angularjs

我正在开发一个动态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 ~ "_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)") {
            set $prerender 0;
        }

        if ($prerender = 1) {
        rewrite .* /$scheme://$host$request_uri?;
        proxy_pass http://localhost:3000;
        break;
        }

        # support html5mode of angular (fallback to index.html and let angular do the routing)
    try_files $uri $uri/ /angular_test/index.html;
    }

    location /es/ {
        rewrite /es/(.*) /$1 break;
        proxy_pass http://elasticsearch;
        proxy_redirect http://elasticsearch /es/;
    }

}
Run Code Online (Sandbox Code Playgroud)

当我访问http://localhost/angular_test/search?_escaped_fragment_=我得到一个 404 因为 nginx 试图加载文件/var/html/www/angular_test/search。这应该由 angulars 路由涵盖(请参阅 try_files 在 index.html 上进行尝试)。http://localhost/angular_test?_escaped_fragment_=工作正常

当我使用类似以下内容时(如此处https://gist.github.com/thoop/8165802 所述),它甚至没有进入@prerender位置部分。

location /angular_test {
    # support html5mode of angular (fallback to index.html and let angular do the routing)
    try_files $uri $uri/ /angular_test/index.html @prerender;
}
Run Code Online (Sandbox Code Playgroud)

有没有办法让这个设置运行prerender?我有一种感觉,我在这里没有以正确的方式使用 nginx...

mat*_*hes 5

我想出了解决办法。如果真的邪恶在 nginx 位置!

if(...)逻辑移出location和移到server. 这是我的最终配置:

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;

    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)") {
        set $prerender 0;
    }

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

        #resolve using Google's DNS server to force DNS resolution and prevent caching of IPs
        resolver 8.8.8.8;

        if ($prerender = 1) {
            #setting prerender as a variable forces DNS resolution since nginx caches IPs and doesnt play well with load balancing
            #set $prerender "$host:3000";
            rewrite .* /$scheme://$host$request_uri? break;
            proxy_pass http://localhost:3000;
        }

        # support html5mode of angular (fallback to index.html and let angular do the routing)
        try_files $uri $uri/ /angular_test/index.html;
    }

    location /es/ {
        rewrite /es/(.*) /$1 break;
        proxy_pass http://elasticsearch;
        proxy_redirect http://elasticsearch /es/;
    }

}
Run Code Online (Sandbox Code Playgroud)