整合Nginx实现反向代理

本文介绍了如何通过下载并配置Nginx,将多个后端服务的接口统一到不同的请求路径上,如/aab/和/bbb/,并通过proxy_pass指令将请求转发至对应的服务端口。

针对后端启动多个服务,接口需要统一请求路径时,可以使用nginx进行请求地址反向代理。

1.下载: nginx

 2.下载完成后解压,找到配置文件nginx.conf(在解压文件的conf目录中),在http中增加以下示例代码,保存配置文件。

 注意,只需要复制下面中的server,aaa、bbb是你自己需要代理请求地址的前缀(可以看做标识),开发接口的时候时候需要遵守该命名规则。

http {
   ............
    server {
        listen       9001;
        server_name  localhost;

        location ~ /aaa/ {           
            proxy_pass http://localhost:8201;
        }      

        location ~ /bbb/ {           
            proxy_pass http://localhost:8202;
        }
    }
}

3.在nginx.exe所在目录中,打开dos窗口,执行nginx.exe,启动nginx。(或者直接双击nginx.exe启动)

注意:nginx.exe -s stop关闭nginx。

4.使用配置文件中新加入的代理接口9001,接口aaa和接口bbb可以正常访问了!

脚踏实地行,海阔天空飞~

在配置 Vue 前端、Spring Boot 后端与 Nginx 之间的反向代理时,主要目标是让 Nginx 作为统一入口,将前端请求代理到 Vue 构建的静态资源,同时将 API 请求代理到 Spring Boot 后端服务。以下是一个典型的 Nginx 配置示例: ```nginx server { listen 80; server_name yourdomain.com; # 配置 Vue 前端静态资源 location / { root /path/to/your/vue/dist; # Vue 构建后的静态文件目录 index index.html; try_files $uri $uri/ =404; } # 配置反向代理,将 /api 开头的请求转发到 Spring Boot 后端 location /api/ { proxy_pass http://localhost:8080/; # Spring Boot 后端服务地址 proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection 'upgrade'; proxy_set_header Host $host; proxy_cache_bypass $http_upgrade; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } } ``` 上述配置中,`/` 路径指向 Vue 构建后的静态文件目录,`/api/` 路径则被代理到运行在 `localhost:8080` 的 Spring Boot 服务[^1]。 如果需要启用 HTTPS,可以在 `server` 块中添加 SSL 相关配置,例如监听 443 端口并指定 SSL 证书路径: ```nginx server { listen 443 ssl; server_name yourdomain.com; ssl_certificate /path/to/your/cert.pem; ssl_certificate_key /path/to/your/privkey.pem; # 同样的 location 配置 location / { root /path/to/your/vue/dist; index index.html; try_files $uri $uri/ =404; } location /api/ { proxy_pass http://localhost:8080/; # 其他 proxy 配置同上 } } ``` 此外,还可以配置 HTTP 到 HTTPS 的重定向,以确保所有请求都通过加密连接进行: ```nginx server { listen 80; server_name yourdomain.com; return 301 https://$host$request_uri; } ``` 通过这些配置,Nginx 就可以有效地将 Vue 前端和 Spring Boot 后端服务整合在一起,实现前后端分离部署的同时,处理跨域问题并提升整体性能[^2]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值