【测试开发】知识点-配置 Nginx 解决多端口访问

简介: 【测试开发】知识点-配置 Nginx 解决多端口访问

目前项目下多个模块各自有着不同的端口号,前端进行访问的时候就有问题了。


1268169-20211219115940583-1927498582.png


用的是 vue-admin-template后台的前端框架,这里配置后端访问地址的时候如果我指定了 8202,那么8201的服务接口就访问不了。


为了提供统一的 api 接口,所以使用nginx作为反向代理服务器。


一、Nginx 介绍


反向代理,其实客户端对代理是无感知的。


因为客户端不需要任何配置就可以访问,我们只需要将请求发送到反向代理服务器,由反向代理服务器去选择目标服务器获取数据后再返回给客户端。


此时反向代理服务器和目标服务器对外就是一个服务器,暴露的是代理服务器地址,隐藏了真实服务器IP地址。


更多相关介绍,可以参考我之前的一篇分享:【Nginx 快速入门】反向代理、负载均衡、动静分离


二、Nginx 配置文件


我本机上之前装过win版的 nginx,找到配置文件所在,打开在里面修改相关规则即可。


1268169-20211219221222861-2123992917.png


修改配置:


server {
        listen       9001;
        server_name  localhost;
    location ~ /hsop/ {
      proxy_pass http://localhost:8201;
    }
    location ~ /cmn/ {
      proxy_pass http://localhost:8202;
    }
    }


  • listen:9001 表示 Nginx 对外的端口号,最后都要通过这个端口进行Nginx的访问
  • server_name:主机名称,我这里是本地


下面的就是规则,比如location ~ /hsop/,就是当访问路径中存在/hsop/,就转发到http://localhost:8201。这里的~表示一种正则匹配。


然后在 cmd 中启动一下:start nginx.exe


访问http://localhost:9001/,看到这个说明启动成功了:


1268169-20211219225651548-710137714.png


三、修改前端部分


修改配置文件里的BASE_API,改成访问 9001 。


1268169-20211219222937868-1982577991.png


同时启动了 2 个端口的后端模块,前端页面分别进行访问,访问成功。

相关文章
|
2月前
|
负载均衡 监控 应用服务中间件
配置Nginx反向代理时如何指定后端服务器的权重?
配置Nginx反向代理时如何指定后端服务器的权重?
138 61
|
16天前
|
存储 应用服务中间件 nginx
nginx反向代理bucket目录配置
该配置实现通过Nginx代理访问阿里云OSS存储桶中的图片资源。当用户访问代理域名下的图片URL(如 `http://代理域名/123.png`)时,Nginx会将请求转发到指定的OSS存储桶地址,并重写路径为 `/prod/files/2024/12/12/123.png`。
54 5
|
2月前
|
缓存 负载均衡 算法
如何配置Nginx反向代理以实现负载均衡?
如何配置Nginx反向代理以实现负载均衡?
|
1月前
|
负载均衡 前端开发 应用服务中间件
负载均衡指南:Nginx与HAProxy的配置与优化
负载均衡指南:Nginx与HAProxy的配置与优化
60 3
|
2月前
|
安全 应用服务中间件 网络安全
如何测试Nginx反向代理实现SSL加密访问的配置是否正确?
如何测试Nginx反向代理实现SSL加密访问的配置是否正确?
77 3
|
2月前
|
安全 应用服务中间件 网络安全
配置Nginx反向代理实现SSL加密访问的步骤是什么?
我们可以成功地配置 Nginx 反向代理实现 SSL 加密访问,为用户提供更安全、可靠的网络服务。同时,在实际应用中,还需要根据具体情况进行进一步的优化和调整,以满足不同的需求。SSL 加密是网络安全的重要保障,合理配置和维护是确保系统安全稳定运行的关键。
132 3
|
JavaScript 应用服务中间件 nginx
Vue 发布服务器(Nginx)后访问路由报错 404
Vue 发布服务器(Nginx)后访问路由报错 404
174 0
|
关系型数据库 应用服务中间件 nginx
|
2月前
|
缓存 应用服务中间件 网络安全
Nginx中配置HTTP2协议的方法
Nginx中配置HTTP2协议的方法
123 7
|
3月前
|
应用服务中间件 BI nginx
Nginx的location配置详解
【10月更文挑战第16天】Nginx的location配置详解