Nginx 配置,同一个域名下有 2 个 项目,希望通过 URL:http://www.test.com/projectA,访问 A 项目(vue:/projectA,springboot:/projectA) URL:http://www.test.com/projectB,访问 B 项目(vue:/projectB,springboot:/projectB)
时间: 2023-06-29 18:08:51 浏览: 115
Nginx一个域名访问多个项目的方法实例
可以使用 Nginx 的反向代理功能来实现这个需求。具体配置如下:
```
server {
listen 80;
server_name www.test.com;
location /projectA {
proxy_pass http://127.0.0.1:8080/projectA; # springboot 项目的地址
proxy_set_header Host $host; # 设置请求头中的 Host 字段,用于支持虚拟主机
proxy_set_header X-Real-IP $remote_addr; # 将客户端真实 IP 地址传递给后端服务器
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; # 将客户端 IP 地址传递给后端服务器
}
location /projectB {
proxy_pass http://127.0.0.1:8081/projectB; # springboot 项目的地址
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
location /projectA/ {
alias /path/to/vue/projectA/dist/; # vue 项目的地址
try_files $uri $uri/ /index.html;
}
location /projectB/ {
alias /path/to/vue/projectB/dist/; # vue 项目的地址
try_files $uri $uri/ /index.html;
}
}
```
这里假设两个 Spring Boot 项目的地址分别为 `http://127.0.0.1:8080/projectA` 和 `http://127.0.0.1:8081/projectB`,两个 Vue 项目的地址为 `/path/to/vue/projectA/dist/` 和 `/path/to/vue/projectB/dist/`。
其中,`location /projectA/` 和 `location /projectB/` 的作用是将 URL 中以 `/projectA` 或 `/projectB` 开头的请求映射到对应的 Vue 项目中。`try_files $uri $uri/ /index.html;` 是为了支持 Vue 的路由模式,将所有的 URL 都重定向到 Vue 的 `index.html` 页面中。
注意,在配置 Nginx 反向代理时,需要根据实际情况修改端口号、路径等参数。
阅读全文