使用 whistle 替代本地 nginx/webpack 服务
加入鹅厂之后,我发现团队都在用一款叫做 Whistle 的工具,起初我以为这只是一款类似 Fiddler/Charles 的普通货色。然鹅,发现下面这两种用法之后,我把自己的膝盖摘下来献给了制作这款工具的大佬。
如果你还没用过 whistle,没关系。只需两步:
第一步,Node.js 环境下全局安装
npm i -g whistle
并启动 whistlew2 start
第二步,给 Chrome 浏览器装个 SwitchyOmega 的插件,添加一个将所有请求转发到 127.0.0.1:8899 的代理配置。如下图所示(Bypass List 部分也记得清掉)
环境准备好之后,我们开始进入今天的姿势,看 whistle 是如何取代本地 hosts 和 web server 的。
1、搭建静态资源 server
打开 whistle 管理后台 http://127.0.0.1:8899 ,在左侧导航的 Rules 面板写入一条规则:
# 规则:自定义域名或URL<空格>本地目录路径 (以下示例请替换为自己本地的写法)
my.demo/bw/ file:///Users/kaiye/Projects/Demo/002-black-white/
再用浏览器打开 http://my.demo/bw/ 的网址。Bingo!一个自定义域名的静态资源服务器搭建成功!
是不是比 nginx 配置简单一丢丢?如果安装了 whistle 的证书,还能直接支持 HTTPS!
2、动态 server 转发
如果我们把上例中的本地路径替换成一个本地服务端口,例如 webpack devServer 的端口。那么就可以实现本地带端口号的 host 配置功能,同时还能告别复杂的 devServer/nginx rewrite 配置:
// webpack.config.js 配置传统手艺
module.exports = {
//...
devServer: {
proxy: {
'/api': {
target: ''https://other-server.example.com'',
pathRewrite: {'^/api' : ''}
}
}
}
};
假设本地 webpack 服务端口号为 8080,whistle 的配置规则示例如下:
# 任意域名绑定到本地任意服务
https://my.demo/ 127.0.0.1:8080
# 重写该域名的后端接口路径到线上服务地址
https://my.demo/api/ https://backend.example.com/api/
# 或直接转发到局域网某台机器的具体端口
https://my.demo/api2/ http://127.0.0.1:3000
接下来就可以打开 https://my.demo/ 像调试线上环境一样开发本地环境了。你还可以将 whistle 部署到局域网服务器,用来搭建一个多人协作的测试环境(也就是 nohost 解决方案)。
whistle 是一款免费且强大的抓包工具,除了本文提到的静态 server 和服务转发功能以外,还提供了大量内置协议用于支持 request/respond 动态修改与注入、websocket 调试、API mock 等功能,借助 whistle plugin 插件生态,不仅能获得极佳的移动端调试体验,还能满足各式各样的调试需求。更多 whistle 介绍,请访问 whistle 官网。
如果你有关于环境搭建的问题和建议,欢迎留言交流,也可以关注公众号「猫哥学前班」的「网络编程连载系列」。
使用 whistle 替代本地 nginx/webpack 服务的更多相关文章
- Linux实战教学笔记37:企业级Nginx Web服务优化实战(上)
一,Nginx基本安全优化 1.1 调整参数隐藏Nginx软件版本号信息 一般来说,软件的漏洞都和版本有关,这个很像汽车的缺陷,同一批次的要有问题就都有问题,别的批次可能就都是好的.因此,我们应尽量隐 ...
- 2-4、nginx特性及基础概念-nginx web服务配置详解
Nginx Nginx:engine X 调用了libevent:高性能的网络库 epoll():基于事件驱动event的网络库文件 Nginx的特性: 模块化设计.较好扩展性(不支持模块动态装卸载, ...
- whistle替代Fiddler调试远程服务器代码使用教程
前沿 之前在window下开发的同学大部分都是使用Fiddler代理工具做远程调试,自从换了Mac后也想找个代替工具调试,查询了下大概都比较推荐两款:Charles 和 Whistle .不过Char ...
- iOS 直播推流 - 搭建基于RTMP的本地Nginx服务器
前端时间,公司要调研直播相关的内容,特地花时间进行了一番调研. 本篇将记录其中的推流篇-本地推理播放测试. 关于Nginx: 配置Nginx以支持HLS.RTMP的推流与拉流,iOS系统使用LFLiv ...
- Linux实战教学笔记38:企业级Nginx Web服务优化实战(下)
四,Nginx站点目录及文件URL访问控制 4.1 根据扩展名限制程序和文件访问 Web2.0时代,绝大多数网站都是以用户为中心多的,例如:bbs,blog,sns产品,这几个产品都有一个共同特点,就 ...
- Nginx网站服务 配置
Nginx网站服务 配置 1.编译安装Nginx服务 2.认识Nginx服务的主配置文件nginx.conf 3.访问状态统计配置 4.基于授权的访问控制 5.基于客户端的访问控制 6.基于域名的Ng ...
- nginx Windows服务形式运行
背景 现在使用ngnix的人越来越多,nginx的优势劣势网上也很多说明.这里就不探讨nginx优势与劣势,每个工具都有自己优势劣势,没有最好的工具,只有最合适的工具. 如何选择适当的工具,根据项 ...
- 为苹果ATS和微信小程序搭建 Nginx + HTTPS 服务
昨天测试开发微信小程序,才发现微信也要求用HTTPS加密数据,想来是由于之前苹果的ATS审核政策的缘故吧,微信想在苹果上开放小程序必然也只能要求开发者必须使用HTTPS了,于是在服务器上测试安装Ngi ...
- 八.nginx网站服务实践应用
期中集群架构-第八章-期中架构nginx章节====================================================================== 01. web ...
随机推荐
- Hibernate Validator 6.0.9.Final - JSR 380 Reference Implementation: Reference Guide
Preface Validating data is a common task that occurs throughout all application layers, from the pre ...
- 阿里云oss挂载到linux本地文件系统
对象存储 OSS 阿里云对象存储服务 (OSS) 是一种高度可伸缩且安全可靠的云对象存储服务,让您可以存储.备份和归档大量数据.阿里云 OSS 是一种简单易用的服务,让您每秒能处理数百万请求,它还支持 ...
- 最简单易懂的SpringCloudSleuth教程
事务mapjvm 大佬对下面的说法是否同意呢 能否比较下zipkin,pinpoint,以及skywalking.该如何选型 回答: 他们都提供了分布式服务跟踪的能力,pinpoint以及skywal ...
- javascript 原型机制
prototype,__proto__,constructor 在 JavaScript 原型继承结构里面,规范中用 [[Prototype]] 表示对象隐式的原型,在 JavaScript 中用 _ ...
- lsb_release -a 查询Linux系统版本
LSB是Linux Standard Base的缩写,lsb_release命令用来显示LSB和特定版本的相关信息.如果使用该命令时不带参数,则默认加上-v参数.-v, --version显示版本信息 ...
- CopyOnWriteArrayList简介
CopyOnWriteArrayList,写数组的拷贝,支持高效率并发且是线程安全的,读操作无锁的ArrayList.所有可变操作都是通过对底层数组进行一次新的复制来实现. CopyOnWriteAr ...
- 不吹不擂,你想要的Python面试都在这里了【315+道题】
写在前面 近日恰逢老男孩全栈8期毕业季,课程后期大家“期待+苦逼”的时刻莫过于每天早上内容回顾和面试题问答部分[临近毕业每天课前用40-60分钟对之前内容回顾.提问和补充,专挑班里不爱说话就的同学回答 ...
- [Poi2014]FarmCraft 树状dp
对于每个点,处理出走完其子树所需要的时间和其子树完全下载完软件的时间 易证,对于每个点的所有子节点,一定优先选择差值大的来给后面的时间 树规+贪心. #include<cstdio> #i ...
- Python基础语法 系统学习
Python 中的基础语法最大的特点就是优雅和简洁.入门学习Python的难度相比较其他语言也比较小. 我个人比较推荐以下三个学习方式(根据个人情况和喜好,可选择任意一个): 1. 菜鸟在线:出品的 ...
- iOS 8 中如何集成 Touch ID 功能
2013年9月,苹果为当时发布的最新iPhone产品配备了一系列硬件升级方案.在iPhone 5s当中,最具创新特性的机制无疑要数围绕Home按钮设计的超薄金属圈,也就是被称为Touch ID的指纹传 ...