浏览器会首先在本机的hosts文件中查找域名映射的IP地址,如果查找到就返回IP ,没找到则进行域名服务器解析,一般本地解析都会失败,因为默认这个文件是空的。
Windows下的hosts文件地址:C:/Windows/System32/drivers/etc/hosts
Linux下的hosts文件所在路径: /etc/hosts
MacOS下的hosts文件地址:/etc/hosts
样式:
# My hosts 127.0.0.1 localhost
域名服务器解析
本地解析失败,才会进行域名服务器解析,域名服务器就是网络中的一台计算机,里面记录了所有注册备案的域名和ip映射关系,一般只要域名是正确的,并且备案通过,一定能找到。
3.3.解决域名解析问题我们不可能去购买一个域名,因此我们可以伪造本地的hosts文件,实现对域名的解析。修改本地的host为:
127.0.0.1 api.leyou.com 127.0.0.1 manage.leyou.com这样就实现了域名的关系映射了。
每次在C盘寻找hosts文件并修改是非常麻烦的,给大家推荐一个快捷修改host的工具,在课前资料中可以找到:
解压,运行exe文件,效果:
我们添加了两个映射关系(中间用空格隔开):
127.0.0.1 api.leyou.com :我们的网关Zuul
127.0.0.1 manage.leyou.com:我们的后台系统地址
现在,ping一下域名试试是否畅通:
OK!
通过域名访问:
原因:我们配置了项目访问的路径,虽然manage.leyou.com映射的ip也是127.0.0.1,但是webpack会验证host是否符合配置。
在webpack.dev.conf.js中取消host验证:disableHostCheck: true
重新执行npm run dev,刷新浏览器:
OK!
3.4.nginx解决端口问题域名问题解决了,但是现在要访问后台页面,还得自己加上端口::9001。
这就不够优雅了。我们希望的是直接域名访问:。这种情况下端口默认是80,如何才能把请求转移到9001端口呢?
这里就要用到反向代理工具:Nginx
3.4.1.什么是NginxNginx是一个高性能的Web和反向代理服务器,它具有很多非常优越的特性: