谷粒学苑项目实战(十):使用Nginx配置请求转发

简介: 之前前端的请求端口为8001,可是现在我们又多了8002端口,后面还会有8003、8004……,如何让前端能够请求这么多的端口呢?也许我们可以写多个BASE_API,分别对应多个端口,可是在vue框架中许多地方都要用到BASE_API,这样修改的地方太多。这就需要用到Nginx的请求转发了。

前言  


 

之前前端的请求端口为8001,可是现在我们又多了8002端口,后面还会有8003、8004……,如何让前端能够请求这么多的端口呢?


也许我们可以写多个BASE_API,分别对应多个端口,可是在vue框架中许多地方都要用到BASE_API,这样修改的地方太多。

     

这就需要用到Nginx的请求转发了。


一、Windows中下载Nginx



下载地址:http://nginx.org/en/download.html

db54c90f6283491da12c67e921001602.png


二、修改conf文件


     

解压到任意目录后,打开 nginx-1.10.3\conf\nginx.conf(可以先备份一份,避免改错)


1、修改端口号


Nginx默认为80端口,太容易冲突了,改为81端口。


b4ff9f67173947eb8581fd7cbee5a5ce.png


2、配置请求转发


一定要写在http中:

68edfaf75b2845bab4defb8ee354b379.png955ebb1f2b584c8babd23049da000226.png


#谷粒学苑配置
  server {
      listen 9001;
      server_name localhost;
    location ~ /eduservice/ { 
      proxy_pass http://localhost:8001;
    }
    location ~ /eduoss/ { 
      proxy_pass http://localhost:8002;
    }
  }


三、修改前端请求地址


     

之前写的8001,我们现在改为9001。


9de95d0df8e54ed183a40df50aa34f27.png


四、Nginx重启的注意事项


     

我们在运行Nginx时,是使用命令行运行nginx.exe

     

关闭Nginx时,直接关窗口并不能停止Nginx,必须通过命令:

nginx -s stop


很多时候重启配置没有生效,也是这个原因,重启可以先用停止命令再用启动命令,也

可以直接使用重启命令:

nginx -s reload


这是一个必须要注意的点。


五、运行测试


     

启动Nginx、前端、后端8001、8002,

     

登录后看看请求:

6701583baa684361b2772eb9a6f2bdfb.png


能够登录成功,并且请求已经变为配置的请求转发9001了。


其他功能也正常。


那么我们的Nginx请求转发就配置完成了。


相关文章
|
6天前
|
移动开发 前端开发 JavaScript
前端vue2、vue3去掉url路由“ # ”号——nginx配置(一)
前端vue2、vue3去掉url路由“ # ”号——nginx配置
63 0
|
6天前
|
JavaScript 前端开发 应用服务中间件
angular引入包、路由权限配置、打包问题与nginx配置问题(简单部署)
angular引入包、路由权限配置、打包问题与nginx配置问题(简单部署)
26 0
|
6天前
|
前端开发 JavaScript 应用服务中间件
前端vue2、vue3去掉url路由“ # ”号——nginx配置(二)
前端vue2、vue3去掉url路由“ # ”号——nginx配置
69 0
|
1天前
|
负载均衡 安全 应用服务中间件
nginx配置ssl和反向代理的配置代码
【5月更文挑战第2天】nginx配置ssl和反向代理的配置代码
17 3
|
4天前
|
负载均衡 应用服务中间件 nginx
解决nginx配置负载均衡时invalid host in upstream报错
在Windows环境下,配置Nginx 1.11.5进行负载均衡时遇到问题,服务无法启动。错误日志显示“invalid host in upstream”。检查发现上游服务器列表中,192.168.29.128的主机地址无效。负载均衡配置中,两个服务器地址前误加了"http://"。修正方法是删除上游服务器列表和proxy_pass中的"http://"。问题解决后,Nginx服务应能正常启动。
38 4
解决nginx配置负载均衡时invalid host in upstream报错
|
6天前
|
应用服务中间件 nginx
nginx配置集群轮训策略
nginx配置集群轮训策略
421 0
|
6天前
|
安全 网络协议 应用服务中间件
一文读懂HTTPS⭐揭秘加密传输背后的原理与Nginx配置攻略
一文读懂HTTPS⭐揭秘加密传输背后的原理与Nginx配置攻略
|
6天前
|
应用服务中间件 PHP nginx
php如何实现检测nginx配置的正确性
请确保在执行此操作时,PHP有足够的权限来执行Nginx命令和访问Nginx配置文件。另外,将上述代码嵌入到您的应用程序中时,要注意安全性,以防止潜在的命令注入攻击。
55 3
|
6天前
|
安全 应用服务中间件 网络安全
linux_nginx中添加ssl配置(open ssl)
linux_nginx中添加ssl配置(open ssl)
27 1
|
6天前
|
JSON JavaScript 前端开发
vue2_vite.config.js的proxy跨域配置和nginx配置代理有啥区别?
vue2_vite.config.js的proxy跨域配置和nginx配置代理有啥区别?
35 1