使用Surge for Mac已有两周，今日写下一路以来的感受，并给后来的小伙伴填坑铺路。如果想看Surge for iOS教程，请继续Google，本人认为iOS下用小火箭足以。需要强调的是，Surge只是一款网络工具，支持多种网络协议，但本身并不提供出墙功能，需要自己搞定ss账号，可以直接从ss提供商购买，或是自己购买VPS搭建ss服务。

先放大招：

[前端攻城狮]可能是使用Mac Surge性价比最高的职业！

为什么？
因为前端攻城狮：懂编程，懂正则，要抓包，爱折腾，更需要科学上网！

早就听闻Surge的大名，由于其高昂的价格，一直将其拒之门外。直到看到池大大这篇文章 Surge for Mac 快捷如风,我动心了。于是第二天在公司里众筹买了Mega License，当天也是各种忙，到了周末在家一顿鼓捣。

Google了一晚上，找到的文章，大部分讲的是Surge for iOS或者Surge for mac 1.x，我看的莫名其妙。其中几篇提供了配置文件模板，但大都讲的不清不楚。
当天晚上我是一头雾水，困觉去了。真是应了其中一篇文章所说，Surge的使用，确实需要门槛。

第二天不死心，继续折腾，回顾了所有看过的文章，并结合我当前的Surge版本的面貌，终于成功折腾出了一个能科学上网的ss配置。随后就一发不可收，哇擦咧，此乃神器也！

接下来进入正题。官方称Surge是一款网络调试工具，而大部分人用它当梯子，两者都没错。

梯子：于我而言，当今前端界，风起云涌，新技术层出不穷，不用Google怎能张罗的过来？而对于互联网工作者，则同样需要更广阔的资源。在此之前一直用小灰机, 但它的配置文件维护起来略微力不从心。蓝灯？算了。。。
网络调试工具：作为移动端开发者，抓包调接口是家常便饭，而对于移动web开发者则更加有意义。因为我们可以通过设置客户端代理，将静态资源代理到本地，调试线上应用，内个feel倍儿爽~如果是调试单页应用，就更省心了。

接下来，我们一个个搞定。

梯子

这个算是刚需。

打开Surge
首次打开，会让我们选择配置文件存储位置，推荐选择『Store in User Documents』，Surge会在文稿目录下创建带有示例配置的Surge目录。选择存储在 iCloud Drive 似乎是个更好的方案，但是 Surge 并没有成功创建文件目录，不知道是否是软件的 bug(摘自上面那篇文章，我自己也是在这里卡了好一会儿)。
点开状态栏上的Surge菜单，选择『Set as System Proxy』,顾名思义Surge成为系统代理，几乎所有http(s)请求都会被拦截，但shell的网络请求并不会被拦截（下文再说如何让shell也出墙）

翻山越岭我最终选择了AbcLite的这个配置作为基础，进行定制。已上传至 github。
复制其内容并保存到~/Documents/Surge目录下，比如my-surge.conf.重点来了,请看：

[Proxy]
   🇭🇰 HK = custom,${ss-server host},${ss-server port},${ss encrypt type},${ss-password},https://github.com/stoneChen/Surge-config/raw/master/SSEncrypt.module
   🇸🇬 SG = custom,${ss-server host},${ss-server port},${ss encrypt type},${ss-password},https://github.com/stoneChen/Surge-config/raw/master/SSEncrypt.module
   🇯🇵 JP = custom,${ss-server host},${ss-server port},${ss encrypt type},${ss-password},https://github.com/stoneChen/Surge-config/raw/master/SSEncrypt.module
   🇺🇸 US = custom,${ss-server host},${ss-server port},${ss encrypt type},${ss-password},https://github.com/stoneChen/Surge-config/raw/master/SSEncrypt.module
   🇰🇷 KR = custom,${ss-server host},${ss-server port},${ss encrypt type},${ss-password},https://github.com/stoneChen/Surge-config/raw/master/SSEncrypt.module
   
[Proxy Group]
 Proxy = select,🇭🇰 HK,🇸🇬 SG,🇯🇵 JP,🇺🇸 US,🇰🇷 KR

