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

举报
开发者空间小蜜蜂 发表于 2024/09/23 16:51:30 2024/09/23
【摘要】 一、 案例介绍本实验是基于FunctionGraph和API Gateway的画图小程序,使用了API Gateway作为前端访问入口,通过API Gateway触发器将用户的请求转发到FunctionGraph中的画图小程序后端服务。通过无服务器架构和RESTful API实现了前后端分离,部署一个简单易用的在线画图工具。二、 免费领取云主机如您还没有云主机,可点击链接,根据领取指南进行操...

一、 案例介绍

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

二、 免费领取云主机

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

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

三、 实验流程

0第一张流程图.PNG

说明:

① 下载画图应用;

② 安装FunctionGraph插件;

③ 创建函数;

④ 部署函数;

⑤ 修改API;

⑥ 访问画图应用。

四、 下载压缩包

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

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

五、安装FuctionGraph插件

方式一:在线安装

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

0.PNG

方式二:本地安装

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

1.PNG

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

2.PNG

六、创建函数

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

3.PNG

模板选择Hello World。4.PNG

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

5.PNG

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

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

7.PNG

七、修改函数

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

8.PNG

9.PNG

八、部署函数

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

10.PNG

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

11.PNG

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

12.PNG

九、修改API

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

13.PNG

14.PNG

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

15.PNG

创建“分组”。

16.PNG

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

17.PNG

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

18.PNG

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

19.PNG

然后再点击“发布API”。

20.PNG

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

21.PNG

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

22.PNG

十、访问画图应用

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

23.PNG

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

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。