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

本文涉及的产品
函数计算FC,每月15万CU 3个月
Serverless 应用引擎免费试用套餐包,4320000 CU,有效期3个月
简介: 我们希望可以使用 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
  6. 通过 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)

相关实践学习
Serverless极速搭建Hexo博客
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
相关文章
|
域名解析 网络协议 对象存储
阿里云 CDN 控制台演示:源站加速|学习笔记
快速学习阿里云 CDN 控制台演示:源站加速
阿里云 CDN 控制台演示:源站加速|学习笔记
|
3月前
|
安全 CDN
阿里云CDN产品解读及全站加速在游戏行业的最佳实践!
阿里云CDN(内容分发网络)为全球用户提供快速、稳定、安全的内容分发加速服务,显著提升访问响应速度和成功率
|
7月前
|
关系型数据库 Serverless 分布式数据库
PolarDB PostgreSQL版Serverless功能上线公测啦,公测期间免费使用!
Serverless数据库能够使得数据库集群资源随客户业务负载动态弹性扩缩,将客户从复杂的业务资源评估和运维工作中解放出来。PolarDB PostgreSQL版 Serverless提供了CPU、内存、存储、网络资源的实时弹性能力,构建计算与存储分离架构下的 PolarDB PostgreSQL版产品新形态。
|
5月前
|
人工智能 前端开发 搜索推荐
详解基于百炼平台及函数计算快速上线网页AI助手
通过阿里云百炼平台,企业可在10分钟内为其网站添加智能客服系统,提升用户体验并降低成本。流程包括:创建大模型应用、配置参数(如温度系数以控制回复的随机性)、发布应用获取API密钥;使用函数计算快速搭建示例网站,并通过简单的代码更改启用AI助手功能;还可导入私有知识库增强助手的能力。前端基于NLUX开发,支持定制化需求如样式调整和历史会话管理。服务端代码提供了调用大模型获取答案的接口。借助百炼平台,企业能迅速部署即时且个性化的在线服务,适应数字化转型的需求。
|
6月前
|
运维 Serverless 应用服务中间件
Serverless 应用引擎产品使用合集之CDN如何配置IP限制
阿里云Serverless 应用引擎(SAE)提供了完整的微服务应用生命周期管理能力,包括应用部署、服务治理、开发运维、资源管理等功能,并通过扩展功能支持多环境管理、API Gateway、事件驱动等高级应用场景,帮助企业快速构建、部署、运维和扩展微服务架构,实现Serverless化的应用部署与运维模式。以下是对SAE产品使用合集的概述,包括应用管理、服务治理、开发运维、资源管理等方面。
|
7月前
|
JavaScript 前端开发 Cloud Native
报名开启!2024 开源之夏丨Serverless Devs 课题已上线!
2024 年,Serverless Devs 再次加入中国科学院软件研究所开源软件供应链点亮计划支持下的系列高校开源活动——开源之夏 2024。
|
6月前
|
弹性计算 Serverless API
Serverless 应用引擎产品使用合集之如何设置静态资源的CDN
阿里云Serverless 应用引擎(SAE)提供了完整的微服务应用生命周期管理能力,包括应用部署、服务治理、开发运维、资源管理等功能,并通过扩展功能支持多环境管理、API Gateway、事件驱动等高级应用场景,帮助企业快速构建、部署、运维和扩展微服务架构,实现Serverless化的应用部署与运维模式。以下是对SAE产品使用合集的概述,包括应用管理、服务治理、开发运维、资源管理等方面。
|
7月前
|
运维 Serverless 对象存储
Serverless 应用引擎产品使用之阿里函数计算中X-Fc 影响到 CDN 的功能和性能如何解决
阿里云Serverless 应用引擎(SAE)提供了完整的微服务应用生命周期管理能力,包括应用部署、服务治理、开发运维、资源管理等功能,并通过扩展功能支持多环境管理、API Gateway、事件驱动等高级应用场景,帮助企业快速构建、部署、运维和扩展微服务架构,实现Serverless化的应用部署与运维模式。以下是对SAE产品使用合集的概述,包括应用管理、服务治理、开发运维、资源管理等方面。
|
人工智能 弹性计算 运维
阿里云宣布 Serverless 应用引擎 SAE2.0 将公测上线,多款产品全新升级
阿里云宣布 Serverless 应用引擎 SAE2.0 将公测上线,多款产品全新升级
70432 53
|
弹性计算 人工智能 运维
阿里云宣布 Serverless 应用引擎SAE2.0 将公测上线
7月31日,阿里云智能云原生应用平台负责人丁宇宣布,Serverless 应用引擎 SAE2.0 将于8月7日公测上线,开源版将于9月30日发布。本次升级围绕极简体验、标准开放、极致弹性三大优势展开,应用冷启动全面提效,支持缩容到 0,应用成本下降 40% 以上。
阿里云宣布 Serverless 应用引擎SAE2.0 将公测上线

热门文章

最新文章

相关产品

  • 函数计算