使用nginx 用线上前端页面调试后台接口

做为一名后台开发人员，你在开发调试中是否遇到过以下的问题：

测试人员在测试环境测出问题，提出一个缺陷，第一时间找到你，而你不知道是什么问题，需要去定位，而常规的操作是看日志，有些情况根据日志是不能够准确定位到问题，你想去复现，询问了测试人员的操作流程，但是还是需要前端配合你在本地进入还原情景，当然不排除远程调试程序(利用现有线上前端页面，在本地调试服务器代码，不在讨论范畴)。

如果你遇到过上面的问题，你会考虑到下面情况

1.当测试人员发现问题，一般情况都是先让后台人员定位问题（前端问题，还是后台接口问题）

2.你去还原情景时，前端请假不在岗，前端可能在忙，前端改了代码目前不能与你调试，或者不愿意开个地址给你访问。

3.自己部署一套前端到自己的电脑上，指向自己电脑ip,进行定位问题，用这种方式电脑可以会卡（内存不够），要开一个浏览器，sql工具，shell连接工具,QQ，代码编写工具，word文档等。

4.自己使用 http 请求工具（postman、curl、fetch、charles、fildder、jmeter、atools 等接口调用工具，这里不一一列举了）进行模拟，这种方式在参数比较多，参数又可能需要加密的情况就比较繁琐。

5.远程调试程序，这需要代码上加断点，开放端口等，有一些风险（这也是一种可行的方式）

6.使用代理工具（也是一种可行的方式）

7.其它方案。。。

 

如果你有同样的困惑，下面我分享自己解决这种问题的小技巧。

 

准备工作

如标题，既然有nginx ,你当然需要电脑上安装过nginx服务

windows window nginx 安装 

苹果电脑  brew install nginx    (homebrew)

第一步

安装好之后，我们打开nginx安装位置找一个nginx.conf 文件 打开 找到server ,在上面加 均衡 ，server 和 均衡 里面按下面规则写

 

upstream oms{
       server 127.0.0.1:8080;//你后台的ip，及后台端口
       server 192.168.132.233:12000 backup;//服务器地址，及端口
}
server {
	listen       12000; //你的前端访问端口
        server_name  localhost;//本电脑地址
        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location ~ /oms/api/xx/.* {// ~ 你后台的上下文的前缀 + .*
            proxy_pass http://oms;//引用上面的 oms 均衡
            proxy_set_header Host $host:$proxy_port;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }

	    location / {//这里写 /
            proxy_pass http://192.168.132.233:12000;//其它不是你后台的请求转出
            proxy_set_header Host $host:$proxy_port;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }
}

第二步

启动nginx 服务

输入域名为 localhost 访问你的线上前端服务，页面可以正常访问 (可以到第三步)

第三步

使用域名定向到本地

写一个你喜欢的域名，例 abc.com oms.com qqq.com kkk.cn

window 修改 hosts文件 让这个域名指向 127.0.0.1

mac 用switchhost 让这个域名指向 127.0.0.1

例 127.0.0.1 oms.com

启动你的后台项目，在指定接口位置打上断点，输入oms.com + 第二步listen 的端口 访问前端页面，能进入页面所调用的接口的断点。

 

总结：

这个方式可以让你在想调试时，只需要启动后台项目就能排查问题，关了后台项目则访问原来的服务器（是不是十分方便呢？）。