使用 WebIDE 三分钟上手函数计算-阿里云开发者社区

开发者社区> 木香丘> 正文

使用 WebIDE 三分钟上手函数计算

简介: 背景 为了解决函数计算本地环境差异和配置繁琐的问题,在此背景下,就有了我们的 WebIDE 产品,WebIDE 能让函数的开发、测试和部署更加流畅,降低了函数计算的学习成本和缩短了函数的开发周期。 介绍 WebIDE 是一个基于 H5 支持多语言的集成开发环境。
+关注继续查看

背景

为了解决函数计算本地环境差异和配置繁琐的问题,在此背景下,就有了我们的 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 模板,内置了函数计算运行,调试和发布工具。

效果图:

image

使用

1. WebIDE 打开方式

直接在浏览器中输入网址 https://ide.fc.aliyun.com

2. 选择 Region

WebIDE页面打开后,会提示需要先选择一个 Region,目前只有一个杭州可以选择。如下图所示:

image

3. 创建主机(Host)

主机(Host),目前支持将您本机作为 Host,用于托管您的代码以及连接 Host 上起的 Teminal,所以创建主机流程,就是要在您的机器上执行一个命令安装 ide-agent 来达到效果。

  1. 点击 Hosts 视图的 “+” 号,创建一个 主机(Host),复制对话框中的命令,在本机命令行终端中执行。
  2. 执行成功后,命令会输出提示信息,其中会提示将路径 /Users/kevin/.ide_home/bin 添加到 PATH
    /Users/kevin/.ide_home/bin 是我本地路径,您们的路径会和我有点不一样,以您们看到的为准,正确添加到 PATH 后,方可执行 ide start 命令,不然会报命令找不到错误。
  3. 接下来,在本地命令行终端运行命令 ide start 启动 ide-agent 服务,此时,在 WebIDE 界面上,可以看到主机图标变成了绿色(绿色图标表示主机是在线的,灰色表示主机离线)。
  4. 回到 WebIDE 界面,点击对话框 OK 或者点击 Hosts 视图的刷新按钮,就可以看到您新注册的主机。

注意:

主机(Host),目前支持将您本机作为 Host,用于托管您的代码以及连接 Host 上起的 Teminal,所以创建主机流程,就是要在您的机器上执行一个命令安装 ide-agent 来达到效果。

  1. 点击 Hosts 视图的 “+” 号,创建一个 主机(Host),复制对话框中的命令,在本机命令行终端中执行。
  2. 执行成功后,命令会输出提示信息,其中会提示将路径 /Users/kevin/.ide_home/bin 添加 PATH/Users/kevin/.ide_home/bin 是我本地路径,您们的路径会和我有点不一样,以您们看到的为准,正确添加到 PATH 后,方可执行 ide start 命令,不然会报命令找不到错误(window 系统下路径会有差异,以控制台输出的内容为主)。
  3. 接下来,在本地命令行终端运行命令 ide start 启动 ide-agent 服务,此时,在 WebIDE 界面上,可以看到主机图标变成了绿色(绿色图标表示主机是在线的,灰色表示主机离线)。
  4. 回到 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。

如下图所示:

image

4. 创建工作空间(Workspace)

工作空间(Workspace),主机上可以创建多个工作空间。点击 Workspaces 视图的 “+” 号,创建一个工作空间(Workspace),在 WebIDE 界面上,绿色图标表示主机是在线的,灰色表示主机离线。如下图所以:

image

5. 打开工作空间

两种方式:

  • 在 Workspaces 的视图中,双击(右键菜单)打开在线的工作空间(绿色图标)
  • 在 Files 的视图中,点击 “Open Workspace” 按钮,通过工作空间对话框来打开在线的工作空间
    打开后如下图所示:

image

6. 创建函数

如下图所示:

image

根据函数创建向导一步一步创建函数,创建完成后,如下图:

image

7. 部署函数

