1、提出问题
访问页面使用的是：http://localhost:9001
实际开发中，会有不同的环境：
开发环境：自己的电脑
测试环境：提供给测试人员使用的环境
预发布环境：数据是和生成环境的数据一致，运行最新的项目代码进去测试
生产环境：项目最终发布上线的环境
如果不同环境使用不同的ip去访问，可能会出现一些问题。为了保证所有环境的一致，我们会在各种环境下都使用域名来访问。
那么，当我们在浏览器输入一个域名时，浏览器是如何找到对应服务的ip和端口的呢？
2、域名解析
一个域名一定会被解析为一个或多个ip。这一般会包含两步：
本地域名解析
浏览器会首先在本机的hosts文件中查找域名映射的IP地址，如果查找到就返回IP ，没找到则进行域名服务器解析，一般本地解析都会失败，因为默认这个文件是空的。
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.test.net
1
2
3
4
域名服务器解析
本地解析失败，才会进行域名服务器解析，域名服务器就是网络中的一台计算机，里面记录了所有注册备案的域名和ip映射关系，一般只要域名是正确的，并且备案通过，一定能找到。
3、解决域名解析问题
我们不可能去购买一个域名，因此我们可以伪造本地的hosts文件，实现对域名的解析。修改本地的host为：
127.0.0.1 api.enjoyment.com
127.0.0.1 manage.enjoyment.com
1
2
这样就实现了域名的关系映射了。
ping一下域名试试是否畅通：
4、nginx解决端口问题
nginx可以作为web服务器，但更多的时候，我们把它作为网关，因为它具备网关必备的功能：
反向代理
负载均衡
动态路由
请求过滤
4.1 nginx作为web服务器
Web服务器分2类：
web应用服务器，如：
tomcat
resin
jetty
web服务器，如：
Apache 服务器
Nginx
IIS
区分：web服务器不能解析jsp等页面，只能处理js、css、html等静态资源。
并发：web服务器的并发能力远高于web应用服务器。
Nginx + tomcat
4.2 nginx作为反向代理
什么是反向代理？
代理：通过客户机的配置，实现让一台服务器代理客户机，客户的所有请求都交给代理服务器处理。
反向代理：用一台服务器，代理真实服务器，用户访问时，不再是访问真实服务器，而是代理服务器。
nginx可以当做反向代理服务器来使用：
我们需要提前在nginx中配置好反向代理的规则，不同的请求，交给不同的真实服务器处理
当请求到达nginx，nginx会根据已经定义的规则进行请求的转发，从而实现路由功能
使用，nginx（windows解压版本）可以通过命令行来启动，操作命令：
启动：start nginx.exe
停止：nginx.exe -s stop
重新加载：nginx.exe -s reload
完整配置
#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;
#nginx中的每个server就是一个反向代理配置，可以有多个server
server {
listen 80; #监听端口
server_name manage.enjoyment.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请求映射规则，/ 代表一切请求路径
location / {
proxy_pass http://127.0.0.1:9001; # 代理转发，所有manage.enjoyment.com和80访问的请求，都会被转发到http://127.0.0.1:9001处理
proxy_connect_timeout 600;
proxy_read_timeout 600;
}
}
server {
listen 80;
server_name api.enjoyment.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 /api/upload {
proxy_pass http://127.0.0.1:8082;
proxy_connect_timeout 600;
proxy_read_timeout 600;
rewrite "^/api/(.*)$" /$1 break;
}
location / {
proxy_pass http://127.0.0.1:10010;
proxy_connect_timeout 600;
proxy_read_timeout 600;
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
首先，我们映射路径是/api/upload，而下面一个映射路径是 / ，根据最长路径匹配原则，/api/upload优先级更高。也就是说，凡是以/api/upload开头的路径，都会被第一个配置处理
proxy_pass：反向代理，这次我们代理到8082端口，也就是upload-service服务
rewrite "^/api/(.*)$" /$1 break，路径重写：
"^/api/(.*)$"：匹配路径的正则表达式，用了分组语法，把/api/以后的所有部分当做1组
/$1：重写的目标路径，这里用$1引用前面正则表达式匹配到的分组（组编号从1开始），即/api/后面的所有。这样新的路径就是除去/api/以外的所有，就达到了去除/api前缀的目的
break：指令，常用的有2个，分别是：last、break
last：重写路径结束后，将得到的路径重新进行一次路径匹配
break：重写路径结束后，不再重新匹配路径。
我们这里不能选择last，否则以新的路径/upload/image来匹配，就不会被正确的匹配到8082端口了
5、测试
启动ng
inx，然后用域名访问后台管理系统：
请求流程如下：
浏览器准备发起请求，访问http://mamage.enjoyment.com，但需要进行域名解析
优先进行本地域名解析，因为我们修改了hosts，所以解析成功，得到地址：127.0.0.1
请求被发往解析得到的ip，并且默认使用80端口：http://127.0.0.1:80
本机的nginx一直监听80端口，因此捕获这个请求
nginx中配置了反向代理规则，将manage.enjoyment.com代理到127.0.0.1:9001，因此请求被转发
后台系统的webpack server监听的端口是9001，得到请求并处理，完成后将响应返回到nginx
nginx将得到的结果返回到浏览器
————————————————
版权声明：本文为CSDN博主「jackaroo2020」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq3399013670/article/details/100971283