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

}