【开发者空间实践指导】基于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实现了前后端分离,部署一个简单易用的在线画图工具。

二、 免费领取云主机

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

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

三、 实验流程


图片1.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”点击安装该插件。

图片2.png

方式二:本地安装

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

图片3.png

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

图片4.png

六、创建函数

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

图片5.png

模板选择Hello World。

图片6.png

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

图片7.png

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

图片8.png

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

图片9.png

七、修改函数

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

图片10.png

图片11.png

八、部署函数

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

图片12.png

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

图片13.png

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

图片14.png

九、修改API

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

图片15.png

图片16.png

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

图片17.png

创建“分组”。

图片18.png

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

图片19.png

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

图片20.png

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

图片21.png

然后再点击“发布API”。

图片22.png

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

图片23.png

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

图片24.png


十、访问画图应用

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

图片25.png

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

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

评论(0

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

全部回复

上滑加载中

设置昵称

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

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

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