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

}