基于FunctionGraph的画图应用构建
一、概述
1. 案例介绍
函数工作流FunctionGraph是一项基于事件驱动的函数托管计算服务，只需要编写业务函数代码并设置运行的条件，无需配置和管理服务器等基础设施，即可使函数以弹性、免运维、高可靠的方式运行，开发者无需过多关注底层资源的管理，大大提高了开发效率。
本案例选择画图应用作为示例，并借助开发者空间云主机提供的开放平台云函数能力，实现快速创建函数、轻松部署上云、云上开发与调试能力。
通过实际操作，让大家深入了解如何利用FunctionGraph开发并部署一个画图应用。在这个过程中，大家将学习到从函数创建、应用部署以及与 API 网关集成等一系列关键步骤，从而掌握FunctionGraph的基本使用方法，体验其在应用开发中的优势。
2. 适用对象
- 企业
- 个人开发者
- 高校学生
3. 案例时间
本案例总时长预计60分钟。
4. 案例流程
说明：
- 在开发平台创建云函数；
- 在云主机中访问创建的函数；
- 下载画图应用代码；
- 上传应用代码部署函数；
- 创建触发器；
- 修改API；
- 访问画图应用。
5. 资源总览
本案例预计花费约5.56元。 体验完成后请及时释放资源，避免产生多余的费用。
| 资源名称 | 规格 | 单价（元） | 时长（分钟） |
|---|---|---|---|
| 开发平台--云函数 | 默认 | 免费 | 60 |
| 云主机 | ARM/鲲鹏 | 4 vCPUs 8GB | Ubuntu 24.04 Server 定制版 | 免费 | 60 |
| API网关服务(APIG专享版)实例 | 基础版 | 4.76/小时 | 60 |
| 虚拟私有云VPC | 默认 | 免费 | 60 |
| 弹性公网IP | 按流量计费 | 5Mbit/s | 0.8元/GB | 60 |
二、华为开发者空间开发平台创建云函数
1. 开发者空间开发空间--云函数
面向广大开发者群体，华为开发者空间开发平台提供一些快捷创建的开发工具的能力，开发者开箱即用，快速体验华为根技术和资源。
本案例使用开发者空间开发平台云函数能力，开发者直接进入华为开发者空间开发空间--云函数界面，就可以开始创建函数了。
华为开发者空间开发平台--云函数： 
点击新建云函数： 
选择从空白模板创建，函数类型为HTTP函数，输入函数名称后（默认函数名可为"draw"），点击立即创建： 
创建完成后就可在云函数管理列表看到新建的函数"draw"： 
三、FunctionGraph云函数配置
面向广大开发者群体，华为开发者空间提供一个随时访问的“开发桌面云主机”、丰富的“预配置工具集合”和灵活使用的“场景化资源池”，开发者开箱即用，快速体验华为根技术和资源。
如果还没有领取开发者空间云主机，可以参考免费领取云主机文档领取。
领取云主机后可以直接进入华为开发者空间工作台界面，点击打开云主机 > 进入桌面连接云主机： 
进图云主机后的界面： 
1. 在开发者空间云主机中访问创建的函数
点击云函数管理列表的函数名，会跳转函数管理页面，复制该链接： 
复制访问链接： 
在开发者空间云主机打开火狐浏览器，打开上面复制的访问链接并打开（需要登录）： 
2. 在开发者空间云主机中下载画图应用代码
下载画图应用源码压缩包到云主机，在云主机火狐浏览器中打开下载链接直接下载：https://functionstorage-cn-north-4.obs.cn-north-4.myhuaweicloud.com/applications/funccode/fc_draw-pic.zip 下载结果： 
3. 上传代码到函数
在函数工作流--控制台页签，点击上传代码 > Zip文件按钮： 
点击添加文件俺就选中刚刚下载的文件"fc_draw-pic.zip"，然后点击确认： 
等待上传完成后，代码就会更新： 
四、APIG触发器配置
1. 创建VPC
虚拟私有云（Virtual Private Cloud，VPC）是您在云上的私有网络，为云服务器、云容器、云数据库等云上资源构建隔离、私密的虚拟网络环境。VPC丰富的功能帮助您灵活管理云上网络，包括创建子网、设置安全组和网络ACL、管理路由表等。此外，您可以通过弹性公网IP连通云内VPC和公网网络，通过云专线、虚拟专用网络等连通云内VPC和线下数据中心，构建混合云网络，灵活整合资源。如果当前没有可用的个人VPC，可以先创建VPC。
在控制台的搜索框搜索VPC，跳转VPC控制台： 
点击创建虚拟私有云： 
创建参数： | 参数名 | 参数值 | | --------- | --------- | | 区域 | 西南-贵阳一 | | 名称 | vpc-draw或保持默认 | | 企业项目| 选择自己的企业项目 | | 子网名称 | subnet-draw或保持默认 |
参数配置完成点击立即创建： 
创建完成后就可在列表看到创建的VPC： 
2. 创建触发器
点击创建触发器按钮，在侧边栏进行触发器创建： 
创建步骤： 1.触发器类型选择API 网关服务 (APIG专享版)；
2.若有实例就选择可用实例，若无实例就点击后面的创建实例； 2.1创建实例参数： | 参数名 | 参数值 | | --------- | --------- | | 计费模式 | 按需计费 | | 区域 | 西南-贵阳一 | | 可用区 | 保持默认 | | 实例名 | apig-draw或保持默认 | | 实例规格 | 基础版| | 可维护时间窗 | 保持默认 | | 企业项目| 选择自己的企业项目 | | 网络 | 选择上面自己的VPC | | 安全组 | 保持默认 |
配置如图所示，配置完成点击立即购买： 
确认完规格点击去支付： 
会看到创建的APIG，此时状态处于创建中： 
等待大概十分钟，待状态变更为运行中： 
点击实例的查看控制台： 
点击弹性IP地址的立即启用： 
3.返回触发器创建页签，刷新实例，选中刚创建成功的实例： 
3.1创建触发器参数： | 参数名 | 参数值 | | --------- | --------- | | 实例 | 选择上面自己的实例 | | API名称 | API_draw或保持默认 | | 可用区 | 保持默认 | | 实例名 | apig-draw或保持默认 | | 分组 | 选择实例自动带出的| | 发布环境 | RELEASE | | 安全认证| None | | 请求协议 | HTTPS | | 请求方式 | ANY | | 后端超时 | 5000 |
点击确认后完成触发器的创建： 
3. 配置触发器
点击触发器标题，进入触发器控制台，之后点击编辑： 
由于index.js中将excalidraw目录设置为了静态资源目录，并为其分配了一个路径前缀/excalidraw，所以需要给APIG触发器请求路径修改为/excalidraw： 
之后点击下一步，直至完成： 
完成后，因为触发器发生了变更，需要发布最新版本： 
4. 触发器调试
点击调试，进入调试界面，在链接框的最后添加一个"/"，作为调试访问链接： 
调试结果： 
五、访问画图应用
1. 浏览器访问画图应用
刷新函数页的触发器后，复制触发器的调用URL： 
在浏览器访问画图应用： 
六、释放资源
1. 删除触发器和实例
点击触发器的删除按钮，按照指示进行删除： 
在实例管理界面删除创建的实例： 
2. 删除弹性云服务器VPC
进入我的VPC列表，选中创建的VPC，点击删除，按照提示删除VPC: 
3. 删除函数
在开发者空间--开发平台--云函数中，选择创建的函数，点击更多 > 删除，按提示删除函数： 
扫一扫
6万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
