proxy代理

在项目开发中，一般情况是可以localhost调试。但是遇到以下的情况，我们只能通过测试环境/正式环境进行调试，为了更好的定位问题，我们需要把测试/正式环境连到自己本地的代码进行断点（也就是代理）。

测试/线上环境有问题，本地没毛病
需要用到域名的开发，比如H5里面微信授权登录

零、之前的解决方案

之前是通过修改服务器上nginx的配置，利用反向转发ssh -vnNT -R，把测试/线上的代码打到自己本地进行联调，主要配置如下：

服务器上的nginx配置反向转发（放开下面#注释掉的三行配置）

server {
    listen       80;
    server_name h5-user-dev.gmtech.top;

    location / {
        root /home/work/www/fe/proprietor_h5/dist;
        proxy_set_header Host $host;
        index  index.html;
        try_files $uri $uri/ /index.html;

        location = /index.html {
            add_header Cache-Control "no-cache, no-store";
        }
    }

   #location ~ {
   #   proxy_pass http://127.0.0.1:7688;
   #}
}

然后在本地终端里连接（192.168.238.178为服务器ip，需要输入服务器root账户的密码）
1
ssh -vnNT -R 7688:localhost:8001 root@192.168.238.178

此方法配置倒是很方便，不论是http还是https的访问，都打到了自己的机器上。但是，有两个很突出的弊端：

只能同时到一个开发者的本地机器，如果多人同时开发就不适用了
由于本地代码处于开发阶段，极其不稳定，测试同学没办法同时进行测试了

自然而然，我们想到的是本地进行代理，此处需要分两种场景：chrome上开发后台系统和微信开发者工具上开发H5

chrome上开发后台系统：要在chrome上进行代理挺简单，直接在”扩展程序”里安装代理插件，最常见的比如Simple Proxy，然后配置xxx.xxx.com代理到本地的开发环境127.0.0.1:8000（但是此方法不能配置https）
微信开发者工具开发H5：很遗憾，微信开发者工具不支持安装扩展程序；但是网上搜索说可以用Charles的Map Route，准备一试，打开Charles，然后发现开发者工具里的请求根本不走Charles，至此，放弃

** 到此，总结下：如果不用之前的解决方案反向转发，则chrome上可以通过插件进行代理，但是不支持https；微信开发者工具上没办法代理。

一、较完美的解决方案

思考：我们要实现的效果是本地访问网站的时候（不管事chrome还是微信开发者工具）走代理，其他人访问还是正常走服务器。

既然我们是拦截自己电脑，那么我们可以用系统的hosts，然而，系统的hosts代理没办法指定本地的端口，而且本地还没有https。

那接下来的问题就是处理本地代理支持端口（nginx反向代理）和https（自制证书并信任）。

二、实操

1、本地配置hosts

不建议直接修改系统 /etc/hosts 文件，下载 SwitchHosts，添加配置并开启：

1 2	127.0.0.1 h5-user-test.gmtech.top 127.0.0.1 h5-user-dev.gmtech.top

2、本地安装并启动nginx

安装nginx：https://www.cnblogs.com/yy136/p/12690225.html
设置开机自启动：https://www.cnblogs.com/kamback/p/8989822.html

配置nginx：

server {
    listen       80;
    server_name  h5-user-dev.gmtech.top;

    location / {
	    proxy_pass http://127.0.0.1:8001;
    }
}

有了以上两步，我们就可以通过代理访问测试/线上环境的http了，此时，如果访问https，还是走不通，会出现下面报错；

3、mac自制证书

参考：https://www.cnblogs.com/will-space/p/11913744.html

生成根密钥
1
openssl genrsa -out cakey.pem 2048

生成根CA证书

1	openssl req -x509 -new -key cakey.pem -out cacert.pem -days 3650

创建证书请求

1 2	openssl genrsa -out http.key 2048 openssl req -new -key http.key -out http.csr

附加用途
此步不可忽略，如果不加，在chrome里会报不能识别证书通用名称的错：NET::ERR_CERT_COMMON_NAME_INVALID

新建http.ext

keyUsage = nonRepudiation, digitalSignature, keyEncipherment
extendedKeyUsage = serverAuth, clientAuth
subjectAltName=@SubjectAlternativeName

[ SubjectAlternativeName ]
DNS.1=*.gmtech.top
DNS.2=xxx.xxx.com

签发证书

1	openssl x509 -req -in http.csr -CA cacert.pem -CAkey cakey.pem -CAcreateserial -out http.crt -days 3650 -sha256 -extfile http.ext

至此，会生成http.crt和http.key两个文件，我们将之配置到本地nginx配置里面：

server {
    listen       80;
    listen	 443 ssl;
    server_name  h5-user-dev.gmtech.top;

    ssl_certificate      /usr/local/etc/nginx/crt/http.crt;
    ssl_certificate_key  /usr/local/etc/nginx/crt/http.key;

    location / {
    	proxy_pass http://127.0.0.1:8001;
    }
}