基于阿里云函数计算的云相册搭建指南

本文涉及的产品
Serverless 应用引擎 SAE,800核*时 1600GiB*时
函数计算FC,每月15万CU 3个月
简介: 基于阿里云函数计算的云相册搭建指南 目标 我们的终极目标是搭建一个私人云相册,相册的拥有者可以上传图片,生成相册,相册拥有者的小伙伴通过用户名密码登录,访问相册,查看图片。效果请访问Photo-Gallery Based on FC Compute,用户名username,密码password 方案设计 我想构建一个私人云相册,但却不想关心运行、维护服务器等底层琐碎的事情,那用阿里云函数计算再合适不过了。

基于阿里云函数计算的云相册搭建指南

目标

我们的终极目标是搭建一个私人云相册,相册的拥有者可以上传图片,生成相册,相册拥有者的小伙伴通过用户名密码登录,访问相册,查看图片。
效果请访问Photo-Gallery Based on FC Compute,用户名username,密码password

方案设计

我想构建一个私人云相册,但却不想关心运行、维护服务器等底层琐碎的事情,那用阿里云函数计算再合适不过了。函数计算使用户无需管理服务器等基础设施,只需编写代码并上传就可以快速构建任何类型的应用和服务,无需管理和运维。函数计算会为用户准备好计算资源,以弹性、可靠的方式运行代码,并提供日志查询,性能监控,报警等功能。

博主对比了函数计算和传统方式搭建服务的差异,如图所示。

Item 函数计算FC 传统方式搭建服务
维护成本 维护成本低,无需管理服务器等基础设施,只需编写代码并上传,程序员从底层设备维护中解放出来,只考虑实际业务逻辑即可。 维护成本高,自行维护服务器,需要处理服务器宕机、服务器扩容等一系列底层琐碎的事情
可用性 可用性高,函数计算为用户准备弹性、可靠的计算资源 服务器故障会对应用服务产生严重影响
费用 按需付费,只为实际使用的计算资源付费,代码未运行则不产生费用 需要支付服务器的费用,代码运行与否都要收费

架构设计

image

主要部分

  • 登录入口:是存储在OSS Bucket/login目录下的一个静态登录页面,用户在这里输入用户名密码,确认登录后会通过API网关触发函数计算的鉴权函数logAuth
  • uploadLoginPage函数:用于上传静态登录页面,只在初始化阶段运行一次
  • API网关:用于触发后台鉴权函数logAuth
  • logAuth函数:通过API网关获取用户在登录页面输入的用户名密码,并与表格存储(OTS)中存储的用户名密码进行比对,实现鉴权功能
  • OSS Bucket photo-gallery/source:对象存储(OSS)中的photo-gallery用于存储整个云相册的文件,其中source目录存储用户上传的图片原文件
  • resize函数:OSS Bucket photo-gallery/source触发,对用户上传的原图片进行resize,并将resize后的图片存储到OSS Bucket photo-galleryprocessed目录下,即当photo-gallery/source有图片存入时,会触发resize函数
    (事件触发是函数计算提供的一种机制)
  • OSS Bucket photo-gallery/processed:用于存储裁剪后的图片
  • build函数:OSS Bucket photo-gallery/processed事件触发,将OSS Bucket photo-gallery/processed中的图片构造成html页面,生成美丽的相册页面,并将静态文件存储到OSS Bucket photo-gallery/web
  • Time trigger:由于oss图片及网页的访问权限是private的,那么用户认证成功后跳转到的链接是带有时间戳的oss的链接,当前时间大于时间戳的时间时,此页面会过期。为了防止用户看到过期的页面,我们采取的方式是1. 后台每2h定时触发build函数,生成新的相册页面存储到OSS bucketweb目录下,相册页面的有效期是8h;2. 同时前端会检测当前页面是否过期,页面距离过期还有半小时时弹出“页面已过期,请重新登录”的提醒,确定后弹出登录页面,重新登录,此时用户就可以看到函数定时触发新生成的页面。采用此种方法有效避免用户看到不友好的过期页面。