[Proxy]是具体的代理配置，它下面就是5个ss服务器节点, 这里只是5个国家例子，根据你拥有的ss账号数来决定，拥有几个账号就留下其中几个对应国旗配置就好。表面上看就是5个键值对(键可以自定义)，键中加上国旗可以很直观的区分不同国家的ss节点，值中的变量分别表示：

ss-server host: ss主机，ip或域名
ss-server port: ss主机端口
ss encrypt type: 加密方式
ss-password: ss密码

custom不能改，是一个约定类型(ss协议)，最末一项是ss模块下载地址，也不需要改,当选择了当前配置所在的配置文件，Surge会去下载ss模块，有弹窗提示。
[Proxy Group]是一个组策略配置，它的某一项配置可以引用[Proxy]中的配置，也可以引用其他的组策略配置。这里有select, url-test, ssid三种策略可以用，具体请阅读example-chinese.conf中的注释。
简单讲：

select：在菜单上手动选择ss节点
url-test：定时轮询向指定的地址发起请求，哪个节点响应时间最短，则切换到哪个ss节点
ssid：根据wifi名字进行切换ss节点

ss配置完毕后，保存。然后点击状态栏中的Surge,选择 Switch Configuration , 右侧会出现~/Documents/Surge下的配置文件列表，选择刚刚的my-surge.conf.
上个图：

然后就是见证奇迹的时刻~
打开浏览器: http://www.google.cn/ 肥车~
外面的世界很精彩~

使用Surge Dashboard

左上角有四个tab：

Recent: 最近的网络请求
Active: 未完成的网络请求
DNS: DNS解析记录
Proxy: GUI方式的规则配置

左边Local Clients是发出请求的应用列表，点击相应的应用，右侧会过滤掉其他应用发出的请求.点击表格区的某一条请求记录，底部会显示这条请求的详细信息。

右上角分别是偏好设置，保存，关键字过滤.
这算是体现了Surge的网络调试功能了。

网络规则设置

有5种匹配规则：

DOMAIN: 基于域名
DOMAIN-SUFFIX: 基于域名后缀
DOMAIN-KEYWORD: 基于域名关键字
IP-CIDR: 基于”无类别域间路由”，具体我也不懂啥意思，大概就是基于IP段
GEOIP: 表示IP所属区域，有CN(中国),US(美国)等值

匹配规则后，可以对匹配的请求作出三种处理

DIRECT
REJECT
${某个自定义策略}

举个栗子：

DOMAIN-SUFFIX, *.google.com,Proxy # 所有以google.com结尾的请求，都走Proxy代理
DOMAIN,xyz.cn,DIRECT # xyz.cn的请求，都走直连
DOMAIN-KEYWORD, advertise,REJECT # 所有域名中带advertise的请求，都拒绝
IP-CIDR,61.160.200.252/32,REJECT # 屏蔽61.160.200.252这个ip
GEOIP,CN,DIRECT # 国内IP都走直连

广告屏蔽

这个是Surge的特色之一，只要匹配规则，就可以直接拒绝网络请求，从而阻止广告。
基于上面的例子，我们继续扩展：

DOMAIN-KEYWORD, advertise,REJECT
DOMAIN-SUFFIX,stat.tudou.com,REJECT
DOMAIN-SUFFIX,stat.youku.com,REJECT      
DOMAIN-SUFFIX,strip.taobaocdn.com,REJECT

看懂了么？偷偷告诉你，视频广告也可以屏蔽奥~(亲测youku，tudou有效)
如果在以后的上网过程中，你遇到了『漏网』的广告，打开你的Surge配置文件，添加相应的配置，就可以干掉它了，世界就变得清静多了。

让shell也能出墙

默认情况下，shell不会被代理，我们需要设置shell环境变量，将代理服务指向Surge的端口。
将以下代码复制到~/.zshrc的底部

proxy=http://127.0.0.1:6152
export http_proxy=$proxy
export https_proxy=$proxy
export ftp_proxy=$proxy

什么？你还没有用oh-my-zsh? 我不跟你玩了。

代理转发网络请求

这个功能，基于URL Rewrite配置实现，简单讲，就是写正则。举个栗子：

