017 使用域名访问本地项目

1.统一环境

我们现在访问页面使用的是：http://localhost:9001

 

实际开发中，会有不同的环境：

 

• 开发环境：自己的电脑

• 测试环境：提供给测试人员使用的环境

• 预发布环境：数据是和生成环境的数据一致，运行最新的项目代码进去测试

• 生产环境：项目最终发布上线的环境

 

如果不同环境使用不同的ip去访问，可能会出现一些问题。为了保证所有环境的一致，我们会在各种环境下都使用域名来访问。

我们将使用以下域名：

• 主域名是：www.leyou.com，leyou.com

• 管理系统域名：manage.leyou.com

• 网关域名：api.leyou.com

2.域名解析

 

一个域名一定会被解析为一个或多个ip。这一般会包含两步：

(1)本地域名解析

浏览器会首先在本机的hosts文件中查找域名映射的IP地址，如果查找到就返回IP ，没找到则进行域名服务器解析，一般本地解析都会失败，因为默认这个文件是空的。

• Windows下的hosts文件地址：C:/Windows/System32/drivers/etc/hosts

• Linux下的hosts文件所在路径： /etc/hosts

样式：

# My hosts
127.0.0.1 localhost

(2)域名服务器解析

本地解析失败，才会进行域名服务器解析，域名服务器就是网络中的一台计算机，里面记录了所有注册备案的域名和ip映射关系，一般只要域名是正确的，并且备案通过，一定能找到。

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：我们的后台系统地址

通过域名访问：

原因：我们配置了项目访问的路径，虽然manage.leyou.com映射的ip也是127.0.0.1，但是webpack会验证host是否符合配置。

在webpack.dev.conf.js中取消host验证：disableHostCheck: true

 

在terminal控制台中重新执行npm run dev，刷新浏览器：

 4.nginx解决端口问题

 

域名问题解决了，但是现在要访问后台页面，还得自己加上端口：http://manage.leyou.com:9001/。

 

这就不够优雅了。我们希望的是直接域名访问：http://manage.leyou.com。这种情况下端口默认是80，如何才能把请求转移到9001端口呢？

 

这里就要用到反向代理工具：Nginx

(1)Nginx 概述

 

nginx可以作为web服务器，但更多的时候，我们把它作为网关，因为它具备网关必备的功能：

• 反向代理

• 负载均衡

• 动态路由

• 请求过滤

(2)nginx作为web服务器

Web服务器分2类：

• web应用服务器，如：tomcat、resin、jetty

• web服务器，如：Apache 服务器、Nginx、IIS

区分：web服务器不能解析jsp等页面，只能处理js、css、html等静态资源。 并发：web服务器的并发能力远高于web应用服务器。

 (3)nginx作为反向代理

什么是反向代理？

• 代理：通过客户机的配置，实现让一台服务器代理客户机，客户的所有请求都交给代理服务器处理。

• 反向代理：用一台服务器，代理真实服务器，用户访问时，不再是访问真实服务器，而是代理服务器。

nginx可以当做反向代理服务器来使用：

• 我们需要提前在nginx中配置好反向代理的规则，不同的请求，交给不同的真实服务器处理

• 当请求到达nginx，nginx会根据已经定义的规则进行请求的转发，从而实现路由功能

利用反向代理，就可以解决我们前面所说的端口问题，如图