用了这个 IDE 插件,5分钟解决前后端联调!

点击上方蓝色“程序猿DD”,选择“设为星标”

回复“资源”获取独家整理的学习资料!

作者 | 李海庆

我是一个 Web 开发前端工程师,受到疫情影响,今天是我在家办公的第78天。开发了两周,今天就要开始前后端联调了。由于是远程办公,前后端联调没有在公司那么方便……

我遇到了这样 1 个问题

我们项目组的研发配比是一个前端对多个后端,后端并发开发,到跟前端联调的时候转为并行,几个后端同学都针对自己的服务都做了一个不同的服务部署,因为还没有到大家把代码最终合并,并且放到一个服务地址让前端联调的阶段,作为前端的我只能疯狂的、不停的切换代理……

2 个不太满意的解决方案

  • 方法 1:

利用现有的代理工具,比如 Charles,PostMan。chrome插件SwitchyOmega等,PostMan,SwitchyOmega更适合后端模拟发起请求测试自己的接口, Charles 比较全面,可以用来抓包,也可以用来做代理调试,但是配置起来相对复杂。或者熟悉 nginx 的同学可以用nginx做代理实现,但对于新手而言以上这些方式实现可调通代理的成本还是太高了。

  • 方法 2 :

设定多个代理配置,对应不同开发环境的时候进行切换,不过需要重新启动项目,还得自己写逻辑判断具体环境的差别。

这两个方法,对于我来说并不是最优解。如果在这种频繁出现的问题上,用那么多的时间进行代理配置,那真的绝望……

5分钟解决问题

我请教了一个阿里的前端大神,他推荐了 VScode 上的 Cloud Toolkit 插件(在 Marketplace 上直接搜索安装),Alibaba Cloud Toolkit 有一个 HTTP Proxy 代理功能,可以提供的以 HTTP 协议为主且在本地启动的正向代理服务器,帮助完成业务请求的代理转发。

常见的使用场景包括:

  • 隔离代码与环境,简化业务调试。Alibaba Cloud Toolkit 的 HTTP Proxy功能无需修改代码,便可将业务代码与环境隔离,将复杂的业务调试请求简化管理,大幅度提高了测试效率。

  • 一键切换不同代理配置 。在测试环境的代码中通常会添加通过代理进行请求转发的配置,但在产品发布时需要删除该配置,甚至涉及多套测试环境,致使本地测试再次启用比较繁琐。Alibaba Cloud Toolkit的HTTP Proxy功能支持保存历史的HTTP Proxy配置,即开即用,大幅度提升了测试环境复用率,降低资源成本。

  • 接入简洁,无需安装Nginx和Charles等代理工具,只需在Visual Studio Code中搜索Alibaba Cloud Toolkit插件并嵌入,就可实现前后端联调。

官网地址:https://cn.aliyun.com/product/cloudtoolkit

