如何为 Phoenix 应用程序设置 Prerender

Question

我们在 localhost:3000 上运行预渲染，我们的 Web 应用程序在 localhost:39499 上运行。我们站点的问题是 Google 在我们的 Phoenix 应用程序中无法看到 Angular.js 中的 javascript 即运行。我们的问题是 Pheonix 在 nginx 中运行一个从域名到它在本地主机上的端口的代理，这阻止我们也运行 nginx 上的代理到服务器上托管 Prerender 的端口。我们希望 nginx 有一个嵌套的代理设置，所以我们转到端口 39499，然后如果可能的话转到端口 3000。有没有办法在同时提供两种服务的服务器上执行此操作运行?

这是启用站点的 nginx 配置文件：

# -*- mode: nginx -*-
upstream broad_highway {
    server 127.0.0.1:39499;
}

server {
    if ($host = meetings.aahmbny.org) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


    listen 80;
    listen [::]:80;
    server_name meetings.aahmbny.org;

    location / {
        return 301 https://meetings.aahmbny.org$request_uri;
    }

    # for LetsEncrypt
    location '/.well-known/acme-challenge' {
        default_type "text/plain";
        root /tmp/letsencrypt-auto;
    }


}

server {
    listen 80;
    listen [::]:80;
    server_name beta.meetings.aahmbny.org;

    location / {
        return 301 https://beta.meetings.aahmbny.org$request_uri;
    }

    # for LetsEncrypt
    location '/.well-known/acme-challenge' {
        default_type "text/plain";
        root /tmp/letsencrypt-auto;
    }
}

server {
    listen 443 ssl;
    listen [::]:443 ssl;
    server_name meetings.aahmbny.org;
    gzip on;
    gzip_proxied any;
    ssl_certificate /etc/letsencrypt/live/meetings.aahmbny.org/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/meetings.aahmbny.org/privkey.pem; # managed by Certbot
    ssl_trusted_certificate /etc/letsencrypt/live/meetings.aahmbny.org/fullchain.pem;

    add_header X-Frame-Options DENY;
    add_header X-Content-Type-Options nosniff;

    location = /index.html {
        rewrite  ^ / permanent;
        try_files /index.html =404;
    }

    location / {
        try_files $uri @proxy;
    }

    location /sitemaps {
        alias /home/broad-highway/sitemaps/;
    }

    location @proxy {
        proxy_redirect off;
        proxy_pass http://broad_highway;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host localhost:3000$http_host;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }

    access_log /var/log/nginx/broad-highway-access.log;
    error_log /var/log/nginx/broad-highway-error.log;

}

server {
    listen 443 ssl;
    listen [::]:443 ssl;
    server_name beta.meetings.aahmbny.org;
    gzip on;
    gzip_proxied any;
    ssl_certificate /etc/letsencrypt/live/beta.meetings.aahmbny.org/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/beta.meetings.aahmbny.org/privkey.pem;
    ssl_trusted_certificate /etc/letsencrypt/live/beta.meetings.aahmbny.org/fullchain.pem;

    add_header X-Frame-Options DENY;
    add_header X-Content-Type-Options nosniff;

    location / {
        try_files $uri @proxy;
    }

    location /sitemaps {
        alias /home/broad-highway/sitemaps/;
    }

    location @proxy {
        proxy_redirect off;
        proxy_pass http://broad_highway;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }

    access_log /var/log/nginx/broad-highway-access.log;
    error_log /var/log/nginx/broad-highway-error.log;
}

Answer 1

您可以尝试这样的操作，以便 proxy_pass 到您的爬虫预呈现服务器或 proxy_pass 到您的用户的普通服务器：

location @proxy {
    proxy_redirect off;

    proxy_set_header X-Prerender-Token YOUR_TOKEN;

    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 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 "service.prerender.io";
        rewrite .* /$scheme://$host$request_uri? break;
        proxy_pass http://$prerender;
    }

    proxy_pass http://broad_highway;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host localhost:3000$http_host;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
}

如何为 Phoenix 应用程序设置 Prerender

How to Setup Prerender for a Phoenix Application

nginx

elixir

prerender

phoenix-framework

angular