乐优商城项目总结——03统一环境（nginx反向代理）

使用域名访问

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

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

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

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

域名解析

一个穷学生，我也不会买域名，只好本地伪造了。

方法：
进入本地c盘
C:\Windows\System32\drivers\etc 这个目录下修改host文件

	192.168.209.128   manage.leyou.com
	192.168.209.128   www.leyou.com
	192.168.209.128   api.leyou.com
	192.168.209.128   image.leyou.com

在文件最下面加上这些，因为我的nginx部署在虚拟机，所以192.168.209.128是我本地虚拟机的地址，可以改成自己的。

nginx做反向代理

虽然域名解决了，但是现在如果我们要访问，还得自己加上端口：http://manage.leyou.com:9001。
我们希望的是直接域名访问：http://manage.leyou.com。这种情况下端口默认是80，如何才能把请求转移到9001端口呢？

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

nginx介绍：

什么是反向代理？

• 代理：通过客户机的配置，实现让一台服务器代理客户机，客户的所有请求都交给代理服务器处理。
• 反向代理：用一台服务器，代理真实服务器，用户访问时，不再是访问真实服务器，而是代理服务器。

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

• 我们需要提前在nginx中配置好反向代理的规则，不同的请求，交给不同的真实服务器处理
• 当请求到达nginx，nginx会根据已经定义的规则进行请求的转发，从而实现路由功能

本地具体实现流程：
注意：图中第3步骤我的应该是192.168.209.128，地址是自己的地址

1. 浏览器准备发起请求，访问http://mamage.leyou.com，但需要进行域名解析
2. 优先进行本地域名解析，因为我们修改了hosts，所以解析成功，得到地址：192.168.209.128
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将得到的结果返回到浏览器

具体安装nginx到linux细节不讲了，我用的是centOS6.5。
等安装以后需要配置nginx，贴的是nginx最后的配置：

server {
        listen       80;
        server_name  www.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 /item {
        # 先找本地，这里是商品详情额静态页的相关配置
        root html;
        if (!-f $request_filename) { #请求的文件不存在，就反向代理
            proxy_pass http://192.168.209.1:8084;
            break;
        }
    }
		

        location / {
			proxy_pass http://192.168.209.1:9002;
			proxy_connect_timeout 600;
			proxy_read_timeout 600;
        }
    }

server {
        listen    9001;
        server_name  manage.leyou.com;
        location / {
			proxy_pass http://192.168.209.1:9001;
        }
    }

server {
        listen       80;
        server_name  manage.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://192.168.209.1:9001;
			proxy_connect_timeout 600;
			proxy_read_timeout 600;
        }
    }
	server {
        listen       80;
        server_name  api.leyou.com;
		
			# 上传路径的映射（上传文件的相关配置）
		location /api/upload {	
			rewrite "^/(.*)$" /zuul/$1; 
        }

        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;
		proxy_set_header Host $host;

        location / {
			proxy_pass http://192.168.209.1:10010;
			proxy_connect_timeout 600;
			proxy_read_timeout 600;
        }
    }
	server {
        listen       80;
        server_name  image.leyou.com;

    	# 监听域名中带有group的，交给FastDFS模块处理
        location ~/group([0-9])/ {
            ngx_fastdfs_module;
        }
		
        location / {
            root   /leyou/static/;
            index  index.html index.htm;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
#上面自己写的

因为是在虚拟机里面配置的nginx，所以leyou-manage-web需要写成这样
把host改成0.0.0.0 这样任何ip就都能访问了，不然虚拟机访问不了leyou-manage-web的9001服务。

    //下面是原本的
    // host: 'localhost', // can be overwritten by process.env.HOST
    // Various Dev Server settings
    host: '0.0.0.0', // can be overwritten by process.env.HOST

环境也处理好，该写业务代码了。