目标
通过 基于阿里云函数计算的云相册搭建指南,已经可以成功搭建基于阿里云函数计算的云相册,现在我们希望可以使用 CDN 对静态页面和图片等内容进行加速,使用户访问相册的时候更加流畅。
Tips:使用 CDN 加速的前提是用户有一个已备案的域名~,比如http://photo-gallery.mofangdegisn.cn
效果请访问 [Photo-Gallery Based on FC Compute II],用户名username
,密码password
方案设计
如图所示,此方案与不使用 CDN 的方案相比,主要有两点不同
- login 函数鉴权成功后,为用户返回的是 CDN 域名的链接
- 所有的静态页面和图片文件都缓存到 CDN 上
基于以上两点不同,代码实现上在 logAuth
函数和 build
函数与原方案略有区别,所以我们在原方案的基础上新创建两个函数,logAuthCDN
和 buildCDN
logAuthCDN
用于对用户输入的用户名密码的鉴权,并为通过鉴权的用户返回一个缓存到 CDN 上的静态页面的 URL;buildCDN
函数用于将OSS bucket/prosessed
目录下的照片生成相册页面,与build
函数的不同也是生成的页面里所有的链接都是使用CDN 的静态页面的 URL,buildCDN
函数生成的相册页面保存在oss Bucket/webCDN
目录下
搭建步骤
部署阶段
- 新建oss目录
首先,在 oss控制台 上相应 bucket 下新建两个目录,loginCDN
与webCDN
,其中loginCDN
用于存储登录页面对应的静态文件,webCDN
用于存储buildCDN
函数生成的静态页面,这个静态页面内部的图片链接都是使用 CDN 缓存的图片链接 - 下载并修改代码
下载 photo-gallery.zip,并在config.json
中添加配置信息。其中domainName
为自己的域名 CDN添加域名
设置 CDN 访问私有 oss bucket
- 设置 CDN 鉴权控制
前往CDN 控制台->域名管理->点击刚才你添加的域名->访问控制->修改配置->URL 鉴权配置->A 方式->主 Key 设置为你自己的key(注意,这个 key 需要和代码中logAuthCDN.js
与buildCDN.js
的key保持一致)
(使用 CDN 的各种鉴权方式及其他具体内容请参考 [鉴权配置]) - 通过 fcli 创建函数
- logAuthCDN 函数
- 安装依赖:进入loginCDN目录下,使用命令
npm install
安装依赖包 - 创建函数:
mkf logAuthCDN -t nodejs6 -h loginCDN/logAuthCDN.handler -d gallery
- 通过 API 网关触发 logAuthCDN 鉴权函数:与
logAuth
的API 网关配置一致,只是将后台函数计算的函数改成logAuthCDN
而已,然后将API网关信息写入config.json
- 安装依赖:进入loginCDN目录下,使用命令
- uploadLoginPageCDN 函数
- 创建函数:
mkf uploadLoginPageCDN -t nodejs6 -h loginCDN/uploadLoginPageCDN.uploadLoginPageCDN -d gallery
- 创建函数:
- buildCDN函数
- 安装依赖:进入
site-builder-cdn
目录下,使用命令npm install
安装依赖包 - 创建函数:
upf buildCDN -t nodejs6 -h site-builder-cdn/index.build -d gallery
- 创建触发器:
- 安装依赖:进入
- logAuthCDN 函数
测试阶段
获取 oss bucket loginCDN 目录下的 index.html 页面的链接,这是整个相册的登录页面,输入正确 or 错误用户名密码,就可以跳转到相册页面啦,可以发现相册页面的 url 都是以你的域名开头的,可以看出此页面是通过 CDN 加速的~
参考文献
CDN官方文档
[CDN鉴权配置]
That's all,enjoy it~ Any question,可留言,或加入函数计算官方客户群(钉钉群号:11721331)