I have been trying to connect my Vue.js application to Prerender.io so that the SEO bots can crawl and index my pages. I uploaded the sitemap for my website and created an integration with Caddy that is based on the nginx integration. When I run a test of my integration, in chrome, I get a 404 not found error.
here is my code from the integration that I produced.
mywebsite.com {
@prerender {
header_regexp User-Agent "(bot|googlebot|yahoo!\ slurp|bingbot|yandex|baiduspider|facebookexternalhit|twitterbot|rogerbot|linkedinbot|embedly|quora\ link\ preview|showyoubot|outbrain|pinterest\/0\.|developers.google.com\/\+\/web\/snippet|slackbot|vkshare|w3c_validator|redditbot|applebot|whatsapp|flipboard|tumblr|bitlybot|skypeuripreview|nuzzel|discordbot|google\ page\ speed|qwantify|pinterestbot|bitrix\ link\ preview|xing-contenttabreceiver|chrome-lighthouse|telegrambot|google-inspectiontool|petalbot)"
not path_regexp filetypes /\.(js|css|xml|less|png|jpg|jpeg|gif|pdf|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|woff2|svg|eot)$/
}
reverse_proxy @prerender https://service.prerender.io {
header_up X-Prerender-Token "Prerender-Token-Here"
header_down Cache-Control "private,max-age=600,must-revalidate"
}
reverse_proxy /api* :3000
@notAPI {
not {
path /api*
}
file {
try_files {path} {path}/ /index.html
}
}
rewrite @notAPI {http.matchers.file.relative}
root * path/to/prod
file_server {
precompressed zstd br gzip
}
header Cache-Control "max-age=31536000"
}
Here is the nginx integration that I based the above off of:
# Change YOUR_TOKEN to your prerender token
# Change example.com (server_name) to your website url
# Change /path/to/your/root to the correct value
worker_processes 1;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
map $http_user_agent $prerender_ua {
default 0;
"~*Prerender" 0;
"~*googlebot" 1;
"~*yahoo!\ slurp" 1;
"~*bingbot" 1;
"~*yandex" 1;
"~*baiduspider" 1;
"~*facebookexternalhit" 1;
"~*twitterbot" 1;
"~*rogerbot" 1;
"~*linkedinbot" 1;
"~*embedly" 1;
"~*quora\ link\ preview" 1;
"~*showyoubot" 1;
"~*outbrain" 1;
"~*pinterest\/0\." 1;
"~*developers.google.com\/\+\/web\/snippet" 1;
"~*slackbot" 1;
"~*vkshare" 1;
"~*w3c_validator" 1;
"~*redditbot" 1;
"~*applebot" 1;
"~*whatsapp" 1;
"~*flipboard" 1;
"~*tumblr" 1;
"~*bitlybot" 1;
"~*skypeuripreview" 1;
"~*nuzzel" 1;
"~*discordbot" 1;
"~*google\ page\ speed" 1;
"~*qwantify" 1;
"~*pinterestbot" 1;
"~*bitrix\ link\ preview" 1;
"~*xing-contenttabreceiver" 1;
"~*chrome-lighthouse" 1;
"~*telegrambot" 1;
"~*google-inspectiontool" 1;
"~*petalbot" 1;
}
map $args $prerender_args {
default $prerender_ua;
"~(^|&)_escaped_fragment_=" 1;
}
map $http_x_prerender $x_prerender {
default $prerender_args;
"1" 0;
}
map $uri $prerender {
default $x_prerender;
"~*\.(js|css|xml|less|png|jpg|jpeg|gif|pdf|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|woff2|svg|eot)" 0;
}
server {
listen 80;
server_name example.com;
root /path/to/your/root;
location / {
if ($prerender = 1) {
rewrite (.*) /prerenderio last;
}
try_files $uri /index.html = 404;
}
location /prerenderio {
if ($prerender = 0) {
return 404;
}
proxy_set_header X-Prerender-Token YOUR_TOKEN;
proxy_hide_header Cache-Control;
add_header Cache-Control "private,max-age=600,must-revalidate";
#resolve using Google's DNS server to force DNS resolution and prevent caching of IPs
resolver 8.8.8.8 8.8.4.4;
set $prerender_host "service.prerender.io";
proxy_pass https://$prerender_host;
rewrite .* /$scheme://$host$request_uri? break;
}
}
}
When I run the test on Chrome using the User Agent changer under the Network conditions tab, I get a Not Found 404 error. What I should receive is the prerendered page sent from prerender.io.
When I contacted Prerender.io support and they said they can't help me since they don't have an official maintained middleware integration with Caddy. Please help!