1 2	[URL Rewrite] ^http://a.net/m/(.*) http://b.net:9999/m/$1

意思就是，所有以http://a.net/m/开头的url全部代理到http://b.net:9999/m/下(注意中间的空格)。
用代码解释就是：

1 2	let regStr = new RegExp('^http://a.net/m/(.*)') let proxyUrl = url.replace(regStr, 'http://b.net:9999/m/$1')

当有请求匹配该规则，就会被代理转发，在Surge Dashboard上会看到代理后的记录.

规则可以设置多条。

这样写，默认是header模式，客户端不会感知到当前请求被代理了。上面配置的等价写法是：

1	^http://a.net/m/(.*) http://b.net:9999/m/$1 header

还有一种模式是302重定向，客户端是可感知的,302模式这样写：

1	^http://aaa.com http://bbb.cn 302

这样http://aaa.com就被重定向到http://bbb.cn了。

如此一来，只要你正则玩的溜，各种代理转发随你翻转~
有时候，通过域名规则过滤广告太暴力，有时候只是想屏蔽指定域名下个别请求，那么URL Rewrite就能实现，针对不想看到的东西，撸一个正则，转发到不可响应的地址即可(比如loclahost)。

连接移动设备代理转发请求

用过charles的童鞋会知道, 它也是一种网络调试工具，我们平常用的最多的就是代理静态资源。
其实单单对网络调试而言，charles足够了。但自从有了Surge，科学上网+网络调试就可以合体了~

起初，我并不确定Surge支持这样的功能，但理论上应该是支持的，于是按照我自己的想法，像使用charles一样使用Surge：

打开手机设置，将代理指向Surge默认的6152端口，然后用微信随意打开一张网页，发现迟迟加载不出来，我瞬间懵逼了。。。
Surge你作为一款所谓的神器，这点功能都不支持吗？！

我不甘心，于是上知乎，开了个问题，咨询Surge作者。令我惊喜的是，作者当天下午就回复我了，详见 surge for MAC 不支持像Charles那样的http代理吗？

原来答案如此简单，想想自己本该想到的囧。然后兴奋的把监听ip设置为0.0.0.0，手机连上代理，打开网页，搞定！再一看Dashboard，有记录了！

现在，连接上Surge代理，就能够查看手机上的请求和响应数据包了！那如何实现url代理转发呢？其实就是上一小节中的URL Rewrite，这些规则配置适用于所有被Surge接管的请求。

如此一来，charles最常用的功能，Surge也具备了，一般情况下就不需要开启charles去调试移动设备的开发了，完美！

Host设置

这个配置不仅包含了本机的/etc/hosts功能，而且还提供了 泛解析 和别名支持，相当好用。
举个栗子：

[Host]
# 这个是泛解析,a.test.com  b.test.com 等通通指向 192.168.1.100
*.test.com = 192.168.1.100
# 这个是别名设置，c.me  d.me 等通通指向localhost
*.me = localhost

与1password的冲突

最近，一个小伙伴发现，开启了Surge后，1password就无法正常工作了，问了下我的情况。我当天一切正常，谁知第二天我也出现了同样的问题,网页上按填充快捷键无反应，点击chrome插件，出现了这个：

该小伙伴翻山越岭，最终的解决方案是，将配置文件中的skip-proxy添加127.0.0.1这条记录就好了，上述的配置文件已经解决了这个问题。

小结

Surge无疑是很强大的，称之为『神器』不为过，其价格导致很多人望而却步，但长久来看，我觉得它还是值得入手的。目前我只发掘了这么多用法，还没有充分发挥。其实Surge for mac是由Surge for iOS发展而来，但我毕竟平时工作大都在mac上，手机上大多时间都在微信上，对于我个人来说，用在mac上意义更大。于是我在手机上选择了Shadowrocket这个后起之秀，只要6RMB,性价比高的多，而且可复用Surge配置文件。

注意：规则配置过多会导致响应变慢，请定制最适合自己的配置~

PS:小灰机并没有被我彻底抛弃,它的『从屏幕上扫描二维码』功能倒是给了我一个小小的惊喜- -