配置Nginx SSL预渲染AngularJS应用问题求助

我明白这种抓瞎的感觉——费了半天劲配置预渲染，结果Googlebot还是看到一堆{{}}语法，太闹心了。咱们一步步排查，应该能找到问题所在：

1. 先确认预渲染服务本身是否正常 #

先别着急看Nginx，先测试预渲染服务能不能正确返回渲染后的页面。比如你用的是本地预渲染服务（比如prerender-node或Prerender.io的本地实例），直接用curl请求预渲染服务：

curl http://localhost:3000/https://yourdomain.com/your-test-route

如果返回的HTML里还是有{{}}，那问题出在预渲染服务本身——比如它没正确加载你的AngularJS应用，或者路由配置有问题。这时候要检查预渲染服务的日志，看看有没有加载错误。

2. 检查Nginx的UA匹配规则是否覆盖全 #

Googlebot的User-Agent不止一种，你的Nginx规则可能没匹配到真实的Googlebot请求。建议把常见的爬虫UA都加进去，比如：

if ($http_user_agent ~* "googlebot|bingbot|slurp|duckduckbot|baiduspider|yandex|sogou|exabot|facebot|ia_archiver") {
    set $prerender 1;
}

另外，别忘了匹配_escaped_fragment_参数——这是AngularJS早期SEO的标准参数，有些爬虫会用这个来请求预渲染内容：

if ($args ~ "_escaped_fragment_") {
    set $prerender 1;
}

3. 验证Nginx是否正确转发爬虫请求 #

用curl模拟Googlebot的UA请求你的网站，看看返回的内容：

curl -A "Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)" https://yourdomain.com/your-test-route

如果返回的还是原始AngularJS页面（带{{}}），说明Nginx的规则没触发。这时候要检查：

• 你的location块优先级是否正确？比如有没有其他location（比如静态资源的规则）先匹配了请求，导致预渲染的规则没执行。
• proxy_pass是否指向了正确的预渲染服务地址（比如http://localhost:3000，注意端口是否一致）。
• 查看Nginx的错误日志（通常在/var/log/nginx/error.log），看看有没有转发时的错误（比如502 Bad Gateway，说明预渲染服务没启动或者端口不对）。

4. 检查AngularJS的配置 #

如果你的AngularJS用了HTML5模式，要确保配置正确：

angular.module('yourApp', [])
  .config(['$locationProvider', function($locationProvider) {
    $locationProvider.html5Mode(true).hashPrefix('!');
  }]);

这样当爬虫请求带_escaped_fragment_的URL时，预渲染服务才能正确解析对应的路由。

给你一个参考的Nginx配置片段 #

server {
    listen 80;
    server_name yourdomain.com;

    # 静态资源直接返回，跳过预渲染
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        root /path/to/your/angular/app/dist;
        expires 1y;
        add_header Cache-Control "public, immutable";
    }

    # 主路由处理
    location / {
        root /path/to/your/angular/app/dist;
        try_files $uri $uri/ @prerender;
    }

    # 预渲染转发规则
    location @prerender {
        set $prerender 0;
        # 匹配爬虫UA
        if ($http_user_agent ~* "googlebot|bingbot|slurp|duckduckbot|baiduspider|yandex|sogou|exabot|facebot|ia_archiver") {
            set $prerender 1;
        }
        # 匹配escaped_fragment参数
        if ($args ~ "_escaped_fragment_") {
            set $prerender 1;
        }

        if ($prerender = 1) {
            # 转发到预渲染服务
            proxy_pass http://localhost:3000;
            # 如果用Prerender.io的云端服务，需要加token
            # proxy_set_header X-Prerender-Token "your-prerender-token";
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }

        # 非爬虫请求返回原始index.html
        if ($prerender = 0) {
            rewrite .* /index.html break;
        }
    }
}

最后提醒 #

• 确保预渲染服务已经启动并监听对应的端口，可以用netstat -tulpn | grep 3000检查。
• 如果测试curl返回的是渲染好的页面，但Googlebot还是看到原始内容，可能是Google还没重新抓取你的页面，可以用Google Search Console提交重新抓取请求。

内容的提问来源于stack exchange，提问作者Ke Vin