用户访问过程

  • 用户在登录页面,输入用户名、密码,点击登录时,发送post请求到API网关,API网关触发logAuth鉴权函数,logAuth函数通过比对用户输入的用户名和密码与OTS中存储的用户名密码来对用户进行鉴权,如果是合法用户,即返回OSS中带有Signature的URL
  • 合法用户通过logAuth函数返回的URL访问OSS中存储的静态页面,就可以看到美丽的相册啦;非法用户无法得到返回的URL,会继续停留在登录页面

图片存储过程

  • 管理员将图片存储到OSS Bucket photo-gallerysource目录下,通过设置函数计算的触发器(函数计算触发器参考文档),source目录下一旦有数据上传会触发resize函数,对原图片进行裁剪,并将裁剪结果存入到OSS Bucket photo-galleryprocessed
  • 同理,OSS Bucket photo-galleryprocessed目录一旦有数据上传,会触发build函数,将OSS Bucket photo-gallery/processed中的图片构建成静态页面,并将结果存储到OSS Bucket photo-gallery/web

搭建过程

准备阶段

Attention::所使用的一起阿里云服务最好建在同一区域,避免带来不必要的问题

  1. 开通服务
    分别去阿里云相应服务的主页开通以下几种服务函数计算OSSSLSOTSAPI网关RAM控制台的服务(如果已开通相应服务,请跳过这步)
  2. 新建子账户
    RAM控制台新建一个子账户,用户管理-新建用户,存下对应的AccessKeyAccessSecret。并对此用户授予相关权限,主要包括AliyunOSSFullAccessAliyunRAMFullAccessAliyunOTSFullAccessAliyunLogFullAccessAliyunFCFullAccess(RAM相关文档请参考RAM官方文档
  3. 新建OSS Bucket
    OSS控制台新建一个bucket,博主的bucket名字是photo-gallery,由于bucket name不可重复,所以你们要取其他未被占用的名字哈,然后新建四个目录,分别为sourceprocessedweblogin,其中processed目录下有两个目录fullsthumbs,这是出于相册的页面显示的需要,分别为大图和缩略图(OSS相关操作请参考[OSS官方文档]
  4. 新建OTS Instance
    OTS控制台新建一个实例instance(个人理解OTS的实例就是MySQL中的database的概念),在这个实例里新建一个数据表userTable(数据表就是MySQL中的table),数据表是用于存储访问控制的用户名username和密码password,主键是username。记录下instanceNametableName,然后下载OTS的客户端工具,向数据表中写入合规的用户名和密码(OTS相关操作请参考OTS官方文档

image
image

  1. 新建SLS Project
    SLS控制台新建一个Log ProjectLogstore,新建完成后,点击相应logstore查询,右上角开启索引(SLS相关操作请参考SLS官方文档

image

部署阶段

  1. 新建FC Service
    函数计算控制台新建一个服务photo-gallery,开启高级角色,这里新建一个角色,并去RAM控制台角色管理->授权 为此角色授权,主要包括AliyunOSSFullAccessAliyunOTSReadOnlyAccess

image
image

  1. 在本地配置fcli(已配置过fcli的用户请跳过此步骤)

    • 下载fcli安装包
    • 在fcli目录下,./fcli shell进入shell模式完成初始配置,详细信息参见fcli。Tips:其中access key idaccess key secret就是第2步创建的用户的AccessKey和AccessSecret
      详情请参照授权函数计算日志库写权限
  2. 通过fcli创建logAuth函数并创建API
    详情请参考函数计算使用示例

    • 首先需要下载并解压相应代码 ,并将config.json文件中的配置改成自己的配置,按照示例和提示写就可以,其中logAuthApiUrl先不写,它代表的是通过API网关触发logAuth函数时的API网关地址。config.jsondomainName以后是使用CDN缓存静态文件的配置信息,也先不填写。
    • 在fcli中进入你创建的Service,即cd your-service
    • 创建logAuth函数:

      • 创建函数mkf logAuth -t nodejs6 -h login/logAuth.handler -d code(code为code文件夹相对于fcli的可执行文件的位置)
    • 通过API网关触发logAuth鉴权函数
      API网关触发函数计算详情请参考以函数计算作为 API 网关后端服务API网关+函数计算实践

      • 创建API分组:在API网关控制台,分组管理->创建分组,新建API分组,会得到一个二级域名,记录下来
      • 创建API:API列表->创建API,后端服务信息选择函数计算,选择对应your-service的服务中的logAuth函数,然后发布线上
      • API创建完毕以后,填写config.json中的logAuthApiUrl,为API分组的二级域名/请求path的形式,例如博主的是http://922d3366e8d2421abe962408d613b800-cn-shanghai.alicloudapi.com/login
        image

image
image
image
image
image

  1. 创建其他函数
  • uploadLoginPageCDN函数:

    • fcli上执行:mkf uploadLoginPage -t nodejs6 -h login/uploadLoginPage.uploadLoginPage -d code
  • resize函数:

    • mkf resize -t nodejs6 -h resize/resize.resize -d code -m 512
    • 创建触发器:去函数计算控制台,点击resize函数->触发器->创建触发器,如果提示需要授权,则点击授权
      image
  • build函数(与resize函数类似):

    • 创建函数:mkf build -t nodejs6 -h site-builder/index.build -d code
    • 创建触发器:
      image

10.添加time trigger
为build函数添加定时触发的time trigger。如图所示
image
,其中触发消息即为oss的event(可以在代码执行->触发事件中编辑后粘贴过来)。(time trigger添加可参考定时触发函数

测试阶段

函数测试

  1. 测试uploadLoginPage函数
    执行uploadLoginPage函数,看OSS bucketlogin目录下是否有文件上传
  2. 测试resize函数
    设置触发事件为oss模板,并将模板内的id和bucketName都改成自己的,执行函数
  3. 测试build函数
    触发事件不变,执行函数
  4. 测试logAuth函数
    获取login目录下的index.html页面的链接,这是整个相册的登录页面,输入正确or错误用户名密码,看是否会跳转到相册页面

整体测试

  1. OSS bucket下的source目录下新建一个目录Album1,在Album1中上传or删除图片,查看processed/fullsprocessed/thumbs目录下是否有同名的文件上传or删除
  2. 查看web/homepageSite目录下的index.html文件是否更新
  3. 通过loginUrl登录页面,输入正确的用户名和密码,跳转到相册页面

其他问题

  1. Q:由于logAuth函数返回给合法用户的是带Signature的OSS文件链接,这个链接是有一定时效的,链接过期了之后用户再从登陆页面登陆岂不是看到一个过期页面,这怎么处理?

    A:这里采用后台CronTab触发+检测过期时间并强制重新登录的方式。设置链接过期时间为8h,CronTab每隔2小时触发一次build函数,使得用户在得到此链接后至少6个小时是有效的。并且有一个js文件负责检测当前页面是否即将过期,如果过期时间在0.5h以内,会弹出弹框提醒重新登录,用户重新登录会得到一个新的有效的链接。所以,此种方式,用户不会看到不友好的过期页面
  2. Q:向source目录下放文件可以触发整个函数运行,那删除文件可以吗?

    A:删除文件是否会触发函数运行取决于用户配置的触发器与函数代码本身,一方面触发器中要添加删除操作的触发事件,另一方面代码中要检测触发事件类型,并进行相应处理,本示例支持当`source`目录下删除文件时,`prosessed`目录下同时删除同名文件,并重新建立静态页面
    

参考文献

Building a serverless password-protected photo gallery
Animated login form
HTML5 site templates
函数计算官方文档
对象存储官方文档
API网关官方文档
表格存储官方文档
访问控制官方文档

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

相关实践学习
【文生图】一键部署Stable Diffusion基于函数计算
本实验教你如何在函数计算FC上从零开始部署Stable Diffusion来进行AI绘画创作,开启AIGC盲盒。函数计算提供一定的免费额度供用户使用。本实验答疑钉钉群:29290019867
建立 Serverless 思维
本课程包括: Serverless 应用引擎的概念, 为开发者带来的实际价值, 以及让您了解常见的 Serverless 架构模式
相关文章
|
19天前
|
人工智能 自然语言处理 Serverless
阿里云函数计算 x NVIDIA 加速企业 AI 应用落地
阿里云函数计算与 NVIDIA TensorRT/TensorRT-LLM 展开合作,通过结合阿里云的无缝计算体验和 NVIDIA 的高性能推理库,开发者能够以更低的成本、更高的效率完成复杂的 AI 任务,加速技术落地和应用创新。
|
1月前
|
存储 人工智能 运维
正式收官!阿里云函数计算携手优酷,用 AI 重塑影视 IP 创新边界
近日,阿里云联合优酷发起的 Create@影视 IP x AI 应用创新大赛,将网剧《少年白马醉春风》这一热门影视 IP 与阿里云 AI 技术相结合,由阿里云函数计算提供 AIGC 技术支持参赛者基于网剧《少年白马醉春风》IP 或“少年江湖”精神内核,用 AI 生成角色场景设计、手办设计、破次元合照、数字人等多样化的作品。
|
9天前
|
SQL 分布式计算 Serverless
阿里云 EMR Serverless Spark 版正式开启商业化
阿里云 EMR Serverless Spark 版正式开启商业化,内置 Fusion Engine,100% 兼容开源 Spark 编程接口,相比于开源 Spark 性能提升300%;提供 Notebook 及 SQL 开发、调试、发布、调度、监控诊断等一站式数据开发体验!
49 3
阿里云 EMR Serverless Spark 版正式开启商业化
|
6天前
|
人工智能 运维 大数据
阿里云“触手可及,函数计算玩转 AI 大模型”解决方案评测报告
阿里云“触手可及,函数计算玩转 AI 大模型”解决方案评测报告
18 1
|
1月前
|
Cloud Native 关系型数据库 Serverless
基于阿里云函数计算(FC)x 云原生 API 网关构建生产级别 LLM Chat 应用方案最佳实践
本文带大家了解一下如何使用阿里云Serverless计算产品函数计算构建生产级别的LLM Chat应用。该最佳实践会指导大家基于开源WebChat组件LobeChat和阿里云函数计算(FC)构建企业生产级别LLM Chat应用。实现同一个WebChat中既可以支持自定义的Agent,也支持基于Ollama部署的开源模型场景。
179 13
|
2月前
|
前端开发 小程序 Serverless
异步任务处理系统问题之阿里云函数计算FC的应用场景有哪些
异步任务处理系统问题之阿里云函数计算FC的应用场景有哪些
|
2月前
|
存储 运维 安全
函数计算产品使用问题之如何获取到访问其他阿里云服务所需的AccessKey、SecretKey或STS Token
函数计算产品作为一种事件驱动的全托管计算服务,让用户能够专注于业务逻辑的编写,而无需关心底层服务器的管理与运维。你可以有效地利用函数计算产品来支撑各类应用场景,从简单的数据处理到复杂的业务逻辑,实现快速、高效、低成本的云上部署与运维。以下是一些关于使用函数计算产品的合集和要点,帮助你更好地理解和应用这一服务。
|
2月前
|
Kubernetes Serverless 调度
异步任务处理系统问题之在阿里云函数计算平台上用户提交异步任务的问题如何解决
异步任务处理系统问题之在阿里云函数计算平台上用户提交异步任务的问题如何解决
|
2月前
|
Serverless 数据安全/隐私保护 开发者
Serverless 架构问题之阿里云函数计算在事件生态层面如何解决
Serverless 架构问题之阿里云函数计算在事件生态层面如何解决
35 0
|
2月前
|
Kubernetes Serverless API
Serverless阿里云函数计算问题之使用示例如何解决
本文探讨了Serverless场景下实例Exec功能的关键特性及其与K8S和Docker的主要区别:实例Exec仅适用于存活实例,且请求不占用并发度,被视为InvokeFunction调用并据此计费。此外,还介绍了阿里云函数计算中实例Exec功能的使用方法,包括通过控制台、API及CLI工具的操作流程,并详细解释了WebSocket连接对计费的影响以及如何在控制台上登录函数实例进行问题排查的具体步骤。
43 0

相关产品

  • 函数计算
  • 下一篇
    无影云桌面