由于权限原因,目前只提供通过 Terminal 中的 fun 工具来部署函数,Terminal 的环境中已经预置了 fun 和 fcli 工具,可以很方便的使用。使用 fun 工具之前,需要为 fun 工具配置的 AK,可以通过如下命令:

fun config

配置完后,通过 fun 的部署命令来部署函数,命令如下:

fun deploy

如下图所示:

image

8. 运行函数

  • 打开运行界面
  • 点击 “Run” 按钮运行函数
打开运行界面

image

点击 “Run” 按钮运行函数

image

小结

通过以上几个步骤,我们就完成了函数计算的开发、部署和运行。预置的 fun 和 fcli 工具,开箱即用,避免了因为安装 fun 和 fcli 所带来的学习成本,也防止了因为用户本地环境差异,导致安装失败的可能。

联系方式

欢迎加入钉钉群联系我们,钉钉群号:11721331,钉钉群二维码如下图所示:

image

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
如何在函数计算中使用 Node.js 处理 multipart 文件上传请求
## 前言 web 开发中我们经常会允许用户通过 HTTP POST 请求上传文档到服务器,如何使用函数计算来做文件上传服务呢?下面我们使用 nodejs 来实现一个文件上传的案例: 我们知道浏览器中上传文档通常会使用 `multipart` `form-data` 来多文件同时上传文件。 例如,我们可以使用curl来做这个测试模拟上传两个文件: `test.txt` 和 `inde
1601 0
如何在函数计算中使用 Node.js 处理 multipart 文件上传请求
web 开发中我们经常会允许用户通过 HTTP POST 请求上传文档到服务器,本文将介绍在函数计算中基于 node.js 使用 multipart form-data 来实现文件上传服务。
2707 0
Web Worker 使用教程
JavaScript 语言采用的是单线程模型,也就是说,所有任务只能在一个线程上完成,一次只能做一件事。前面的任务没做完,后面的任务只能等着。随着电脑计算能力的增强,尤其是多核 CPU 的出现,单线程带来很大的不便,无法充分发挥计算机的计算能力。
3233 0
从零开始学 Web 之 JavaScript(三)函数
大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程。此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注。在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。
1202 0
Loadrunner中web_find和web_reg_find函数的使用与区别
总结一下Loadrunner中的检查点函数,主要介绍两个函数:web_find()和web_reg_find();这两个函数均用于内容的查找,但两者也有本质的区别,具体介绍如下:一、web_find()函数该函数的作用是“从HTML页面中查找指定的文本字符串”常用参数及含义如下: 1 web_...
887 0
Gradle中使用idea插件的一些实践
如果你的项目使用了Gradle作为构建工具,那么你一定要使用Gradle来自动生成IDE的项目文件,无需再手动的将源代码导入到你的IDE中去了。 如果你使用的是eclipse,可以在build.gradle中加入这么一行. 1 apply plugin: 'eclipse' 然后在命令行中输入gradle eclipse就可以生成eclipse的项目文件,直接使用eclipse打开生成的项目文件即可。
1222 0
秘籍:使用函数计算珍藏你喜爱的文章
使用函数计算珍藏你喜爱的文章 1. 背景 对于喜欢阅读博客的程序员来说,是不是常常堆满 tab 标签,密密麻麻的连标题都看不清?不舍得关掉,却又抽不出来时间阅读?又或者阅读过了,想收藏起来供日后查阅? 对这些文章来说,onenote、印象笔记等笔记类软件着实不是一个好的去处。
1841 0
28、深入理解计算机系统笔记,Web服务器简介
1、Web服务器以两种不同的方式向客户端提供内容: 1)静态内容(static content):从服务器磁盘取得文件并把它返回客户端来服务。 2)动态内容(dynamic content):运行一个可执行文件,并把它的输出返回给客户端。
592 0
+关注
16
文章
0
问答
来源圈子
更多
专注Serverless、微服务、函数计算等
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载