点击上方蓝色“程序猿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页面配置。

3. 1. 在Add Proxy页签通用配置。

   2. 1. Name：HTTP Proxy配置的名称，例如：ACT系统测试。

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

      3. （可选）Header：添加的HTTP或者HTTPS协议的头部内容。

      4. （可选）Parameter：添加的请求参数内容，回车即可换行。

      5. （可选）Cookie：添加Cookie内容。

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

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

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

   3. （可选）Access-Control-Allow-Origin：跨域访问开关，默认开启。当请求需要进行跨域转发时，可开启该开关。

   4. 单击OK

6. 在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 代码优化魔鬼细节

扫一扫，关注我

一起学习，一起进步