操作步骤

  1. 在Visual Studio Code左侧菜单栏中单击Alibaba Cloud Toolkit入口图标并展开TOOLKIT > HTTP Proxy

  1. HTTP Proxy View页签单击Add Proxy

  2. Add Proxy页面配置。

    1. Add Proxy页签通用配置。

      1. Name:HTTP Proxy配置的名称,例如:ACT系统测试。

      2. Target Server:需要代理的目标服务器,例如:http://aliyun.com 说明 支持HTTP和HTTPS两种网络协议。

      3. (可选)Header:添加的HTTP或者HTTPS协议的头部内容。

      4. (可选)Parameter:添加的请求参数内容,回车即可换行。

      5. (可选)Cookie:添加Cookie内容。

  3. Advanced进行监听端口、跳转机和跨域访问等高级配置。

    1. 监听端口:本地代理的访问端口,即代码访问的本地代理的端口;默认端口为18002,如果出现端口冲突,那么请修改此参数。

    2. (可选Agent Server:Agent服务器的IP地址。如果目标服务器必须通过域名访问,且每次需要修改Hosts文件,那么该设置项为域名所对应的IP地址。

    3. (可选)Access-Control-Allow-Origin:跨域访问开关,默认开启。当请求需要进行跨域转发时,可开启该开关。

    4. 单击OK

  4. HTTP Proxy View页签中的代理列表中,单击Actions列的开关开启代理功能。

HTTP Proxy配置启动后,可以单击Copy便捷的获取代理地址,进而进行访问。

说明 如果不需要使用该代理配置时,关闭HTTP Proxy开关,再次使用时开启开关就行了。

补充信息

  • 如果需要修改HTTP Proxy的配置信息,在HTTP Proxy View页面单击代理列表的Actions列中的Properties,并依据界面提示进行修改。

  • 如果需要删除创建的HTTP Proxy,在HTTP Proxy View页面单击代理列表的Actions列中的Remove

一键部署插件 Cloud Toolkit

大家可以在各个IDE(IntelliJ,Goland,PyCharm,Eclipse,Visual Studio Code)搜索“Alibaba Cloud Toolkit”,即可安装。

相比传统的开发和部署模式,Cloud Toolkit 的所有能力均采用了嵌入到本地IDE的创新方式,这样能够最大限度的减少开发者在不同工具间切换的成本。在开发和部署这个环节上,Cloud Toolkit能够将原本每次7-8分钟的繁琐工作,大大缩短到20秒内,开发者可以非常方便的在IDE内,一键完成应用程序的部署工作。关于传统方案和Cloud Toolkit方案的对比,如下图所示:

此外,Cloud Toolkit还提供了大量云原生开发过程中的提效工具,还包括一些常用的功能,比如:

  • 本地 IDE 内项目一键部署到任意远程服务器

  • 本地 IDE 内项目一键部署到任意Kubernetes

  • 本地 IDE 内项目一键打包并推送Docker镜像到阿里云镜像仓库

  • 本地 IDE 内项目一键部署到阿里云ECS、EDAS、SAE 、Web+、小程序云和ACK

  • 内置 Terminal 终端

  • 文件上传器

  • 查看远程服务器运行时日志

  • 阿里云小程序开发工具

  • 阿里云函数计算开发工具

  • 内置 SQL 执行器

  • Apache Dubbo 和 Spring Cloud 框架项目模板&代码生成

  • 远程 Java 程序运行时诊断工具

  • 微服务远程调试

接下来,将从 “本地 IDE 内项目一键部署到任意远程服务器”为例,展开来介绍 Cloud Toolkit 如何通过创新的方法帮助开发者提升效率。

第一步:添加服务器

如上图所示,在菜单

Tools - Alibaba Cloud - Alibaba Cloud View - Host中打开机器视图界面,如下图:

点击右上角Add Host按钮,出现添加机器界面

第二步:开始部署

在 IntelliJ IDEA 中,鼠标右键项目工程名,在出现的菜单中点击Alibaba Cloud - Deploy to Host...之后,会出现如下所示部署窗口:

在 Deploy to Host 对话框设置部署参数,然后单击 Deploy,即可执行初次部署。

注:部署参数说明 File:部署文件的构建方式包含3种方式,分别是: 

Maven Build:如果当前工程采用 Maven 构建,可以使用 Cloud Toolkit 直接构建并部署。 

Gradle Build:如果当前工程采用 Gradle 构建,可以使用 Cloud Toolkit 直接构建并部署。 

Upload File:如果当前工程并非采用 Maven 或 Gradle 构建,并且本地已经存在打包好的部署文件,可以选择并直接上传本地的部署文件。 

Target Host:选择要部署的目标服务器。 

Target Directory :输入在服务器上的部署路径,如 /root/tomcat/webapps。 

After Deploy:输入应用启动命令,如 sh /root/restart.sh。表示在完成应用包的部署后,需要执行的命令 —— 对于 Java 程序而言,通常是一句 Tomcat 的启动命令。

往期推荐

Uber 开源 Piranha,可自动删除过时代码

大厂的 404 页面都长啥样?最后一个绝了...

如何快速让你的站点进入灰白哀悼模式?

这四个问题场景你会排查原因吗?

盘点:35 个 Java 代码优化魔鬼细节

扫一扫,关注我

一起学习,一起进步

©️2020 CSDN 皮肤主题: 像素格子 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值