Vue-nginx反向代理

1、nginx安装

        见链接： https://blog.csdn.net/weixin_43638968/article/details/112711272

2、常用nginx命令

start nginx       // 开启nginx服务
nginx -s stop     // 关闭nginx服务，快速停止nginx，可能并不保存相关信息
nginx -s quit     // 关闭nginx服务，完整有序的停止nginx，并保存相关信息
nginx -s reload   // 重载nginx服务

taskkill /f /t /im nginx.exe    // 强制关闭nginx服务器

3、nginx部署vue项目

（1）hash 模式

        将npm run build 生成的dist文件夹中的放入html文件中，浏览器输入http://localhist/dist/index.html 访问，发现报错找不到js和css文件，静态资源报错404：

        解决方法1：将dist目录下的文件复制到html文件中就可以看到项目了，浏览器输入http://localhist访问

        解决方法2：修改vue.config.js中的publicPath，在最前面加上./

module.exports = {
  publicPath: `./${process.env.VUE_APP_CONTEXT}`,
}

（2）history 模式

        history模式下在nginx中进行刷新时报错404，因为在history模式下，只是动态的通过js操作window.history来改变浏览器地址栏里的路径，并没有发起http请求，但是当我直接在浏览器里输入这个地址的时候，就一定要对服务器发起http请求，但是这个目标在服务器上又不存在，所以会返回404，解决方法就是把所有请求都转发到即根目录下的index.html上。需要在nginx/conf/nginx.conf文件中进行如下配置：

// nginx/conf/nginx.conf
location / {
    root   html;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;    // 配置该行，否则history模式下刷新会报404错误
}

        补充：nginx访问的接口报错404，需要进行如下配置：

// vue/src/api/index.js
import http from './httpInstance'
const prefix = process.env.NODE_ENV === 'development' ? '/api' : '/api'
const getCurrentList = data => {
  return http({
    method: 'post',
    url: prefix + '/getCurrentList',
    data
  })
}

// nginx/conf/nginx.conf
location /api/ {
    proxy_pass   http://127.0.0.1:81;
    proxy_cookie_path / /api;
    proxy_redirect default;
    rewrite  ^.+api/?(.*)$ /$1 break;
    client_max_body_size 500m;
}

4、反向代理

        反向代理方式是指以代理服务器来接受internet上的连接请求，然后将请求转发给内部网络上的服务器，并将从服务器上得到的结果返回给internet上请求连接的客户端，此时代理服务器对外就表现为一个反向代理服务器。

        对于浏览器来说，发送一个http://www.a.com请求到Nginx服务器，对于它来说，它认为数据就是从http://www.a.com域中返回的，事实上，当http://www.a.com到达nginx服务器后，nginx服务器会将其转发给http://www.b.com，从http://www.b.com域中取得数据并将其返回给浏览器，这个步骤浏览器是不知道的，也就是说，浏览器并不知道http://www.b.com该域的存在，同理，http://www.b.com所在的域也并不知道浏览器的存在，它也只对nginx负责。nginx的这么一个过程便称为反向代理。

        nginx作为反向代理服务器，表面上看是访问了nginx的IP，实际上nginx只是作为一个代理服务器，它只是将客户端的请求进行转发给真实的服务器，由真实的服务器处理请求。 当处理完请求后，再将处理结果交给nginx，最后在回复给客户端。反向代理服务器的本质仅仅是作为一个“中间代理”，对请求进行转发。

        正向代理和反向代理区别：

        正向代理简单来说就是A向C借钱，由于一些情况不能直接向C借钱，于是A找B，B向C借钱，于是A得到了钱。但是C并不知道A的存在。B就充当了A的代理人的角色。即正向代理是代理客户端，服务器不知道实际发起请求的客户端；

        反向代理就是A向B借钱，B没有拿自己钱，而是悄悄的向C去借钱，然后再交给A，A以为是B的钱，但不知道C的存在。即反向代理是代理服务器端，客户端不知道实际提供服务的服务端。

5、负载均衡

        指使用反向代理同时代理多个相同内容的应用服务器，将客户端请求分发到各个应用服务器上并接收响应返回给客户端。

        作用：当一台服务器的单位时间内的访问量越大时，服务器压力就越大，大到超过自身承受能力时，服务器就会崩溃。为了避免服务器崩溃，让用户有更好的体验，我们通过负载均衡的方式来分担服务器压力。可以建立很多很多服务器，组成一个服务器集群，当用户访问网站时，先访问一个中间服务器，在让这个中间服务器在服务器集群中选择一个压力较小的服务器，然后将该访问请求引入该服务器。如此一来，用户的每次访问，都会保证服务器集群中的每个服务器压力趋于平衡，分担了服务器压力，避免了服务器崩溃的情况。

6、动静分离

        指运用nginx的反向代理功能分发请求：所有动态资源的请求交给应用服务器，而静态资源的请求（例如图片、视频、CSS、JavaScript文件等）则直接由nginx服务器返回到浏览器。

        作用：主要是nginx处理静态页面的效率远高于tomcat的处理能力，使用c语言开发的nginx对静态资源每秒的吞吐量是使用Java语言开发的tomcat的6倍，也远高于其它应用服务器