如何使用 `jinty/prerender-cloudfront`: 集成 Prerender.io 于 AWS CloudFront 完全指南

如何使用 jinty/prerender-cloudfront: 集成 Prerender.io 于 AWS CloudFront 完全指南

prerender-cloudfrontprerender.io cloudfront example middleware项目地址:https://gitcode.com/gh_mirrors/pr/prerender-cloudfront

---

1. 项目介绍

jinty/prerender-cloudfront 是一个示例项目，旨在展示如何在基于 AWS S3 存储的单页应用程序(SPA)上通过 CloudFront 实现 Prerender.io 的预渲染功能。通过这种方式，您可以优化搜索引擎和其他网络爬虫对您网站内容的索引，因为它们通常不执行JavaScript来呈现SPA的内容。本项目利用AWS Lambda@Edge，以简洁的方式处理请求路由，确保正确地将爬虫请求导向Prerender.io服务，同时保持其他流量的CloudFront缓存效率。

2. 快速启动

要迅速搭建并运行这个项目，遵循以下步骤：

步骤一：配置 AWS CloudFormation

1. 克隆项目: 使用Git从此链接克隆仓库。

   git clone https://github.com/jinty/prerender-cloudfront.git
   

2. 部署 CloudFormation 栈: 将prerender-cloudfront.yaml上传到您的AWS账户作为新的CloudFormation栈。记得在提示时输入您的Prerender.io令牌。

   aws cloudformation create-stack --stack-name MyPreRenderStack --template-body file://prerender-cloudfront.yaml --parameters ParameterKey=PrerenderToken,ParameterValue=YOUR_PRERENDER_TOKEN
   

步骤二：上传文件至S3

1. 上传代码: 将code.js 和 index.html 文件上传到由之前步骤创建的S3桶中。

2. 设置公有读权限，以允许外部访问这些文件。

步骤三：测试

验证配置是否成功：

• 预渲染页面: 使用特定的User-Agent模拟爬虫请求。

  curl -H 'User-Agent: Facebot' https://your-cloudfront-url/over/here
  

• 非预渲染版本 对比测试:

  curl https://your-cloudfront-url/over/here
  

3. 应用案例和最佳实践

当实施此解决方案时，务必注意以下几点：

• 缓存策略: 通过向CloudFront添加X-Prerender-Cachebuster自定义头，确保爬虫请求绕过缓存，而常规用户请求仍可享受高效缓存带来的加速。
• Lambda@Edge: 确保两个Lambda@Edge函数正确划分职责，即入口处识别爬虫并标记，以及之后检查并转发给Prerender.io。
• 性能监控: 监控Lambda@Edge的执行情况和CloudFront的缓存命中率，以优化性能。

4. 典型生态项目

虽然该项目专注于Prerender.io与AWS环境的集成，但在更广泛的生态系统中，可以结合其他服务如AWS Amplify、Serverless Framework或CircleCI实现自动化部署流程，进一步提升开发和运维效率。例如，可以使用Serverless Framework管理Lambda@Edge函数和CloudFormation资源的部署，或通过Amplify的工作流自动处理前端构建和部署到S3的过程。

---

本指南提供了一个清晰的路径来集成和利用jinty/prerender-cloudfront项目，帮助您改善SPA在搜索引擎中的可见性。在实践中不断调整和完善配置，以适应您的具体需求和环境。

prerender-cloudfrontprerender.io cloudfront example middleware项目地址:https://gitcode.com/gh_mirrors/pr/prerender-cloudfront