nginx解决使用域名访问项目

我们现在访问页面使用的是：http://localhost:9001
有没有什么问题？

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

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

如果不同环境使用不同的ip去访问，可能会出现一些问题。为了保证所有环境的一致，我们会在各种环境下都使用域名来访问。
步骤一：先在本机的hosts文件上加上域名：

• Windows下的hosts文件地址：C:/Windows/System32/drivers/etc/hosts
• Linux下的hosts文件所在路径： /etc/hosts
• 样式：

# My hosts
127.0.0.1 localhost
0.0.0.0 account.jetbrains.com
127.0.0.1 www.xmind.net

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

在hosts文件添加后可以通过ping测试一些，是否能联通了
本人再hosts里添加的是：api.leyou.com，ping测试如下：

现在域名是可以连通的，但是还要处理端口，计算机默认都是访问80端口的，但是我的端口是9001，所以浏览器访问还是api.leyou.com:9001，这时候就是nginx用上的时候了
步骤二 ：使用解决端口隐藏
下载nginx地址是：http://nginx.org/en/download.html
下载解压即可使用

使用

nginx可以通过命令行来启动，自行cd到解压的目录下执行命令，操作命令：

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

反向代理配置

配置是去conf文件下找到nginx.conf在里面配置的
示例：

nginx中的每个server就是一个反向代理配置，可以有多个server

我的完整配置：

#user  nobody;
worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
   
    keepalive_timeout  65;

    gzip  on;
	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://127.0.0.1:9001;
			proxy_connect_timeout 600;
			proxy_read_timeout 600;
        }
    }
	server {
        listen       80;
        server_name  api.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:10010;
			proxy_connect_timeout 600;
			proxy_read_timeout 600;
        }
    }
}

原理解释：比如我访问mamage.leyou.com

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将得到的结果返回到浏览器