【测试开发】知识点-配置 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 个端口的后端模块,前端页面分别进行访问,访问成功。

相关文章
|
10天前
|
Web App开发 算法 应用服务中间件
nginx开启局域网https访问
【10月更文挑战第22天】为了调试WebRTC功能,需要在局域网内搭建HTTPS协议。具体步骤包括:在已部署Nginx和安装OpenSSL的环境中生成私钥、证书签名请求和自签名证书;将生成的文件放置到Nginx的证书目录并修改Nginx配置文件,最后重启Nginx服务。注意,自签名证书不受第三方机构认可,如需正式使用,需向CA申请签名。
|
15天前
|
Web App开发 定位技术 iOS开发
Playwright 是一个强大的工具,用于在各种浏览器上测试应用,并模拟真实设备如手机和平板。通过配置 `playwright.devices`,可以轻松模拟不同设备的用户代理、屏幕尺寸、视口等特性。此外,Playwright 还支持模拟地理位置、区域设置、时区、权限(如通知)和配色方案,使测试更加全面和真实。例如,可以在配置文件中设置全局的区域设置和时区,然后在特定测试中进行覆盖。同时,还可以动态更改地理位置和媒体类型,以适应不同的测试需求。
Playwright 是一个强大的工具,用于在各种浏览器上测试应用,并模拟真实设备如手机和平板。通过配置 `playwright.devices`,可以轻松模拟不同设备的用户代理、屏幕尺寸、视口等特性。此外,Playwright 还支持模拟地理位置、区域设置、时区、权限(如通知)和配色方案,使测试更加全面和真实。例如,可以在配置文件中设置全局的区域设置和时区,然后在特定测试中进行覆盖。同时,还可以动态更改地理位置和媒体类型,以适应不同的测试需求。
17 1
|
22天前
|
缓存 负载均衡 应用服务中间件
Nginx 实现一个端口代理多个前后端服务
【10月更文挑战第19天】Nginx 的强大功能不仅限于此,它还可以与其他技术和工具相结合,为我们的应用提供更强大的支持和保障。在不断发展的互联网时代,掌握 Nginx 的使用技巧将为我们的工作和生活带来更多的便利和效益。
|
2月前
|
JavaScript 测试技术 Windows
vue配置webpack生产环境.env.production、测试环境.env.development(配置不同环境的打包访问地址)
本文介绍了如何使用vue-cli和webpack为Vue项目配置不同的生产和测试环境,包括修改`package.json`脚本、使用`cross-env`处理环境变量、创建不同环境的`.env`文件,并在`webpack.prod.conf.js`中使用`DefinePlugin`来应用这些环境变量。
96 2
vue配置webpack生产环境.env.production、测试环境.env.development(配置不同环境的打包访问地址)
|
1月前
|
分布式计算 Hadoop Shell
Hadoop-35 HBase 集群配置和启动 3节点云服务器 集群效果测试 Shell测试
Hadoop-35 HBase 集群配置和启动 3节点云服务器 集群效果测试 Shell测试
69 4
|
1月前
|
运维 监控 数据可视化
大数据-171 Elasticsearch ES-Head 与 Kibana 配置 使用 测试
大数据-171 Elasticsearch ES-Head 与 Kibana 配置 使用 测试
62 1
|
1月前
|
应用服务中间件 Shell PHP
windows系统配置nginx环境运行pbootcms访问首页直接404的问题
windows系统配置nginx环境运行pbootcms访问首页直接404的问题
|
1月前
|
存储 数据采集 分布式计算
Hadoop-17 Flume 介绍与环境配置 实机云服务器测试 分布式日志信息收集 海量数据 实时采集引擎 Source Channel Sink 串行复制负载均衡
Hadoop-17 Flume 介绍与环境配置 实机云服务器测试 分布式日志信息收集 海量数据 实时采集引擎 Source Channel Sink 串行复制负载均衡
44 1
|
2月前
|
Linux
kickstart自动安装系统 --DHCP 配置及测试
PXE+Kickstart自动安装系统需配置DHCP服务器分配IP。dhcpd.conf示例:设置更新样式、忽略客户端更新、指定下一服务器及启动文件。定义子网、网关、掩码、动态地址池并预留特定MAC地址。重启xinetd、NFS、DHCP服务,确保新服务器与Kickstart服务器在同一网络,避免误装其他机器。注意隔离测试网络以防干扰生产环境。
80 18
|
1月前
|
监控 Java Maven
springboot学习二:springboot 初创建 web 项目、修改banner、热部署插件、切换运行环境、springboot参数配置,打包项目并测试成功
这篇文章介绍了如何快速创建Spring Boot项目,包括项目的初始化、结构、打包部署、修改启动Banner、热部署、环境切换和参数配置等基础操作。
120 0