背景
为了解决函数计算本地环境差异和配置繁琐的问题,在此背景下,就有了我们的 WebIDE 产品,WebIDE 能让函数的开发、测试和部署更加流畅,降低了函数计算的学习成本和缩短了函数的开发周期。
介绍
WebIDE 是一个基于 H5 支持多语言的集成开发环境。相当于 VS Code 的网页版。
功能特色:
- 文件树,支持拖拽移动、拖拽上传、打包下载、重命名、搜索、同名覆盖确认提醒和多选批量操作。
- 代码编辑器,集成 Monaco Editor,与 VS Code 同款编辑器
- 快捷键,与 VS Code 保持一致。
- 偏好设置,支持工作空间级别的偏好设置。
- 命令面板,通过快捷键
F1
,唤出快捷打开功能搜索框,搜索想要的快捷功能 - 窗口管理,支持自由分窗和拖拽,并能保存布局。
- Web Terminal,前端集成 XTerm.js,后端运行在 docker container 内部,随意安装软件,不会影响宿主机环境。预制 ubuntu 16.04 和 oh-my-zsh 开箱即用。
- 预制黑白两款主题
- 可以将任意 Mac 和 Linux 系统主机注册成工作主机,所有数据都存储于用户所属的工作主机。
- 引入工作空间概念,支持多项目管理
- 内置函数计算创建向导,支持 fun 模板,内置了函数计算运行,调试和发布工具。
效果图:
使用
1. WebIDE 打开方式
直接在浏览器中输入网址 https://ide.fc.aliyun.com
2. 选择 Region
WebIDE页面打开后,会提示需要先选择一个 Region,目前只有一个杭州可以选择。如下图所示:
3. 创建主机(Host)
主机(Host),目前支持将您本机作为 Host,用于托管您的代码以及连接 Host 上起的 Teminal,所以创建主机流程,就是要在您的机器上执行一个命令安装 ide-agent 来达到效果。
- 点击 Hosts 视图的 “+” 号,创建一个 主机(Host),复制对话框中的命令,在本机命令行终端中执行。
- 执行成功后,命令会输出提示信息,其中会提示将路径
/Users/kevin/.ide_home/bin
添加到PATH
,/Users/kevin/.ide_home/bin
是我本地路径,你们的路径会和我有点不一样,以你们看到的为准,正确添加到PATH
后,方可执行ide start
命令,不然会报命令找不到错误。 - 接下来,在本地命令行终端运行命令
ide start
启动 ide-agent 服务,此时,在 WebIDE 界面上,可以看到主机图标变成了绿色(绿色图标表示主机是在线的,灰色表示主机离线)。 - 回到 WebIDE 界面,点击对话框 OK 或者点击 Hosts 视图的刷新按钮,就可以看到您新注册的主机。
注意:
主机(Host),目前支持将您本机作为 Host,用于托管您的代码以及连接 Host 上起的 Teminal,所以创建主机流程,就是要在您的机器上执行一个命令安装 ide-agent 来达到效果。
- 点击 Hosts 视图的 “+” 号,创建一个 主机(Host),复制对话框中的命令,在本机命令行终端中执行。
- 执行成功后,命令会输出提示信息,其中会提示将路径
/Users/kevin/.ide_home/bin
添加PATH
,/Users/kevin/.ide_home/bin
是我本地路径,你们的路径会和我有点不一样,以你们看到的为准,正确添加到PATH
后,方可执行ide start
命令,不然会报命令找不到错误(window 系统下路径会有差异,以控制台输出的内容为主)。 - 接下来,在本地命令行终端运行命令
ide start
启动 ide-agent 服务,此时,在 WebIDE 界面上,可以看到主机图标变成了绿色(绿色图标表示主机是在线的,灰色表示主机离线)。 - 回到 WebIDE 界面,点击对话框 OK 或者点击 Hosts 视图的刷新按钮,就可以看到您新注册的主机。
注意:
- 目前支持 Mac 和 Linux,Windows 10 Pro、Enterprise 或 Education。
- 由于环境依赖 docker 和 docker compose,需要提前安装。其中 docker version >= 1.13.0,docker compose version >= 1.11.0。
- Mac 和 Linux 系统下修改
PATH
,如果 shell 是 bash,可以修改文件~/.bashrc
,将PATH=$PATH:/Users/kevin/.ide_home/bin
追加到文件~/.bashrc
末尾。如果 shell 是 zsh,可以修改~/.zshrc
。/Users/kevin/.ide_home/bin
是我本地路径,你们的路径会和我有点不一样,以你们看到的为准。如果是 Windows,需要设置环境 PATH。
如下图所示:
4. 创建工作空间(Workspace)
工作空间(Workspace),主机上可以创建多个工作空间。点击 Workspaces 视图的 “+” 号,创建一个工作空间(Workspace),在 WebIDE 界面上,绿色图标表示主机是在线的,灰色表示主机离线。如下图所以:
5. 打开工作空间
两种方式:
- 在 Workspaces 的视图中,双击(右键菜单)打开在线的工作空间(绿色图标)
- 在 Files 的视图中,点击 “Open Workspace” 按钮,通过工作空间对话框来打开在线的工作空间
打开后如下图所示:
6. 创建函数
如下图所示:
根据函数创建向导一步一步创建函数,创建完成后,如下图:
7. 部署函数
由于权限原因,目前只提供通过 Terminal 中的 fun 工具来部署函数,Terminal 的环境中已经预置了 fun 和 fcli 工具,可以很方便的使用。使用 fun 工具之前,需要为 fun 工具配置的 AK,可以通过如下命令:
fun config
配置完后,通过 fun 的部署命令来部署函数,命令如下:
fun deploy
如下图所示:
8. 运行函数
- 打开运行界面
- 点击 “Run” 按钮运行函数
打开运行界面
点击 “Run” 按钮运行函数
小结
通过以上几个步骤,我们就完成了函数计算的开发、部署和运行。预置的 fun 和 fcli 工具,开箱即用,避免了因为安装 fun 和 fcli 所带来的学习成本,也防止了因为用户本地环境差异,导致安装失败的可能。
联系方式
欢迎加入钉钉群联系我们,钉钉群号:11721331,钉钉群二维码如下图所示: