一個域名配置多個Vue項目

時間  2019-11-21
標籤 一個 域名 配置 多個 vue 項目 简体版
原文   原文鏈接

​ 從業前端4年對於前端部署天然掌握一點，部署過許多靜態網站、PHP站點、vue項目，每當要進行配置的時候總會耽誤點時間，畢竟配置是低頻的，部署纔是高頻，恰好手頭比較閒也想寫一些文檔來提煉一下本身，若是可以幫助正在閱讀的你，我也是倍感榮幸。雖然網上關於此類文章比比皆是，可是老是零零散散，掌握不到原理，下次配置時依舊須要度娘。php

​ 想必你們都查閱過資料，譬如：一個域名如何配置多個vue項目？nginx try_files 詳解，nginx php代理轉發等等，這些在我這篇文檔當中基本都已涵蓋，我不常常寫文章，因此文筆不是很好，若是有什麼說的不明白或者很差的請你們幫忙指出。css

​ 本文經過nginx配置vue項目的例子來幫助你們理解nginx的使用以及原理：html

  • nginx路由匹配規則與優先級
  • nginx日誌輸出調試
  • nginx重定向、代理轉發
  • nginx root和alias區別
  • 真正的 nginx try_files 詳解
  • vue-router的兩種模式
  • 一個域名配置一個vue項目
  • 一個域名配置多個vue項目

nginx 路由匹配規則與優先級

一般咱們所說的nginx路由匹配其實就是 nginx location匹配，下面咱們簡單進行介紹：前端

location路由匹配規則

命令 說明
~ 波浪線表示執行一個正則匹配，區分大小寫
~* 執行一個正則匹配，不區分大小寫
^~ 普通字符匹配，若是該選項匹配，只匹配該選項，不匹配別的選項，通常用來匹配目錄
= 普通字符精確匹配
@ "@" 定義一個命名的 location，使用在內部定向時，例如 error_page, try_files

示例：vue

#精準匹配
location = / {
    #只匹配www.xxx.com
}

location / {
    #匹配任何URI
}
複製代碼

nginx 路由匹配優先級

​ 看過官方文檔或者實踐過的同窗都知道，location匹配規則不是從上往下按順序匹配的，而是根據nginx匹配規則來匹配的。好比：你醫院排隊掛號時有老人、軍人以及軍屬優先掛號的規則。webpack

​ 下面爲nginx 路由匹配規則：nginx

  • =前綴的指令嚴格匹配這個查詢。若是找到，中止搜索。web

  • 全部剩下的常規字符串，最長的匹配。若是這個匹配使用^〜前綴，搜索中止。正則表達式

  • 正則表達式，在配置文件中定義的順序。vue-router

  • 若是第3條規則產生匹配的話，結果被使用。不然，使用第2條規則的結果。

nginx日誌輸出調試

​ 在咱們設置了 location 匹配規則以後，不肯定本身的匹配是否生效時，能夠嘗試使用nginx的access_log來輸出指定log_format模板日誌。因爲只作調試使用，咱們選擇使用nginx默認的main模板，若是感興趣的朋友，能夠本身去查閱相關文檔。

​ 首先，確認設置nginx規則以後是否重啓nginx服務。

​ 其次，確認無誤以後在咱們設置的nginx location規則裏面，利用access_log輸出日誌。示例以下：

http {
  ...
  #日誌模板 main
  log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                    '$status $body_bytes_sent "$http_referer" '
                    '"$http_user_agent" "$http_x_forwarded_for"';

  server {
    ...
    location /ar-meet {
      #輸出日誌，日誌文件保存在/val/log/nginx/access1.log,使用的是main的日誌模板（默認的）
      access_log  /var/log/nginx/access1.log  main;
      ...
    }
  }
}
複製代碼

最後，使用 tail命令查看是否有日誌輸出，從而來判斷是否進入匹配的規則中，若是刷新瀏覽器有日誌輸出，則說明匹配成功進一步排查問題，反之未匹配成功，檢查規則正則是否正確。

tail -f /val/log/nginx/access1.log
複製代碼

nginx重定向、代理轉發

下面咱們將以幾個例子開講解 nginx重定向 和 nginx代理轉發。

以HTTPS站點爲例：

  • nginx重定向，當用戶訪問 HTTP站點時，咱們須要重定向至 HTTPS的站點上。
  • HTTPS 代理轉發，當咱們的服務不支持HTTPS時，咱們能夠利用HTTPS代理轉發至HTTP服務上。

在建立https站點以前，咱們須要先建立 SSL證書，再將證書放到服務器上。此處不着重介紹SSL證書，請自行百度，若是有阿里雲服務器能夠在阿里雲後臺購買免費的證書。

nginx重定向

server {
  listen       80;
  server_name  www.xxx.com xxx.com;

  #重定向https
  rewrite ^(.*)$  https://$host$1 permanent;
}
複製代碼

HTTPS 代理轉發

server {
  listen       443;
  server_name  www.xxx.com xxx.com;
  index index.html;

  #ssl證書配置
  ssl on;
  ssl_certificate			  /usr/local/nginx_ssl/www.xxx.com.pem;#配置ssl證書
  ssl_certificate_key		/usr/local/nginx_ssl/www.xxx.com.key;#配置ssl證書
  ssl_session_timeout 5m;

  location / {
    #代理轉發，當用戶訪問https://www.xxx.com/yourapi/getInfo時
    #實際訪問的是 http://xx.xx.xx.xx:6666/yourapi/getInfo
    if ($request_uri ~ ^/yourapi(/)?.*){
      proxy_pass http://xx.xx.xx.xx:6666$request_uri;
  	}
  }

  error_page 404 /404.html;
  location = /40x.html {
  }

  error_page 500 502 503 504 /50x.html;
  location = /50x.html {
  }
}
複製代碼

nginx root和alias區別

經過以上配置，咱們分別使用了root和alias指定靜態資源目錄，咱們能夠看出二者的區別：

root實例：

location /ar-meet {
	root /home/www/;
}
複製代碼

當請求URI爲 www.xxx.com/ar-meet/a.html nginx會返回 /home/www/ar-meet/a.html文件。

alias實例:

location /ar-call {
	alias /home/www/ar-call/dist/;
}
複製代碼

當請求URI爲 www.xxx.com/ar-call/a.htmlnginx會返回 /home/www/ar-call/dist/a.html文件，若是此處不是alias 而是 root，那麼nginx 返回 /home/www/ar-call/dist/ar-call/a.html

總結：alias 會忽略location後面的路徑，而root只是更改根目錄指向。

nginx try_files 精解

​ 若是你沒有動力看下去，或者以爲很難看下去，那麼先看這一句話而後再慢慢看下去。其實它就是重定向，按照這個思路往下閱讀。

try_files 按順序檢查文件是否存在，返回第一個找到的文件。它提供三個參數：

參數 說明
$url 表明nginx會去指定路徑（root或alias）中查找文件，若是找到則返回該文件，不然繼續匹配第二個參數。
$url/ 若是第一個參數沒有找到文件，則會在路徑後面添加一個/，繼續查詢，一樣找到文件返回該文件，不然重定向到最後一個參數。
重定向URL 以上都不符合要求時，重定向至指定頁面，好比：=404，經過以上兩個例子，咱們來分析一下 try_files；

例子：

假設請求URI爲 demos.xxx.com/ar-meet

location /ar-meet {
  root /home/www/;
  #在重置root根目錄以後，此時nginx指向了`/home/www/ar-meet`
  #因爲當前location繼承http的 `index` 屬性，即：index index.html;
  #默認打開html文件，也就是說此時nginx指向了 `/home/www/ar-meet/index.html`
}
複製代碼

假設請求URI爲 demos.xxx.com/ar-meet/meet/123

location /ar-meet {
  root /home/www/;
  #在重置root根目錄以後，此時nginx指向了`/home/www/ar-meet`
  #可是在ar-meet的目錄裏找不到meet
  #所以nginx會返回404
  try_files	$url $urs/ /ar-meet/index.html;
  #重定向至demos.xxx.com/ar-meet/index.html;
}
複製代碼

vue-router的兩種模式

​ 爲何vue-router的 history 模式須要配置，而 hash 模式則不須要呢？由於history模式利用HTML5 historyAPI來完成URL跳轉，而hash則是監聽hash變化，除此以外咱們常用hash來防止瀏覽器跳轉。

下面不妨咱們來測試一下這兩種模式：

1. hash模式

因爲 hash模式爲vue-router默認模式，因此咱們無需配置，直接在main.js中監聽hash變化事件。

window.addEventListener('hashchange', (e) => {
	console.log('hash值發生了改變 ', e);
}, false);
複製代碼

2. history模式

首先，咱們須要將vue-router的模式改成history模式。

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})
複製代碼

一樣，咱們在main.js中監聽HTML5History變化事件：

window.addEventListener('popstate', function(e) {
	console.log('HTML5History路由變化了', e);
}, false);
複製代碼

vue是個單頁面應用，經過解析URL的hash或者經過 history的 API 來實現頁面跳轉和渲染。

一個域名配置一個項目

單項目配置比較簡單，因此咱們直接上代碼。參考官方配置。

server {
  listen       443;
  server_name  www.xxx.com xxx.com;
  index index.html;

  ssl on;
  ssl_certificate			  /usr/local/nginx_ssl/www.xxx.com.pem;#配置ssl證書
  ssl_certificate_key		/usr/local/nginx_ssl/www.xxx.com.key;#配置ssl證書
  ssl_session_timeout 5m;

  location / {
    #project爲項目目錄，咱們將build以後的目錄
    root /usr/share/nginx/html/project;
    try_files $uri $uri/ /index.html;
  }

  error_page 404 /404.html;
  location = /40x.html {
  }

  error_page 500 502 503 504 /50x.html;
  location = /50x.html {
  }
}
複製代碼

一個域名配置多個vue項目

在開始配置以前，咱們來看看如何分配這些路由：

域名URL Vue 項目 Demo
demos.xxx.com 重定向 訪問https://demos.anyrtc.io 將會重定向
至 www.anyrtc.io/demo
demos.xxx.com/ar-meet ar-meet demos.anyrtc.io/ar-meet/
demos.xxx.com/ar-call ar-call demos.anyrtc.io/ar-call/
... ...

要實現一個域名配置多個項目，咱們須要用到:

  • nginx location匹配：字符串匹配 和 精準匹配
  • vue 項目配置publicPath屬性，此處以vue-cli@3.0爲例，若是是2.0須要設置vue-router的base屬性，以及更改webpack中，靜態資源的路徑前綴。最好經過vue腳手架3.0構建項目。

vue項目配置及打包

更改根目錄的vue.config.js的publicPath屬性，該屬性不只爲打包以後靜態資源的前綴，也是路由的前綴。若是根目錄沒有vue.config.js請自行建立。

下面以ar-meet爲例：

//vue.config.js
module.exports = {
  lintOnSave: false,
  publicPath: "/ar-meet/"
};
複製代碼

本地測試npm run serve能夠發現，咱們的站點的url前面多了一個/ar-meet/。示例：

publicPath 首頁 靜態資源
/ www.xxx.com www.xxx.com/css/a.css
/ar-meet/ www.xxx.com/ar-meet www.xxx.com/ar-meet/css/a.css

配置完publicPath以後，咱們將項目編譯打包npm run build。

nginx location配置

根據咱們分配的路由，咱們添加三個location匹配，示例：

server {
  listen       443;
  server_name  demos.xxx.com;
  index index.html;

  #這裏爲你的項目目錄
  root /home/www;

  ssl on;
  ssl_certificate           /usr/local/nginx_ssl/www.xxx.com.pem;#配置ssl證書
  ssl_certificate_key       /usr/local/nginx_ssl/www.xxx.com.key;#配置ssl證書
  ssl_session_timeout 5m;

  #精準匹配，重定向至https://www.xxx.com/demo
  #能夠根據本身的須要來調整，好比換成一個vue項目
  location = / {
  	rewrite ^.*$ https://www.xxx.com/demo;
  }

  #字符串 /ar-meet 匹配
  location /ar-meet {
    #輸出日誌，檢查是否匹配成功
    access_log  /var/log/nginx/access1.log  main;

    #利用root指定資源
    #建立ar-meet目錄，將vue編譯以後dist目錄下面的文件放置到該目錄下面，非dist目錄
    root /home/www/;
    try_files $uri $uri/ /ar-meet/index.html;
  }

  #字符串 /ar-call 匹配
  location /ar-call {
    #利用alias指定資源
    #直接將vue編譯以後的dist目錄放到ar-call的目錄下面
    alias /home/www/ar-call/dist;
    try_files $uri $uri/ /ar-call/index.html;
  }

  error_page 404 /404.html;
  location = /40x.html {
  }

  error_page 500 502 503 504 /50x.html;
  location = /50x.html {
  }
}
複製代碼

簡單的總結一下：

nginx 使用 access_log輸出日誌來檢查location路由是否匹配成功，添加location 路由匹配規則，利用root或alias指定資源路徑，使用try_files重定向至vue項目的index.html入口文件。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程