OpenVSCode云端IDE加入Rainbond一体化开发体系

OpenVSCode 是一款基于Web 界面的在线IDE 代码编辑器,只需要PC端存在浏览器即可使用,更轻量,高效,简洁,其基础功能完全继承了微软出品的 VS Code ,可以通过安装扩展的方式继续加强代码编辑能力。Rainbond 开源应用商店推出的 OpenVSCode 预安装了 gitlab-workflow 扩展用于对接私有化代码仓库 Gitlab,同时预装了常见语言运行环境(目前版本集成了Golang , Node.js , python , java ),可以在 Terminal 终端中快速调试业务代码。

Rainbond 有能力快速搭建一体化开发环境,通过对接代码仓库 webhook 机制,完成业务从代码开始,到最终上线的全流程。通过纳入 OpenVSCode 云端 IDE,可以将 Rainbond 一体化开发体系全部托管于云端,开发人员只需要一个浏览器,即可完成代码从编辑到上线的全流程。

OpenVSCode云端IDE加入Rainbond一体化开发体系_第1张图片

为了实现上述的目标,本文会按照操作顺序逐次讲解:

  • 一键安装 OpenVSCode 和 Gitlab
借助 Rainbond 内置的开源应用商店,一键安装 OpenVSCode 和 Gitlab ,是搭建一体化开发体系最快捷的方式。
  • OpenVSCode 对接 Gitlab
借助 OpenVSCode 自带的扩展机制,完成与 Gitlab 的对接,可以获取 Gitlab 中的代码仓库。
  • 编码与调试
在 OpenVSCode 的帮助下,基于浏览器完成各种有关编码与调试的高级操作。
  • Gitlab 对接 Rainbond
通过 Oauth2.0 协议打通 Rainbond 与 Gitlab,方便地将 Gitlab 中的项目部署到 Rainbond 中去,并自动配置 Webhook 。
  • 代码提交触发自动构建
验证整个场景的效果,从 OpenVSCode 提交代码后,完成 Rainbond 上部署项目的自动发布上线。

一键安装 OpenVScode 和 Gitlab

一体化开发体系中所引用的 OpenVSCode 和 Gitlab 都已经加入 Rainbond 开源应用商店,供用户一键安装部署。

在开源应用商店中搜索,点击安装即可一键部署 Gitlab 应用,注意选择 14.8.2 版本:

OpenVSCode云端IDE加入Rainbond一体化开发体系_第2张图片

在开源应用商店中搜索,点击安装即可一键部署 OpenVSCode 应用,目前提供 1.64.2 版本:

OpenVSCode云端IDE加入Rainbond一体化开发体系_第3张图片

整体拓扑:

OpenVSCode云端IDE加入Rainbond一体化开发体系_第4张图片


OpenVSCode 对接 Gitlab

Rainbond 提供的 OpenVSCode 默认集成了 Gitlab-workflow 扩展,该扩展为 OpenVSCode 提供了对接 Gitlab 代码仓库的能力,开发人员可以直接查看 Gitlab 中托管的代码仓库,并一键克隆到工作空间中。

  • OpenVSCode对接Gitlab仓库

    • 通过对接代码仓库,可以更加快速的拉取,提交代码,并且可以通过IDE进行代码的调试功能
    • 填写 Gitlab 对应的 URL(如果是平台部署的 Gitlab 则为http访问的域名) 以及 token即可

    OpenVSCode云端IDE加入Rainbond一体化开发体系_第5张图片

    • 对接成功以后,可以直接克隆仓库代码在终端进行编码、调试、推送等功能。

    OpenVSCode云端IDE加入Rainbond一体化开发体系_第6张图片

  • Gitlab 获取 Token

    • 在GitLab中,单击右上角并选择“首选项”在左侧边栏中。选择访问令牌,然后选择“添加个人访问令牌”
    • 权限:api , read_user

编码与调试

完成 OpenVSCode 和 Gitlab 的对接后,就可以直接读取 Gitlab 中的项目进行克隆操作。

OpenVSCode云端IDE加入Rainbond一体化开发体系_第7张图片

根据开发语言的不同,可以在线安装各种开发语言的扩展,提升编辑代码的便利性。

OpenVSCode云端IDE加入Rainbond一体化开发体系_第8张图片

编辑代码的体验和本地 IDE 并无二致。

OpenVSCode云端IDE加入Rainbond一体化开发体系_第9张图片

打开 Terminal 之后,可以在命令行界面进行操作,OpenVSCode 默认集成了 maven 构建工具,方便构建 Jar 包进行测试。

OpenVSCode云端IDE加入Rainbond一体化开发体系_第10张图片

构建完成后的下一步,可以直接在 Terminal 中启动项目。

OpenVSCode云端IDE加入Rainbond一体化开发体系_第11张图片

被调试的项目启动后监听 5000 端口,开发人员只需要为 OpenVSCode 开启 5000 端口的对外服务,即可访问到调试中的服务了。

OpenVSCode云端IDE加入Rainbond一体化开发体系_第12张图片


Gitlab 对接 Rainbond

完成编码与调试后,开发人员的业务进入了部署阶段。为了使整个流程的自动化程度更高,开发人员可以将 Gitlab 和 Rainbond 打通。

Gitlab 与 Rainbond 之间能够利用 Oauth2 协议打通单点登录流程,方便用户在 Rainbond 界面内直接选择 gitlab 中的仓库进行代码的部署,并自动配置 webhook,完成代码 commit 之后的自动构建。

配置以及使用方法参见以往文章:

GitLab和Rainbond整合实现一体化开发环境

完成 Gitlab 与 Rainbond 的对接后,可以在 Rainbond 界面中选择 Gitlab 中的项目进行部署。

OpenVSCode云端IDE加入Rainbond一体化开发体系_第13张图片

打开是否开启自动构建的开关,可以自动配置 Gitlab 的 Webhook ,Gitlab 一旦接收到指定的推送信息,就会触发 Rainbond 对当前服务组件的自动构建。

OpenVSCode云端IDE加入Rainbond一体化开发体系_第14张图片


代码提交触发自动构建

修改项目文件提交时 Commit 信息添加关键字 @deploy ,提交成功以后,rainbond会自动触发自动构建。

OpenVSCode云端IDE加入Rainbond一体化开发体系_第15张图片

自动更新效果展示

OpenVSCode云端IDE加入Rainbond一体化开发体系_第16张图片

加入 Rainbond 社区一起讨论

Github:https://github.com/goodrain/r...

官网:https://www.rainbond.com

微信群:关注 Rainbond 公众号加入技术交流群

钉钉群:请搜索钉钉群号 31096419

你可能感兴趣的:(OpenVSCode云端IDE加入Rainbond一体化开发体系)