Nginx反向代理实践

最新推荐文章于 2024-11-10 21:02:17 发布

探索的石头

最新推荐文章于 2024-11-10 21:02:17 发布

阅读量76

点赞数 1

分类专栏：技术探索文章标签： nginx 运维 docker

本文链接：https://blog.csdn.net/qq_46331421/article/details/132491999

版权

技术探索专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Nginx反向代理实践

文章目录

Nginx反向代理实践
Nginx简介
一、背景
二、实践
总结

Nginx简介

Nginx是一个高性能的开源Web服务器软件，以其稳定性和高并发处理能力而闻名。与传统的Apache服务器相比，Nginx采用了事件驱动的异步非阻塞架构，能够更好地处理大量并发请求。同时，Nginx还具备反向代理、负载均衡、缓存加速等功能，广泛应用于互联网领域。

一、背景

在实际的Web应用开发中，我们常常会遇到需要将请求转发到不同的后端服务器的情况。为了解决这个问题，我们可以使用Nginx作为反向代理服务器。

反向代理服务器的工作原理是: 客户端向反向代理服务器发送请求，然后反向代理服务器根据配置规则将请求转发到后端的真实服务器上，并将响应结果返回给客户端。这样一来，客户端和后端服务器之间的直接联系被屏蔽，可以起到保护后端服务器安全性的作用。

Nginx作为反向代理服务器的优势在于其高性能和灵活的配置。通过Nginx的配置文件，我们可以轻松地实现负载均衡、动态路由、缓存加速等功能，提高网站的访问速度和稳定性。

另外，Nginx还提供了丰富的插件和模块，可以根据需求进行定制化开发。例如，我们可以通过Nginx的HttpAuthRequest模块实现对后端接口的鉴权，确保只有合法的请求能够被代理转发。

二、实践

我这里是使用docker部署的后端服务，同样的nginx也是docker启动；具体的安装和配置方法请看这篇文章
Docker安装配置常用镜像

现在我们要把多个前端项目都打包成dist文件挂载到Nginx中，并且配置转发规则使其都能够正常访问；

具体实践如下:

首先在vue.config.js文件中配置publicPath路径

module.exports = {
   ....
   //配置项目部署到域名的哪个根目录上
   publicPath: process.env.NODE_ENV === 'prod' ? '/flowers/' : '/',
   ....
}

其次配置VueRouter（我这里配置的mode为history模式，其实就是为了浏览器网页路径比较美观没有#这个符号，具体看个人，如果配置mode为history模式则还需要配置base路径:即项目的访问路径前缀）

export default new VueRouter({
    mode: "history",
    base: "/flowers/",
    routes
})

最后修改nginx的配置文件 nginx.conf

#https配置
  server {
    listen       443 ssl;
    server_name  你的域名;
    #证书路径
    ssl_certificate     xxx.crt;
    #私钥路径
    ssl_certificate_key xxx.key;
    #缓存ssl会话信息，避免频繁的重复握手
    ssl_session_cache    shared:SSL:1m;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    #设置过期时间
    ssl_session_timeout  5m;
    #设置加密套件 HIGH:!aNULL:!MD5; 为默认值 也可以自定义
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
    ssl_prefer_server_ciphers  on;

    #第一个前端项目
    location /chat {
    #设置了 alias 或 root 指令，指向了前端项目的 dist 目录的上级目录
     alias /usr/share/nginx/html/chat/dist;
     try_files $uri $uri/ /chat/index.html;
    }

    #第二个前端项目
    location /flowers {
     alias /usr/share/nginx/html/flowers/dist;
     try_files $uri $uri/ /flowers/index.html;
    }

    #第一个前端项目对应的后端服务
     location ^~/aigc/prefix/ {
     proxy_set_header Host $host;
     proxy_set_header X-Forwarded-Proto $scheme;
     proxy_set_header X-Real-IP $remote_addr;
     proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
     proxy_set_header X-NginX-Proxy true;
     proxy_pass 你的转发地址;
    }
    #第二个前端项目对应的后端服务
    location ^~/flowers/prefix/ {
     proxy_set_header Host $host;
     proxy_set_header X-Forwarded-Proto $scheme;
     proxy_set_header X-Real-IP $remote_addr;
     proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
     proxy_set_header X-NginX-Proxy true;
     proxy_pass 你的转发地址;
    }
}