一、案例介绍

本实验是一个基于 FunctionGraph的 GIF动图制作工具。使用 API Gateway作为前端访问入口，通过 API Gateway触发器将用户的请求转发到 FunctionGraph中的GIF动图制作后端服务。使用该工具，用户可以上传自定义视频，然后设置截取时长进行 GIF动图生成。

二、免费领取云主机

如您还没有云主机，可点击链接 ，根据领取指南进行操作。

如您已领取云主机，可直接开始实验。

三、实验流程

说明：

① 安装FunctionGraph插件；

② 使用FunctionGraph插件创建函数；

③ 在CodeArts IDE修改函数；

④ 使用FunctionGraph插件部署函数；

⑤ 给FunctionGraph函数添加依赖包；

⑥ 给FunctionGraph函数创建APIG触发器；

⑦ 使用浏览器访问GIF动图应用。

四、安装包下载

下载应用源码到云主机，复制链接在浏览器中打开并下载。

https://functiongraph-test-code.obs.cn-north-4.myhuaweicloud.com/%E9%99%84%E4%BB%B61%EF%BC%9Affmpeg-gif.zip

五、GIF动图制作应用开发部署

5.1 安装FunctionGraph插件

方式一：在线安装

进入云主机 ，打开CodeArts IDE，打开CodeArts IDE for java/python（以下统称为CodeArts IDE），点击右上角登录个人华为云账号，登录后，点击右侧“扩展”搜索“CodeArts FunctionGraph”点击安装该插件。

方式二：本地安装

前往鲲鹏社区官网下载插件CodeArts FunctionGraph到云主机，下载地址为：CodeArts IDE插件市场 。

在云主机桌面，打开CodeArts IDE开发环境，单击右侧“扩展”按钮，点击从本地安装，选择下载好的插件安装。

5.2 创建函数

在CodeArts IDE侧边工具栏找到FunctionGraph插件并打开，在插件中创建函数，选择HTTP函数。

模板选择Hello World。

函数名称可以设置为：gif_gen_demo。

函数路径可以自由选择云主机上的文件夹。

创建好函数之后，打开“工程“菜单可以看到刚创建的函数内容：

5.3 修改函数

将制作GIF动画应用代码复制到刚创建的函数，函数文件在下的资料包中获取，可以直接采用拖拽的方式复制，同名的文件直接“替换”即可。

tamplates/index.html是GIF动图工具前端页面；
app.py为GIF动图工具后端逻辑方法，依赖FFmpeg实现动图生成；
bootstrap为函数执行入口；
template.yml是函数配置文件，函数部署成功后，可以函数详情页面找到对应的配置信息。
这里需要将函数内存规格设置为512M。由于函数调用过程中、运行时会解析和缓存传入的event事件，这部分操作会消耗额外的内存，为避免函数实际使用时内存过大而触发OOM，所以将template.yml中MemorySize改为512。

5.4 部署函数

打开FunctionGraph插件，点击“…”，选择“部署函数”，选择创建好的函数：gif_gen_demo。

部署区域选择华北-北京四。

注意：选择部署在FunctionGraph插件支持区域也可以，但实验文档中提供的依赖包地址是北京四的桶域名地址，且依赖包大小超过了10M，无法通过“上传ZIP文件”方式上传依赖包。此时，您只能先将依赖包下载到本地，然后自己创建对应区域的OBS桶并将依赖包上传到自己桶里再创建依赖包，会产生额外费用。直接部署在北京四可以避免以上问题。

部署成功后，可以在FunctionGraph插件中查看到刚部署的函数：gif_gen_demo。右键单击gif_gen_demo选择在浏览器打开函数详情页，如果浏览器没有登录会提示先登录。

浏览器查看函数详情页如下。

5.5 添加函数依赖包

在函数详情页点击左上角函数名称左边的“<”返回到函数列表界面，然后进入“函数-依赖包管理”界面，也可以直接跳转。

单击“添加依赖包”，依赖信息填写如下：

回到函数详情页面，下拉到页面底部，点击“添加依赖包”，选择刚刚创建的依赖包并确定。

5.6 创建触发器

gif_gen_demo函数详情界面，点击 “创建触发器”，触发器配置参考如下，“分组”没有的话可以点击“创建分组”进行创建API分组，点击确定创建。

没有“分组”，创建“分组”

回到创建触发器界面，刷新分组，选择新建的分组，其他内容填写如下：

5.7 访问制作GIF动图应用

复制触发器“调用URL”浏览器访问制作GIF动图应用，可以使用下载的资料包中的demo视频进行测试。

点击“选择视频”选择资料包中提供的demo视频，设置截取的开始时间、截取时长，然后点击“开始制作”，完成GIF动图生成。

制作完成后可以下拉页面获取GIF动图。

至此，基于FunctionGraph的制作GIF动图应用开发部署已完成。