nginx - 将 prerender.io 与我现有的 nginx 配置一起使用
问题描述
我正在尝试为 google 实现动态渲染。
我在 Laravel Forge 上有一台服务器用于服务 Nuxt.js 应用程序,我想使用 prerender.io
Prerender.io 提供了一个 nginx 配置来使用,但我当前的配置似乎与它有很大不同。我没有任何经验,所以如果有人可以提供帮助,我会寻求帮助。
这是我当前的 nginx 配置
# FORGE CONFIG (DO NOT REMOVE!)
include forge-conf/beta.example.com/before/*;
map $sent_http_content_type $expires {
"text/html" epoch;
"text/html; charset=utf-8" epoch;
default off;
}
server {
listen 443 ssl http2;
listen [::]:443 ssl http2;
server_name beta.example.com;
root /home/forge/beta.example.com/dist;
# FORGE SSL (DO NOT REMOVE!)
ssl_certificate /etc/nginx/ssl/beta.example.com/50331/server.crt;
ssl_certificate_key /etc/nginx/ssl/beta.example.com/50331/server.key;
ssl_protocols TLSv1.2;
ssl_ciphers ECDHE-RSA-AES256-GCM-SHA512:DHE-RSA-AES256-GCM-SHA512:ECDHE-RSA-AES256-GCM-SHA384:DHE-RSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-SHA384;
ssl_prefer_server_ciphers on;
ssl_dhparam /etc/nginx/dhparams.pem;
add_header X-Frame-Options "SAMEORIGIN";
add_header X-XSS-Protection "1; mode=block";
add_header X-Content-Type-Options "nosniff";
charset utf-8;
gzip on;
gzip_types text/plain application/xml text/css application/javascript;
gzip_min_length 1000;
# FORGE CONFIG (DO NOT REMOVE!)
include forge-conf/beta.example.com/server/*;
location / {
expires $expires;
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_read_timeout 1m;
proxy_connect_timeout 1m;
proxy_pass http://127.0.0.1:3000; # set the adress of the Node.js
}
access_log off;
error_log /var/log/nginx/beta.example.com-error.log error;
location ~ /\.(?!well-known).* {
deny all;
}
}
# FORGE CONFIG (DO NOT REMOVE!)
include forge-conf/beta.example.com/after/*;
这就是它的样子 https://gist.github.com/thoop/8165802
我的主要问题基本上是当前location /
块会发生什么。
解决方案
你有两种方法来实现你的目标:
- Nuxt.js 有自己的预渲染解决方案。你可以在这里找到它。
- 如果你仍然想使用 prerender.io,这里有一个例子:
我看到你的 Nginx 正在将所有流量代理到http://127.0.0.1:3000
,这大概是用 Node.js 编写的后端。因此,您可以直接更新您的location /
块以使用 prerender.io 来捕获所有内容。
...
location / {
proxy_set_header X-Prerender-Token YOUR_TOKEN;
set $prerender 0;
if ($http_user_agent ~* "googlebot|bingbot|yandex|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;
}
try_files @backend;
}
location @backend {
expires $expires;
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_read_timeout 1m;
proxy_connect_timeout 1m;
proxy_pass http://127.0.0.1:3000; # set the adress of the Node.js
}
...
推荐阅读
- pari - PARI/GP 中的位数
- reactjs - 在带有 react-router 的 React 中,如何在离开复杂视图时保留一个人的所有视图选择,然后直接返回?
- git - 从本地分支推送到上游分支
- javascript - 使用 i18n 的参数中的日期
- html - 如何从居中的导航栏徽标中删除边距以给链接更多空间
- sqlite - 访问 Akavache DatabasePath 值
- node.js - 为什么不是所有值都存储在 mongodb 中?
- c++ - IDsObjectPicker 在最新的 Windows 10 更新上失败
- angular - 文件上传/下载时显示和隐藏 Spinner
- asp.net - 如何绑定包含表单的视图和部分视图,我需要在主视图中访问