nginx_反向代理实现使用域名访问本地项目

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值