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 和 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 应用，目前提供 1.64.2 版本：

整体拓扑：

OpenVSCode 对接 Gitlab

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

• OpenVSCode 对接 Gitlab 仓库

  通过对接代码仓库，可以更加快速的拉取，提交代码，并且可以通过 IDE 进行代码的调试功能

  填写 Gitlab 对应的 URL（如果是平台部署的 Gitlab 则为 http 访问的域名） 以及 token 即可

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

• 
  

• Gitlab 获取 Token

  在 GitLab 中，单击右上角并选择“首选项”在左侧边栏中。选择访问令牌，然后选择“添加个人访问令牌”

  权限：api , read_user

编码与调试

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

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

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

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

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

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

Gitlab 对接 Rainbond

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

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

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

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

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

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

代码提交触发自动构建

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

自动更新效果展示

「加入 Rainbond 社区一起讨论」

Github：https://github.com/goodrain/rainbond

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

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

钉钉群：请搜索钉钉群号 31096419