Nginx conf用于预渲染+反向代理到django +在html5模式下提供角度

时间:2015-10-22 01:08:40

标签: angularjs nginx pushstate prerender

满满的标题说明了一切:

我们有一个带有Django后端的Angular前端,提供一个在端点独立公开的REST API example.com/api/v1/*

Angular应用程序以HTML5模式运行,我们希望通过example.com/foo/bar的硬链接将用户带入foo.bar状态的应用程序,就像它是静态页面而不是应用程序状态一样(其中fooapi之外的任何内容。

我们在nginx后面运行,我们在conf中的基本策略是定义^~ /scripts/images等位置以直接提供静态内容,以及^~ /api/*被路由到django的位置。在下面,我们有一个location ~ ^/.+$匹配任何与上述任何一个不匹配的路径并“将其发送到Angular” - 即为我们提供索引页面并将路径附加到基本URL,允许我们的角度路由器从那里处理它。

这是我们的完整内容:

upstream django {
    server 127.0.0.1:8000 fail_timeout=0;
}

server {
    listen                  80;
    server_name example.com;
    return 301 https://example.com$request_uri;
}

server {
    listen          443;
    server_name example.com;
    client_max_body_size 10M;
    ssl                     on;
    ssl_certificate         /etc/ssl/thawte/example_com.crt;
    ssl_certificate_key     /etc/ssl/thawte/example_com.key;
    ssl_verify_depth 2;
    gzip            on;
    gzip_types      text/plain text/html application/javascript application/json;
    gzip_proxied        any; 

    index index.html;

    location ^~ /index.html {
        gzip_static on;
        root /www/dist;
    }
    location ^~ /images/ {
        expires max;
        root /www/dist;
    }
    location ^~ /scripts/ {
        expires max;
        gzip_static on;
        root /www/dist;
    }

    location ^~ /favicon.ico {
        expires max;
        root /www/dist;
    }

    location ^~ /api {
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_set_header X-Forwarded-Proto https;
        proxy_redirect off;
        proxy_pass http://django;
    }

    //Send anything else to angular 
    location ~ ^/.+$ {
        rewrite .* /index.html last;
    }

}

这对我们来说非常有效,但我们现在需要将其设置为与prerender.io 一起使用。我们已经尝试过这几种方式,在the official prerender nginx example上进行修改,但没有一种方法有效 - 爬虫正在获得与用户相同的代码而不是缓存页面。

我们如何才能实现这一目标?

(注意:这是所有参与此处的人的新领域,因此如果处理此问题的最佳方法是在几步后做出不同的选择,请提出建议)

1 个答案:

答案 0 :(得分:1)

事实证明,上面发布的配置一直都在运行。

我意识到这一点,当我最终想到尝试将https://example.com/anything放入爬虫调试器(而不是https://example.com时,这是我之前测试的所有内容),并且它有效 - 爬虫是按预期提供缓存页面。

这只是因为贪婪的量词:

location ~ ^/.+$ {

与空字符串不匹配。额外的

location = / {
    try_files $uri @prerender;
 }

,我的conf正如预期的那样工作。

希望我额头上的手印只是将https://example.com放在爬虫调试器中 - 这是行不通的。

从好的方面来说,我认为下周末我可以将额头上的这个手印变成一件漂亮的万圣节服装....

仍然不确定我是否已采用最佳方式,并欢迎其他建议。