nginx反向代理部署vue项目(history模式)的方法

前言：

　　根据标题我们要区分出两个信息

　　1. history 模式部署 （ vue的路由模式如果使用history，刷新会报404错误。）

　　2. Nginx 做反向代理

问题1思考：

vue-router 默认是hash模式，使用url的hash来模拟一个完整的url，当url改变的时候，页面不会重新加载。

但是如果我们不想hash这种以#号结尾的路径时候的话，我们可以使用路由的history的模式。比如如下网址：使用hash模式的话，那么访问变成 http://localhost:8080/bank/page/count/#/ 这样的访问，如果路由使用 history的话，那么访问的路径变成 如下：http://localhost:8080/bank/page/count 这样的了；

在路由的配置就是如下：我们还是以 vue-cli项目为例：
在src/router/index.js 代码如下：

import Vue from 'vue';
import Router from 'vue-router';
// import HelloWorld from '@/views/HelloWorld';

Vue.use(Router);

const router = new Router({
  mode: 'history', // 访问路径不带井号  需要使用 history模式
  base: '/bank/page',  // 基础路径
  routes: [
    {
      path: '/count',
      name: 'count',
      component: resolve => require(['@/views/count'], resolve) // 使用懒加载
    }
  ]
});

这里history的这种模式需要后台配置支持。比如：
当我们进行项目的主页的时候，一切正常，可以访问，但是当我们刷新页面或者直接访问路径的时候就会返回404，那是因为在history模式下，只是动态的通过js操作window.history来改变浏览器地址栏里的路径，并没有发起http请求，但是当我直接在浏览器里输入这个地址的时候，就一定要对服务器发起http请求，但是这个目标在服务器上又不存在，所以会返回404，怎么解决呢？我们现在可以把所有请求都转发到 http://localhost:8080/bank/page/index.html上就可以了，即根目录下的index.html。

官方给出了几种解决方式如下：

Nginx知识补充：

try_files 指令：

语法：try_files file ... uri 或 try_files file ... = code

默认值：无

作用域：server location

其作用是按顺序检查本地（服务器）文件是否存在，返回第一个找到的文件或文件夹（结尾加斜线表示为文件夹），如果所有的文件或文件夹都找不到，会进行一个内部重定向到最后一个参数。

需要注意的是，只有最后一个参数可以引起一个内部重定向，之前的参数只设置内部URI的指向。最后一个参数是回退URI且必须存在，否则会出现内部500错误。命名的location也可以使用在最后一个参数中。与rewrite指令不同，如果回退URI不是命名的location那么args不会自动保留，如果你想保留args，则必须明确声明。

但是其实这官方的demo是有一些需要注意的地方的。

 

问题2思考：

Nginx 如何做反向代理

公司为了安全起见，域名解析是另一台服务器（A）ip地址，通过Nginx代理访问另一台服务器（B）}的静态资源

这里我们需要同时在两台服务器上配置Nginx,服务器A做反向代理，服务器B做web服务器启动web项目。

注意：官网说的配置Nginx服务器是需要在web服务器上来配置的。

　　　反向代理不需要配置的，不然页面会报错的，css,js都解析错误，因为try_files是访问本地静态资源的，而代理服务器没有放资源的。报错如下

　

 

在Nginx做反向代理过程中，也遇到了一个问题，就是页面刷新，重定向时候https跳到http，导致页面404报错，这种情况需要在代理服务器上配置Nginx，强制http转https,与history没关系！！！

这样设置下，就可以了！

下面附上代理服务器的Nginx代码：

 

　解释说明： 1.监听443端口，下载ssl证书，加上代理头部设置proxy_set_header 等一系列。

　　　　　　2.更多详细Nginx配置https，加重定向跳转，可以访问这里。

附上Nginx作为web服务器的配置：

server {
        listen      80;
        server_name  localhost;
    root /data/mystatic/yihao01-iotstatic/;
    index index.html;
        autoindex on;
    charset   utf-8;
#for ssl
        ssl                  off;
        ssl_certificate      /usr/local/nginx/conf/ssl-key/0easy/0easy.cer;
        ssl_certificate_key  /usr/local/nginx/conf/ssl-key/0easy/0easy.key;
        ssl_session_timeout  5m;
        ssl_session_cache    builtin:1000 shared:SSL:10m;
        ssl_protocols  TLSv1 TLSv1.1 TLSv1.2;
        ssl_ciphers  HIGH:!RC4:!MD5:!aNULL:!eNULL:!NULL:!DH:!EDH:!AESGCM:!EXPORT:+MEDIUM;
        ssl_prefer_server_ciphers   on;
#for log
        access_log /log/nginx/access.log main;


#location /static {
#        root /data/mystatic/yihao01-iotstatic/;
#    }
location ~ /(system|car)/ {
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_pass http://192.168.0.104:7995;
        }

#配置Nginx动静分离，定义的静态页面直接从Nginx发布目录读取。
location / {
        alias /data/mystatic/yihao01-iotstatic/;
    #expires定义用户浏览器缓存的时间为7天，如果静态页面不常更新，可以设置更长，这样可以节省带宽和缓解服>务器的压力
        # expires  1d;
    index index.html index.htm;
        #### history的配置
        try_files $uri $uri/ /index.html; #需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
        }

#配置Nginx动静分离，定义的静态页面直接从Nginx发布目录读取。
location /yihao01-aiotcloud-admin {
    alias /data/mystatic/yihao01-aiotcloud-admin/;
    #expires定义用户浏览器缓存的时间为7天，如果静态页面不常更新，可以设置更长，这样可以节省带宽和缓解服务器的压力
        # expires  1d;
        ### hash配置
    index index.html;
    autoindex on;
        }

location @router {
        rewrite ^.*$ /index.html last;
        } 

# 配置路由只需配置到网关上，网关会自动转发到相应的服务器上
location /xx-permission-management/ { // api请求头部前缀
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_pass http://192.168.0.104:7995;
        }


location /xx-configuration-management/ {
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_pass http://192.168.0.104:7995;
        }

location /xx-device-management/ {
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_pass http://192.168.0.104:7995;
        }

location /xx-security-authentication/ {
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_pass http://192.168.0.104:7995;
        }

location /xx-shadow-service/ {
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_pass http://192.168.0.104:7995;
        }

location /xx-developer-center/ {
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_pass http://192.168.0.104:7995;
        }
location /xx-message-service/ {
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_pass http://192.168.0.104:7995;
        }
location /xx-automate-service/ {
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_pass http://192.168.0.104:7995;
        }

}