从无到有搭建一个电商项目（七）：域名端口问题（host+nginx）

使用域名访问本地项目

1、统一环境
我们现在访问页面使用的是：http://localhost:9001
实际开发中，会有不同的环境：

• 开发环境：自己的电脑
• 测试环境：提供给测试人员使用的环境
• 预发布环境：数据是和生成环境的数据一致，运行最新的项目代码进去测试
• 生产环境：项目最终发布上线的环境

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

• 主域名是：www.venom.com，
• 管理系统域名：manage.venom.com
• 网关域名：api.venom.com
• …

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

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

• 本地域名解析
  浏览器会首先在本机的hosts文件中查找域名映射的IP地址，如果查找到就返回IP ，没找到则进行域名服务器解析，一般本地解析都会失败，因为默认这个文件是空的。
  Windows下的hosts文件地址：C:/Windows/System32/drivers/etc/hosts
  Linux下的hosts文件所在路径： /etc/hosts
• 域名服务器解析
  本地解析失败，才会进行域名服务器解析，域名服务器就是网络中的一台计算机，里面记录了所有注册备案的域名和ip映射关系，一般只要域名是正确的，并且备案通过，一定能找到。

3、解决域名解析问题
我们使用SwitchHosts工具来修改host

我们添加了两个映射关系（中间用空格隔开）：

• 127.0.0.1 api.venom.com ：我们的网关Zuul
• 127.0.0.1 manage.venom.com：我们的后台系统地址

ping一下域名试试是否畅通：

通过域名访问：出现 Invalid Host header
原因：我们配置了项目访问的路径，虽然manage.venom.com映射的ip也是127.0.0.1，但是webpack会验证host是否符合配置。
我们修改下：

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

重启项目：npm start，ok

Nginx

1、什么是Nginx
Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器，并在一个BSD-like 协议下发行。其特点是占有内存少，并发能力强。
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会根据已经定义的规则进行请求的转发，从而实现路由功能
4、安装和使用
下载地址：http://nginx.org/en/download.html
nginx直接解压即可，绿色免安装
目录结构：

1. conf：配置目录
2. contrib：第三方依赖
3. html：默认的静态资源目录，类似于tomcat的webapps
4. logs：日志目录
5. nginx.exe：启动程序，可双击运行

5、nginx反向代理解决端口问题
上面我们解决了域名问题，但是端口没解决，我们希望可以直接使用域名访问，端口默认80，如何处理呢？
反向代理工具：Nginx
反向代理配置
nginx中的每个server就是一个反向代理配置，可以有多个server

    gzip  on;
      
    server {
        listen       80;
        server_name  manage.venom.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;
	}
    }

    server {
        listen       80;
        server_name  api.venom.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:10010;		
		proxy_connect_timeout 600;
		proxy_read_timeout 600;
	}
    }

使用
nginx可以通过命令行来启动，操作命令：

• 启动：start nginx.exe
• 停止：nginx.exe -s stop
• 重新加载：nginx.exe -s reload

启动过程会闪烁一下，启动成功后，任务管理器中会有两个nginx进程

最终实现了域名访问网站，中间的流程是怎样的，我们来总结下：

1. 浏览器准备发起请求，访问http://mamage.venom.com，但需要进行域名解析
2. 优先进行本地域名解析，因为我们修改了hosts，所以解析成功，得到地址：127.0.0.1
3. 请求被发往解析得到的ip，并且默认使用80端口：http://127.0.0.1:80
   本机的nginx一直监听80端口，因此捕获这个请求
4. nginx中配置了反向代理规则，将manage.venom.com代理到127.0.0.1:9001，因此请求被转发
5. 后台系统的webpack server监听的端口是9001，得到请求并处理，完成后将响应返回到nginx
6. nginx将得到的结果返回到浏览器