【开发者空间实践指导】基于FunctionGraph的画图应用开发部署

一、 案例介绍

本实验是基于FunctionGraph和API Gateway的画图小程序，使用了API Gateway作为前端访问入口，通过API Gateway触发器将用户的请求转发到FunctionGraph中的画图小程序后端服务。通过无服务器架构和RESTful API实现了前后端分离，部署一个简单易用的在线画图工具。

二、 免费领取云主机

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

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

三、 实验流程

说明：

① 下载画图应用；

② 安装FunctionGraph插件；

③ 创建函数；

④ 部署函数；

⑤ 修改API；

⑥ 访问画图应用。

四、 下载压缩包

下载画图应用源码压缩包到云主机，浏览器打开下载链接直接下载：

https://functionstorage-cn-north-4.obs.cn-north-4.myhuaweicloud.com/applications/funccode/fc_draw-pic.zip

五、安装FuctionGraph插件

方式一：在线安装

进入云主机，打开CodeArts IDE，点击左侧“扩展”搜索“CodeArts FunctionGraph”点击安装该插件。

方式二：本地安装

前往CodeArts IDE插件市场下载插件CodeArts FunctionGraph到云主机，下载地址为：CodeArts IDE插件市场。

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

六、创建函数

在插件中创建函数，选择HTTP函数。

模板选择Hello World。

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

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

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

七、修改函数

将画图应用代码复制到刚创建的函数，可以直接采用拖拽的方式复制，同名的文件直接“替换”即可。

八、部署函数

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

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

部署成功后，可以在FunctionGraph插件中查看到刚部署的函数：draw。

九、修改API

打开火狐浏览器，登录华为云控制台，进入FunctionGraph界面，可以看到通过插件部署的函数：draw。

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

创建“分组”。

点击触发器名字跳转到API总览界面。

点击右上角“编辑”进入API编辑界面。

在API编辑界面，只需要修改第2步“定义API请求”中的“请求Path”为：/excalidraw，其他不用修改，直接点击立即完成。

然后再点击“发布API”。

发布API界面中发布环境保持默认RELEASE，点击右下角发布即可。

再回到draw函数详情界面，刷新可以看到触发器的“请求路径”已经修改成功。

十、访问画图应用

复制触发器“调用URL”浏览器访问画图应用。

至此，基于FunctionGraph的画图应用开发部署已完成。