Prerender-Cloudfront 项目使用教程

Prerender-Cloudfront 项目使用教程

1. 项目的目录结构及介绍

prerender-cloudfront/
├── CHANGELOG.md
├── LICENSE
├── README.md
├── code.js
├── index.html
├── prerender-cloudfront.yaml
└── testimage.png

• CHANGELOG.md: 记录项目的更新日志。
• LICENSE: 项目的开源许可证，本项目使用 MIT 许可证。
• README.md: 项目的介绍文档，包含项目的使用说明和基本信息。
• code.js: 项目的核心代码文件，包含 Lambda@Edge 函数的实现。
• index.html: 项目的示例 HTML 文件，用于展示预渲染效果。
• prerender-cloudfront.yaml: CloudFormation 模板文件，用于自动化部署项目。
• testimage.png: 测试图片文件，用于项目的演示。

2. 项目的启动文件介绍

项目的启动文件主要是 code.js 和 index.html。

code.js

code.js 是项目的核心代码文件，包含了两个 Lambda@Edge 函数的实现：

1. Viewer Request 函数: 用于检测进入系统的请求是否来自爬虫，并设置一个用于缓存分区的头部。
2. Origin Response 函数: 在缓存之后运行，检测头部是否存在，如果存在则将请求路由到 Prerender.io。

index.html

index.html 是项目的示例 HTML 文件，用于展示预渲染效果。在部署项目后，可以通过访问该文件来测试预渲染功能。

3. 项目的配置文件介绍

项目的配置文件主要是 prerender-cloudfront.yaml。

prerender-cloudfront.yaml

prerender-cloudfront.yaml 是一个 CloudFormation 模板文件，用于自动化部署项目。该文件定义了以下内容：

• S3 存储桶: 用于存储项目的静态资源。
• CloudFront 分布: 用于分发静态资源，并配置 Lambda@Edge 函数。
• Lambda@Edge 函数: 定义了两个 Lambda@Edge 函数，分别用于 Viewer Request 和 Origin Response。

通过上传该文件到 CloudFormation，可以自动创建所需的 AWS 资源，并配置预渲染功能。

使用说明

1. 上传 CloudFormation 模板: 将 prerender-cloudfront.yaml 上传到 CloudFormation 作为新堆栈。
2. 输入 Prerender.io 令牌: 在创建堆栈时，输入您的 Prerender.io 令牌。
3. 上传静态资源: 将 code.js 和 index.html 上传到由 CloudFormation 创建的 S3 存储桶中，并将其读权限设置为公开。
4. 测试预渲染: 使用以下命令测试预渲染效果：

   curl -H 'User-Agent: Facebot' https://$[CLOUDFRONT_DOMAIN]/over/here
   

   同样，可以使用以下命令测试未预渲染的页面：

   curl https://$[CLOUDFRONT_DOMAIN]/over/here
   

通过以上步骤，您可以成功部署并测试 Prerender-Cloudfront 项目。