如何把自己的网站用域名访问，把127.0.0.1:8080改成manage.leyou.com

一、先把localhost替换成manager.leyou.com

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

有没有什么问题？

 

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

• 开发环境：自己的电脑

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

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

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

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

我们将使用以下域名：

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

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

• 网关域名：api.leyou.com

• ...

但是最终，我们希望这些域名指向的还是我们本机的某个端口。

那么，当我们在浏览器输入一个域名时，浏览器是如何找到对应服务的ip和端口的呢？

修改本地的host为(文件地址为： C:\Windows\System32\drivers\etc )：

127.0.0.1 manage.leyou.com

 

这时候：http://localhost:9001/#/index/dashboard

localhost已经被替代成了manage.leyou.com，下面我们把9001这个端口号，通过nginx代理进行处理。

二、使用nginx解决端口问题

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

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

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

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

• 反向代理

• 负载均衡

• 动态路由

• 请求过滤

 找到nginx.conf文件，添加：

    server {
        listen       80;
        server_name  manager.leyou.com;

        proxy_set_header X-Forwarded-Host $host;
		proxy_set_header X-Forwarded-Server $host;
		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
		
		location / {
			proxy_pass http://127.0.0.1:9001;
			proxy_connect_timeout 600;
			proxy_read_timeout 600;
		}
    }

解释一下：

 

启动服务器：

 

现在看一下运行效果：

中间过程的解释：

 

1. 浏览器准备发起请求，访问http://mamage.leyou.com，但需要进行域名解析

2. 优先进行本地域名解析，因为我们修改了hosts，所以解析成功，得到地址：127.0.0.1

3. 请求被发往解析得到的ip，并且默认使用80端口：http://127.0.0.1:80

   本机的nginx一直监听80端口，因此捕获这个请求

4. nginx中配置了反向代理规则，将manage.leyou.com代理到127.0.0.1:9001，因此请求被转发

5. 后台系统的webpack server监听的端口是9001，得到请求并处理，完成后将响应返回到nginx

6. nginx将得到的结果返回到浏览器