1、通过搜索引擎访问Nginx官网——免费使用——NGINX开源版(免费下载)或者通过以下链接直接访问Nginx下载页面下载对应的版本(下载页面)。以下以1.24.0为例
2、修改nginx的配置文件,在conf文件夹下,文件名为nginx.conf;以下是我修改完的配置(在http的server项内):
listen 5101;#需要监听的端口server_name 127.0.0.1;#charset koi8-r;charset utf-8;#access_log logs/host.access.log main;location /api { #尾加也可以斜杠"/",proxy_pass 的值同步修改proxy_pass http://127.0.0.1:8968/api;#注意:使用代理地址时跟上面保持一致(/api)末尾不加斜杠"/"。proxy_set_header Host 127.0.0.1;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;}location / { #使用"/"拦截全路径的时候记得放在最后。root html; # html表示存放静态资源的文件夹,根据实际情况修改index index.html index.htm; # 默认的访问文件if (!-e $request_filename) {rewrite ^(.*)$ /index.html?s=$1 last;break;} #处理页面刷新404错误}
我已将相关要点在对应配置后面做了备注,可能会影响正常使用,建议大家在实际使用中把和配置在同一行的备注去掉。
配置完conf文件后,双击nginx启动
这样我们在访问http://192.168.100.252:5101的时候,就会打开你的前端项目页面,在请求接口时,需要在前端项目将base url改为:http://127.0.0.1:5101/api;这样当前端请求后端地址http://127.0.0.1:5101/api/auth/login 时会将请求的接口地址带到http://127.0.0.1:8968/api/auth/login上;我的前端和后端部署在同一台服务器上,不在同一台服务器上也可以实现,只需要修改proxy_pass的对应值(后端接口的真实地址)就可以了。我们前端项目的域名和请求后端接口的域名都是192.168.100.252:5101,这样就不会存在跨域问题了。
在项目部署中遇到了页面刷新404和方向代理不能处理问题,都解决了。解决方案如下:
处理页面刷新404问题,在localtion / 下加
if (!-e $request_filename) {rewrite ^(.*)$ /index.html?s=$1 last;break;}
不能正常反向代理:
错误配置如下:
location /api/ {proxy_pass http://127.0.0.1:5102/api;proxy_set_header Host 127.0.0.1;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;}
修改后的正确配置
location /api/ {proxy_pass http://127.0.0.1:5102/api/;proxy_set_header Host 127.0.0.1;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;}
或者下面示例中的也完全可以
location /api {proxy_pass http://127.0.0.1:5102/api;proxy_set_header Host 127.0.0.1;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;}