前端实现本地路由代理

写在前面

  这个标题比较拗口，摸不着头脑，因为我找不到恰当的语言描述。说白了就是当你使用域名访问百度首页时，实际上访问的是本地运行的前端项目A。

需求背景

  在关于微信公众号授权、支付的业务开发中，本地调试很麻烦，因为微信回跳的地址是写死的测试地址，并不是本地项目运行地址。所以在调试问题时，只能将改好但是不确定有没有效的代码发布到测试环境，然后在测试环境上验证修改效果。过程很麻烦，并且经常需要多次发布、修改的流程。如果微信回跳的地址被拦截，直接指向本地的项目地址，那就省了大功夫了。

  基于这个需求，使用DNS拦截 + Nginx 反向代理可以完成本地调试微信公众号业务。

相关概念

1. DNS解析

     我们使用浏览器访问网站的时候，通常输入的是网站的域名，例如www.baidu.com。因为域名符合人的思考逻辑，容易记忆。但是对于机器而言，它们更熟悉的是数字。实际上，域名需要经过一层翻译，转化为网站的 ip 地址，才能继续被浏览器访问。将域名翻译成ip地址的过程，我们叫做 DNS 解析。

     要做到域名与IP地址的一对一匹配，那么久必须维护一张映射表，并且这张表是动态的，因为很可能域名换掉了。所以采取的方案的多级查询，浏览器缓存 => 操作系统缓存 => DNS服务器。

2. 正向代理和反向代理

     在 web 开发中，常见的架构是客户端  => 服务端，那么在客户端和服务端这两个实体之间，再增加一个服务器，作为”中介“，那么这个中介就是代理服务器。

     代理的目的就是隐藏一方的真实信息，看隐藏的是哪一方，叫做不同的代理方式。

     正向代理，也就是客户端代理。它是客户端主动将请求转向代理服务器，然后由代理服务器进行与服务端的沟通。这样一来，服务端并不知道客户端的真实身份，具体使用如翻墙软件。

     反向代理，也就是服务端代理。客户端向服务端发送请求，目标服务器并不进行请求的处理，而是根据情况将请求转发给其他服务器进行处理。这样一来，客户端不知道真正处理请求的服务器是哪个，常用与负载均衡，CDN。

   参考文章：正向代理和反向代理的区别

操作步骤

1. 新增本地 DNS 解析，指定域名解析到本地ip(127.0.0.1)

     这里需要更改计算机中的 hosts 文件，hosts文件是一个用于储存计算机网络中各节点信息的计算机文件。这个文件负责将主机名映射到相应的IP地址。hosts文件通常用于补充或取代网络中DNS的功能。和DNS不同的是，计算机的用户可以直接对hosts文件进行控制。

     如下图所示，我在上面添加了一行域名映射，将业务域名映射到本机的ip：127.0.0.1。这意味着当我在浏览器里输入https://www.baidu.com的时候，经过DNS解析，这个域名实际上指向我本地，而不是百度的服务器。

这里提供两种修改 hosts 文件的方法：

• 文件复制—修改—替换

• 命令行使用 vim 直接修改（推荐）

2. 启动Nginx。Nginx启动后，会监听127.0.0.1的主机，也就是本地。

3. 然后在 nginx.conf 中配置路径监听，指定路由中包含某个地址时，将程序转发到本地运行的其他项目中。

   nginx.conf 的文件路径为/usr/local/etc/nginx/nginx.conf

nginx 操作命令

// 打开nginx
nginx
// 重启nginx
nginx -s reload
// 关闭nginx
nginx -s stop

一些疑问

1. 为什么需要修改 hosts 文件，不能直接使用 nginx 进行代理吗？

   hosts 是用于本地 DNS 解析的，到这里 http 访问请求还存在电脑内部，没有跑出去。只有在这种前提下，才能将浏览器的访问网址转发到本地运行的前端项目。

   此外，nginx 是只能监听运行 nginx 程序的主机上面的端口的。如果不修改 hosts 文件，那么DNS解析直接把域名解析成外面服务器的 ip，根本就不会被本地的 nginx 拦截到。

   所以，当 hosts 文件修改之后。本地对于指定域名的访问会被转发到本地 127.0.0.1 这台计算机上，然后本地启动的 nginx 服务可以监听到域名访问这个动作，进一步根据静态资源路径，指向不同的前端项目。

2. nginx 的代理配置为什么要在监听 80 端口的对象中书写？

   对于 http 访问，只要不写端口，那么默认就是 80 端口。那么对于 nginx 的转发代理配置就只需要写在 80 端口下面就行了。但是 https，是默认 443 端口的。