开发者社区> cici是夏莞> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

10分钟上线-基于函数计算的云相册搭建指南II --使用 CDN 对静态文件加速

简介: 我们希望可以使用 CDN 对静态页面和图片等内容进行加速,使用户访问相册的时候更加流畅。
+关注继续查看

目标

通过 基于阿里云函数计算的云相册搭建指南,已经可以成功搭建基于阿里云函数计算的云相册,现在我们希望可以使用 CDN 对静态页面和图片等内容进行加速,使用户访问相册的时候更加流畅。
Tips:使用 CDN 加速的前提是用户有一个已备案的域名~,比如http://photo-gallery.mofangdegisn.cn
效果请访问 Photo-Gallery Based on FC Compute II,用户名username,密码password

方案设计

使用CDN加速的photo-gallery

如图所示,此方案与不使用 CDN 的方案相比,主要有两点不同

  • login 函数鉴权成功后,为用户返回的是 CDN 域名的链接
  • 所有的静态页面和图片文件都缓存到 CDN 上

基于以上两点不同,代码实现上在 logAuth 函数和 build 函数与原方案略有区别,所以我们在原方案的基础上新创建两个函数,logAuthCDNbuildCDN

  • logAuthCDN 用于对用户输入的用户名密码的鉴权,并为通过鉴权的用户返回一个缓存到 CDN 上的静态页面的 URL;
  • buildCDN 函数用于将 OSS bucket/prosessed 目录下的照片生成相册页面,与 build 函数的不同也是生成的页面里所有的链接都是使用CDN 的静态页面的 URL,buildCDN 函数生成的相册页面保存在 oss Bucket/webCDN 目录下

搭建步骤

部署阶段

  1. 新建oss目录
    首先,在 oss控制台 上相应 bucket 下新建两个目录,loginCDNwebCDN,其中loginCDN 用于存储登录页面对应的静态文件,webCDN 用于存储buildCDN 函数生成的静态页面,这个静态页面内部的图片链接都是使用 CDN 缓存的图片链接
  2. 下载并修改代码
    下载 photo-gallery.zip,并在 config.json 中添加配置信息。其中 domainName 为自己的域名
  3. CDN添加域名

  4. 设置 CDN 访问私有 oss bucket
    私有 bucket 回源设置
  5. 设置 CDN 鉴权控制
    前往CDN 控制台->域名管理->点击刚才你添加的域名->访问控制->修改配置->URL 鉴权配置->A 方式->主 Key 设置为你自己的key(注意,这个 key 需要和代码中 logAuthCDN.jsbuildCDN.js 的key保持一致)

(使用 CDN 的各种鉴权方式及其他具体内容请参考 鉴权配置
CDN鉴权设置图1
CDN鉴权设置图II

  1. 通过 fcli 创建函数

    • logAuthCDN 函数

      • 安装依赖:进入loginCDN目录下,使用命令npm install安装依赖包
      • 创建函数:mkf logAuthCDN -t nodejs6 -h loginCDN/logAuthCDN.handler -d gallery
      • 通过 API 网关触发 logAuthCDN 鉴权函数:与 logAuth 的API 网关配置一致,只是将后台函数计算的函数改成 logAuthCDN 而已,然后将API网关信息写入config.json
    • 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`
      • 创建触发器:
        buildCDNTrigger触发器创建

测试阶段

获取 oss bucket loginCDN 目录下的 index.html 页面的链接,这是整个相册的登录页面,输入正确 or 错误用户名密码,就可以跳转到相册页面啦,可以发现相册页面的 url 都是以你的域名开头的,可以看出此页面是通过 CDN 加速的~

参考文献

CDN官方文档
CDN鉴权配置

That's all,enjoy it~ Any question,可留言,或加入函数计算官方客户群(钉钉群号:11721331)

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Hadoop集群搭建记录 | 云计算[CentOS7] | 伪分布式集群 Java环境配置(Oracle JDK)
写在前面 step1. 下载jdk step2. 删除原有的open jdk step3. 解压当前jdk的rpm包 step4. 配置环境变量 step5. 查看是否成功 step6. 其余节点设置
21 0
这些知识点你都了解了吗?#云安全CCSK-M4:云计算的数据安全
内容概述:云计算中的数据安全。云安全中最大的问题之一是数据保护。该模块涵盖了云的信息生命周期管理以及如何应用安全控制,重点关注公共云。主题包括数据安全生命周期、云存储模型、不同交付模型的数据安全问题以及管理云中的加密,包括客户托管的密码(BYOK)。
428 0
cdb 数据库搭建dataguard
cdb dataguard,cdb搭建dataguard,12c,18c
1405 0
使用ASP.NET WEB API构建基于REST风格的服务实战系列教程(一)——使用EF6构建数据库及模型
原文:使用ASP.NET WEB API构建基于REST风格的服务实战系列教程(一)——使用EF6构建数据库及模型 系列导航地址http://www.cnblogs.com/fzrain/p/3490137.html 使用Entity Framework Code First模式构建数据库对象 已经决定使用EF CodeFirst来创建数据库了,因此我们使用POCO类(“Plain Old CLR Objects)来定义我们的Model。
844 0
DIV+CSS虚线边框|CSS虚线下划线及虚线列表教程
DIV CSS虚线教程篇包括讲解常常出现的各种样式的DIV虚线案例CSS教程。 本节为大家介绍常见的CSS 虚线及DIV教程。CSS虚线下划线、列表虚线统统搞定。 目录 CSS虚线边框 CSS超链接虚线下划线 列表型CSS虚线下划线 CSS定义一条水平虚线 1、CSS边框虚线 - TOP 这里通过边框属性的虚线边框border控制虚线。
1621 0
+关注
cici是夏莞
函数计算开发工程师
16
文章
3
问答
来源圈子
更多
专注 Serverless、微服务、函数计算、Serverless 应用引擎、云原生技术
+ 订阅
相关文档: Serverless应用引擎SAE 函数计算FC
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载