十分钟上线-FC&IMM构建serverless文档转换/预览服务

前言

自从人类进入信息时代以来，办公文档是每个人日常频繁使用的工具，ppt、word、xls、wps、pdf 等为我们工作和生活带来了很多的便利，尤其进入云计算和移动互联网时代，人们可以利用各种终端来预览 ppt、word、pdf 等相关文档进行工作和学习，这种情况下，文档之间的格式转换，各种终端的适配预览显得尤为重要，在本文中，我们通过一个ppt 转换成 vector 并且进行预览的例子，来看看阿里云函数计算和智能媒体管理相结合，快速实现一个弹性高可用的文档转换/预览服务。

函数计算

阿里云函数计算是一个事件驱动的serverless计算服务。通过函数计算，您无需管理服务器等基础设施，只需编写代码并上传。函数计算会为您准备好计算资源，以弹性、可靠的方式运行您的代码，具体表现为：

• 无需采购和管理服务器等基础设施
• 按需付费
• 专注业务逻辑的开发，能极大提高开发效率
• 稳定高可用，毫秒级别弹性伸缩，快速实现底层扩容以应对峰值压力
• 提供日志查询、性能监控、报警等功能快速排查故障

智能媒体管理

阿里云智能媒体管理(Intelligent Media Management，简称 IMM)，是阿里云提供的针对媒体数据的高级、智能管理服务。它具有与平台无关的 RESTful API 接口，为阿里云上的非结构化存储数据（例如，OSS 中的视频、图片、文档等数据）提供快捷的数据处理通道，比如 OFFICE 格式转换，图片、视频的编辑处理，以及人工智能的价值数据提取和检索（例如，标签识别、人脸分组）。IMM 提供场景化构建的一站式数据应用解决方案，适合媒资管理、智能网盘、社交应用、图库图床等开发者使用。

在本文中，我们主要讨论智能媒体管理产品文档转换/预览功能

弹性高可用的文档转换/预览服务快速构建

在本案例中,我们对一个ppt文档转换成vector格式，然后直接使用“智能媒体管理”服务提供的预览渲染引擎， 对转换成功后的文件进行预览。本文只针对ppt 转换成 vector，智能媒体支持十分丰富的文档转换，具体参考：https://help.aliyun.com/document_detail/63761.html

在案例中，我们使用的阿里云资源在同一个region-杭州

1. 开通函数计算、智能媒体管理和对象存储

2. 登录智能媒体管理控制台)，创建一个project，假设为 imm-demo

3. 登录对象存储控制台， 创建一个bucket，假设为 fc-imm-demo，

• 由于要浏览器进行预览，这里设置跨域访问配置 *.imm.aliyun.com
  
• 新建一个测试目录，上传测试ppt文件测试文件到指定目录
  

4. 登录函数计算控制台， 创建相应的service 和 function， 具体参考使用控制台编写函数

• 配置service的role 具有访问imm和oss读的权限

配置oss读权限主要是为了生成安全预览文档的url地址，在本文中直接授予service 的role 具有 AliyunIMMFullAccess 和AliyunOSSReadOnlyAccess, 当然为了安全，您可以把oss读权限的粒度具体到某个 bucket 和某个文件夹。
如果您不想使用函数计算中 service 中的 role 参与生成预览url， 您可以直接创建单独的子账号,在函数调用ram相关服务获取sts，过程可以参考：https://yq.aliyun.com/articles/589902

• 编写函数, 函数计算 python/nodejs runtime 内置了 imm 的 sdk，直接编写代码如下:
  python 版本

#-*- coding: utf8 -*-

import json, time
from collections import OrderedDict
from aliyunsdkcore.client import AcsClient
from aliyunsdkimm.request.v20170906 import CreateOfficeConversionTaskRequest
from aliyunsdkimm.request.v20170906 import GetOfficeConversionTaskRequest
from aliyunsdkcore.auth.credentials import StsTokenCredential

try:
   from urllib import quote
except:
   from urllib.parse import quote

PREVIEWURL = 'https://preview.imm.aliyun.com/index.html';
PREVIEWTGTPATH = 'fc-demo-preview-output-py';

immProject = "imm-demo";
srcUri = "oss://fc-imm-demo-sz/test-data/office/test.pptx";
# https://help.aliyun.com/document_detail/63761.html
# https://help.aliyun.com/document_detail/74947.html
# 使用前端渲染引擎预览，这里的type必须是vector
tgtType = "vector"

def getBucketByUri(uri):
  if uri.startswith("oss://"):
    return uri[6:].split("/")[0]
  raise Exception("SrcUri is invalid")

def getFileNameByUri(uri):
  return uri.split("/")[-1]

