nginx反向代理服务器—前端部署 nginx

文章目录

- Nginx—反向代理服务器
- - 图片回显
  - - 修改nginx配置
    - 修改hosts文件
- 前端部署准备工作
- - 1.修改ajax请求地址—main.js
  - 2.修改图片上传地址—addItem.vue
  - 3.发布生成dist
  - 4.配置前端代理服务器
  - 5.映射后端服务器
- 解决高并发问题
- - 1.动态获取端口号
  - 2.配置conf，负载均衡

Nginx—反向代理服务器图片回显
修改nginx配置

文章图片

配置conf文件中的nginx.conf,将image.jt.com映射为E:/images

# 配置图片代理记得保存 server { listen 80; server_name image.jt.com; location / { rootE:/images; } }

修改hosts文件位置: C:\Windows\System32\drivers\etc
因为没有买域名，只能从本地配置

文章图片

#配置图片服务器 127.0.0.1image.jt.com #配置后端服务器 127.0.0.1manage.jt.com #配置前端服务器 127.0.0.1www.jt.com

前端部署准备工作 1.修改ajax请求地址—main.js

文章图片

2.修改图片上传地址—addItem.vue

文章图片

3.发布生成dist

文章图片

文章图片

将dist复制到nginx文件根目录下

文章图片

4.配置前端代理服务器
配置conf文件中的nginx.conf，将www.jt.com映射到E:\nginx-1.21.3\dist中的index.html

#前端服务器 server { listen 80; server_name www.jt.com; location / { root dist; index index.html; } }

5.映射后端服务器
配置conf文件中的nginx.conf,将magage.jt.com映射到本地localhost:8091

#将magage.jt.com映射到本地localhost:8091 server { listen 80; server_name manage.jt.com; location / { #代理请求 proxy_pass http://127.0.0.1:8091; } }

解决高并发问题 1.动态获取端口号

@RestController @CrossOrigin public class PortController {@Value("${server.port}") private Integer port; //动态获取端口号 @GetMapping("/getPort") public String getPort(){ return "当前端口号："+port; } }

2.配置conf，负载均衡
【nginx反向代理服务器—前端部署】1.默认轮询；
2.权重 weight；
3.iphash策略

#将magage.jt.com映射到本地localhost:8091 server { listen 80; server_name manage.jt.com; location / { #代理请求 #proxy_pass http://127.0.0.1:8091; proxy_pass http://tomcats; } } #配置后端集群 upstream tomcats { server 127.0.0.1:8091; server 127.0.0.1:8092; }