一、流程与思路分析
1. 整体流程图
2. 流程分析
用户图片上传以及显示整个过程可分为以下几个阶段：
页面加载阶段
当用户访问https://www.cuiliangblog.cn/applyLink时，前端nginx服务器接收请求(如果配置了CDN，DNS会智能解析到CDN节点处理请求)，返回页面数据给用户，浏览器加载并显示页面
用户上传图片阶段
用户选择好本地图片文件，点击开始上传操作后，浏览器向后端API接口发送请求，获取此次上传操作的token
API后端接收到请求后，使用七牛SDK请求七牛云存储服务，获取上传token后将token返回给客户端
客户端使用token上传文件至七牛对象存储服务，上传成功后，七牛存储返回客户端资源的URL地址给客户端
浏览器请求图片资源阶段
客户端根据图片URL地址请求CDN服务，CDN节点发现没有找到资源后回源至七牛对象存储服务，获取文件资源成功后缓存至CDN并返回给客户端
用户提交表单阶段
用户提交表单，表单内容中包含资源的URL地址请求后端API接口
后端API接口保存图片资源URL地址
3. 开发需求分析
本案例使用如今最流行的前后端分离开发模式。
前端使用vue3开发，主要实现用户选择本地图片后裁剪成文件blob，以及将文件流和token直接请求对象存储服务，实现文件上传两个功能。
后端使python开发，借助Django REST framework框架开发api接口。安装七牛对象存储的sdk，通过请求七牛服务，获取本次操作的token，并返回给前端。
4. 运维配置分析
本案例使用主流的企业网站项目配置，使用公有云的OSS对象存储服务、CDN内容分发网络以及DNS域名解析。此处选用七牛云对象存储和腾讯云CDN以及阿里云的域名解析，其他公有云厂商产品名称和配置项可能略有差异，但基本原理都是一样的，操作步骤也并无差别。
没有注册的小伙伴们可以使用以下链接进行注册
七牛云：https://s.qiniu.com/VVfMnq
阿里云：https://www.aliyun.com/1111/new?userCode=gs1gd34d
腾讯云：https://curl.qcloud.com/yXdJdtu9
二、对象存储配置
此处使用七牛对象存储，有10G免费空间，对于一般小业务场景完全够用。
1. 创建云存储空间
登录七牛云——>进入控制台——>点击对象存储——>然后点击新建空间
填写表单完成存储空间的创建，完后后七牛云会自动为我分配一个测试域名，这样我们就可以使用这个域名进行上传/下载文件了。
需要注意的是：测试域名只能使用30天!!并且测试域名只能使用HTTP协议，不支持HTTPS协议
2. 对象存储服务绑定域名
因为我已经购买过域名cuiliangblog.cn。所以接下来绑定oss.cuiliangblog.cn给这个存储空间即可。需要注意的是，虽然七牛云的对象存储服务免费，但是CDN加速服务是收费的，我已经够买过腾讯CDN服务，所以此处配置了自定义源站域名，大家可以按照自己的实际情况选择最合适的配置。
需要注意的是如果使用第三方CDN服务，记住这个默认分配的CNAME，CDN配置回源策略时，填写这个CNAME。
三、CDN配置
1. 添加CDN加速域名
登录腾讯云——>控制台——>CDN内容分发网络——>域名管理——>添加域名
2. 配置回源及缓存等策略
此处以我的oss.cuiliangblog.cn对象存储域名举例，其中回源策略填写七牛云对象存储的CNAME。
四、DNS配置
1. 添加域名解析记录
登录阿里云——>控制台——>域名——>解析
新增一条oss.cuiliangblog.cn的CNAME域名解析记录，记录值填写腾讯云CDN的CNAME值
2. 访问验证
至此，存储服务和CDN以及DNS配置已全部完成，接下来做一个简单的测试
七牛云——>控制台——>对象存储——>空间管理——>文件管理——>上传文件，随便选择一张图片资源上传