def handler(event, context):
  creds = context.credentials
  sts_token_credential = StsTokenCredential(creds.access_key_id, creds.access_key_secret, creds.security_token)
  clt = AcsClient(region_id=context.region, credential=sts_token_credential)

  bucket = getBucketByUri(srcUri)
  fileName = getFileNameByUri(srcUri)

  tgtUri = "oss://{0}/{1}/{2}".format(bucket, PREVIEWTGTPATH, fileName)
  createReq = CreateOfficeConversionTaskRequest.CreateOfficeConversionTaskRequest()
  createReq.set_Project(immProject)
  createReq.set_SrcUri(srcUri)
  createReq.set_TgtUri(tgtUri)
  createReq.set_TgtType(tgtType)
  response = clt.do_action_with_exception(createReq)
  print(response)

  res = json.loads(response)
  taskId = res["TaskId"]
  getReq = GetOfficeConversionTaskRequest.GetOfficeConversionTaskRequest()
  getReq.set_Project(immProject)
  getReq.set_TaskId(taskId)
  period = 1
  timeout = 30
  start = time.time()
  while True:
      response = clt.do_action_with_exception(getReq)
      #print(response)
      status = json.loads(response)["Status"]
      if status == "Finished":    #任务完成
          print("Task finished.")
          break
      if status == "Failed":     #任务失败
          print("Task failed.")
          break
      if time.time() - start > timeout:   #任务超时
          print("Task timeout.")
          break
      time.sleep(period)

  # get preview url
  params = OrderedDict()
  params["url"] = "http://" + context.region + ".aliyuncs.com/" + PREVIEWTGTPATH + "/"  + fileName
  params["accessKeyId"] = creds.access_key_id
  params["accessKeySecret"] = creds.access_key_secret
  params["stsToken"] = quote(creds.security_token)
  params["region"] = "oss-" + context.region
  params["bucket"] = bucket
  paramsLi = [ k + "=" + v  for k, v in params.items()]
  paramsStr = "&" .join(paramsLi)
  preview = PREVIEWURL + "?" + paramsStr

  print(preview)
  
  return preview

nodejs 版本

const { RPCClient } = require('@alicloud/pop-core');

function getBucketByUri(uri) {
  if(uri.startsWith("oss://")){
    return uri.substr(6).split("/")[0];
  }
  throw new Exception("SrcUri is invalid");
}

function getFileNameByUri(uri) {
  var arr = uri.split("/");
  return arr[arr.length - 1];
}

 function parse(params){
    return Object.keys(params).map(function (key){
      return `${key}=${params[key]}`;
    }).join("&");
}

exports.handler = function(event, context, callback) {
  // 预览引擎的访问地址
  const previewUrl = 'https://preview.imm.aliyun.com/index.html';
  // 转换结果存放路径
  const previewTgtPath = 'fc-demo-preview-js';

  var immProject = "imm-demo";
  var immSrcUri = "oss://fc-imm-demo/test-data/office/test.pptx";

  // 获取AK信息
  var akInfo = {
    accessKeyId: context.credentials.accessKeyId,
    accessKeySecret: context.credentials.accessKeySecret,
    securityToken: context.credentials.securityToken
  };

  var bucket = getBucketByUri(immSrcUri)

  var client = new RPCClient({
    endpoint: `https://imm.${context.region}.aliyuncs.com`,
    accessKeyId: akInfo.accessKeyId,
    accessKeySecret: akInfo.accessKeySecret,
    securityToken: akInfo.securityToken,
    apiVersion: '2017-09-06'
  });

  var fileName = getFileNameByUri(immSrcUri);
  
  // https://help.aliyun.com/document_detail/63761.html
  // https://help.aliyun.com/document_detail/74947.html
 // 使用前端渲染引擎预览，这里的type必须是vector
  var immParams = {
    Project: immProject,
    SrcUri: immSrcUri,
    TgtType: "vector",
    TgtUri: `oss://${bucket}/${previewTgtPath}/${fileName}`
  };

  var ossRegion = `oss-${context.region}`

  //get vector  preview url
  var params = {};
  // 预览文档地址
  params.url = `http://${bucket}.${ossRegion}.aliyuncs.com/${previewTgtPath}/${fileName}`;
  params.accessKeyId = akInfo.accessKeyId;
  // 访问预览文档的accessKeySecret
  params.accessKeySecret = akInfo.accessKeySecret;
  // 访问预览文档的SecurityToken
  params.stsToken = encodeURIComponent(akInfo.securityToken);
  // 预览文档的region
  params.region = ossRegion;
  // 预览文档的bucket
  params.bucket = bucket;
  // 拼接预览URL
  var url = `${previewUrl}?${parse(params)}`;

  client.request("createOfficeConversionTask", immParams).then(function() {
    console.log(url);
    callback(null, url); 
  }); 
};

5. 点击执行函数，函数的返回值为预览的url，用浏览器打开生成的url，就可以预览转换格式后的ppt了

总结

从本文的示例中，我们可以看出，基于oss存储，使用函数计算和智能媒体管理，短短的几行代码就可以快速实现一个弹性高可用的文档转换/预览服务，在本文中，演示的函数的触发是通过手动触发，函数计算集成丰富的事件源，通过事件源可以触发函数，比如对于上传到oss的某个文档，自动触发文档格式转换， 结合http trigger 来设置 event 来达到对主动对某个文档格式转换并直接预览，从而实现实现一个弹性高可用的文档转换/预览服务，类似函数计算实现Serverless图片处理服务