前端探索云存储用得好，静态资源没烦恼

Posted 2022-02-03 luciozhang

文章目录

• • COS
  • CDN
  • 腾讯云COS和CDN
  • 腾讯云API的使用
  • • API文档
    • ExpressJS服务端
    • 接口测试
    • 进一步优化
  • 总结

本文主要介绍了，用COS和CDN存储静态资源，以及腾讯云API的使用。

COS

对象存储（Cloud Object Storage，COS）是腾讯云提供的一种存储海量文件的分布式存储服务，具有高扩展性、低成本、可靠安全等优点。

“对象”是指用户上传的文件，文件除了本身的数据信息，还有文件类型、名称、尺寸等等，这些就是对象的“属性”。我们只需要关心把一个个对象存储到“存储桶”中，其物理上是怎么存储的我们不需要关心。

CDN

CDN的工作原理，就是将源站的资源，缓存在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文档

CDN刷新URL的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刷新只是一个很小众的功能，其他像对象上传、图像视频处理等等比较常用的功能，也是差不多的用法，一通百通，希望本文对大家能有点帮助。