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;
        }

}