前端探索云存储用得好,静态资源没烦恼
Posted 这波lucio来全学了
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端探索云存储用得好,静态资源没烦恼相关的知识,希望对你有一定的参考价值。
文章目录
本文主要介绍了,用COS和CDN存储静态资源,以及腾讯云API的使用。
COS
对象存储(Cloud Object Storage,COS)是腾讯云提供的一种存储海量文件的分布式存储服务,具有高扩展性、低成本、可靠安全等优点。
“对象”是指用户上传的文件,文件除了本身的数据信息,还有文件类型、名称、尺寸等等,这些就是对象的“属性”。我们只需要关心把一个个对象存储到“存储桶”中,其物理上是怎么存储的我们不需要关心。
CDN
CDN的工作原理,就是将源站的资源,缓存在CDN各个节点上,当请求命中某个节点的缓存时,直接返回客户端,从而提高访问效率,缓解源站的压力。
更深一步的原理,可以参考下面两篇文章。
腾讯云COS和CDN
为了提高我们页面的体验,我们可以选择结合腾讯云的对象存储COS和内容分发网络CDN来托管我们的静态资源。
对象存储的使用,如果是面向设计的同学的话,有个比较好的工具就是COS的可视化工具COSBrowser。
对开发人员,API Axplorer是个极好的API文档,API能整理成这样真的厉害。
腾讯云API的使用
接下来,我们结合使用腾讯云COS和CDN时候的一个痛点,来介绍下怎么封装一个腾讯云的CDN,从而解决我们的痛点。
现状:设计同学的切图是传到腾讯云COS,然后我们为COS链接配置CDN域名,前端直接请求资源的CDN链接。
痛点:设计同学直接用COSBrowser管理COS上的资源,每次替换资源后,CDN的更新有延时,需要手动触发一下腾讯云的CDN刷新,但是COSBrower客户端上没有可以刷新的地方,每次需要登录腾讯云的网页管理端去刷新,就很麻烦,因为网页端没多久就需要登录,而且腾讯云账号太多人共用也不安全。
方案:封装CDN刷新的接口,提供一个工具,给设计同学进行CDN刷新。
接下来我们借助这个案例,来看看怎么使用腾讯云的API和SDK。
API文档
我们可以看到只需要简单调用腾讯云nodejs sdk。
// Depends on tencentcloud-sdk-nodejs version 4.0.3 or higher
const tencentcloud = require("tencentcloud-sdk-nodejs");
const CdnClient = tencentcloud.cdn.v20180606.Client;
const clientConfig =
credential:
secretId: "SecretId",
secretKey: "SecretKey",
,
region: "",
profile:
httpProfile:
endpoint: "cdn.tencentcloudapi.com",
,
,
;
const client = new CdnClient(clientConfig);
const params = ;
client.PurgeUrlsCache(params).then(
(data) =>
console.log(data);
,
(err) =>
console.error("error", err);
);
ExpressJS服务端
我们结合ExpressJS封装一个刷新CGI的接口
const express = require('express');
const tencentcloud = require('tencentcloud-sdk-nodejs');
const getHost = require('./host');
const getSecret = require('./secret');
const app = express();
let client = null;
app.all('*', (req, res, next) =>
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Headers', 'Content-Type,Content-Length, Authorization, Accept,X-Requested-With');
res.header('Access-Control-Allow-Methods', 'PUT,POST,GET,DELETE,OPTIONS');
res.header('X-Powered-By', '3.2.1');
res.header('Content-Type', 'application/json;charset=utf-8');
next();
);
// 刷新CDN url
app.get('/refresh_cdn/url', (req, res) =>
client.PurgeUrlsCache(JSON.parse(req.query.cgiparams)).then(
(data) =>
res.json( code: 0, msg: '请求成功', data );
,
(err) =>
res.json( code: 0, msg: '请求失败', data: err );
,
);
);
function initCDNClient(secretId, secretKey)
const CdnClient = tencentcloud.cdn.v20180606.Client;
const clientConfig =
credential:
secretId,
secretKey,
,
region: '',
profile:
httpProfile:
endpoint: 'cdn.tencentcloudapi.com',
,
,
;
return new CdnClient(clientConfig);
async function run()
// 获取腾讯云API密钥,不直接写在代码中,因为不安全
secret = await getSecret();
mHost = await getHost();
// 初始化操作对象
client = initCDNClient(secret);
const server = app.listen(8088, mHost, () =>
const host = server.address().address;
const port = server.address();
console.log('地址为 http://%s:%s', host, port);
);
run();
接口测试
curl -G -d 'cgiparams=%7B%22Urls%22:[%22https:%2F%2Fimage-1251917893.file.myqcloud.com%2FTIP_XCX%2Fpmd_year%2F2021%2Fcollect_card%2Fbtn_home_3.png%22]%7D' http://x.x.x.x:8088/refresh_cdn/url
返回
"code":0,"msg":"请求成功","data":"RequestId":"11758bee-1e93-4062-b54f-54216999755f","TaskId":"389136129565192861"
测试一下,图片资源确实更新了。
进一步优化
除了刷新URL的接口,我们可以进一步封装刷新目录、查看刷新历史、查看刷新限额的接口,实现和腾讯云网页管理端一样的体验,但是我们不需要登录腾讯云账号。
总结
今天主要是介绍了怎么使用腾讯云的API接口,CDN刷新只是一个很小众的功能,其他像对象上传、图像视频处理等等比较常用的功能,也是差不多的用法,一通百通,希望本文对大家能有点帮助。
以上是关于前端探索云存储用得好,静态资源没烦恼的主要内容,如果未能解决你的问题,请参考以下文章