007.如何部署先後端分離式nginx配置

老生常談了，這裏談談個人理解的先後端分離，簡單的分離無非是將原來mvc的view層剝離出來，獨立一個成爲Servlet服務，Servlet之間依靠http連通。這裏的view Servlet容器能夠是任意一種服務端服務，Tomcat、Apache、Nginx、IIS，均可以。這裏以經常使用的Nginx爲例子作簡單的介紹。

需求分析

先來一波需求分析。

• 單項目
  • 單項目指的是一臺服務器部署一個前端服務，使www.xxx.com => index.html的單一指向。
• 多項目
  • 多項目指的是一臺服務器部署多個前端服務，使www.xxx.com/a => a.html,www.xxx.com/b => b.html等多指向。
• 請求代理。
• cookie domain重寫。
• cookie path 重寫。

提示：這裏作好寫conf.d/*.conf，這樣配置能夠分離處理。

公共配置

server{
    listen 80; # 配置端口
    server_name _; # 配置域名
    charset utf-8; # 編碼
    access_log /xxx/log/nginx_access.log main; # 成功日誌
    error_log  /xxx/log/nginx_error.log error; # 錯誤日誌
    index index.html; # 查找文件順序
    set $root /xxx/nginx/; # 變量設置，設置公共路徑
    
    # 其他location
}
複製代碼

• 請手動去/xxx/log/nginx_access.log和/xxx/log/nginx_error.log下新建對應文件。可能會執行nginx reload第一次執行時會報錯。
• set的$root路徑爲絕對路徑，access_log和error_log一樣都是絕對路徑。

單項目配置

目錄結構

nginx
|----- index.html
|----- user.html
複製代碼

location配置

location / {
	root $root;
}
複製代碼

好了最簡單的基於根路徑配置就這樣好了，這裏無非是經過location配置一條路徑，而後指向到$root文件夾下的index.html這個文件下。

多項目配置

目錄結構

nginx
|----- a
       |----- index.html
|----- b
       |----- index.html
複製代碼

多條location配置

location ^~ /a {
    alias $root/a;
}

location ^~ /b {
    alias $root/b;
}

location / {
    root $root;
}
複製代碼

跟單項目惟一的不一樣點在於，root和alias的區別，root指的是文件的絕對匹配路徑，而alias則是相對匹配。root能夠再http、server、location中配置，而alias只能在location中配置。這我還加入的正則^~，當匹配/a或者/b時，無論location的路徑是什麼，資源的真實路徑必定是都是 alias 指定的路徑。這樣的我就能讓/a、/b擁有匹配的到路徑以後，擁有跳轉固定路徑，這在spa式的前端項目很是有用的，由於其實核心文件只有一個index.html文件（資源文件另說）。這樣我永遠跳轉index.html就能保證瀏覽器手動刷新的時候，不會根據root路徑去查找服務器其餘路徑的資源。而後設置spa的根路徑和 /b必須是匹配的。

爲何會有這種需求？前端是輕便的，咱們爲了達到節約服務器與聚合同類型業務的時候，就會使用到這種機制。就像但願admin.xxxx.com/a => 運營管理臺、admin.xxxx.com/b => erp管理臺同樣。全部admin這個域名下咱們只要切出子路徑便可。簡單輕便。

請求轉發

location ^~ /api {
    proxy_pass http://api.xxx.com/;
}
複製代碼

這裏就特別簡單了，我經過正則匹配/api這個請求，經過proxy_pass屬性，將請求定向到http://api.xxx.com。便可

修改cookie domain

有時候處於安全考慮，咱們會設置必定的cookie的domain屬性這是對於nginx轉發來講就很不友好了。固然也是有解決手段的，也很簡單。

location {
    proxy_cookie_domain <本域的domain> <想修改的domain>;
}
複製代碼

修改cookie path

當咱們轉發回api接口時，有時候api域名拿不到cookie，除了domain還有cookie path的可能性。固然解決方案也很簡單

location {
    proxy_cookie_path  <本域的路徑> <想修改的路徑>;
}
複製代碼

後續優化

這只是nginx配置最簡單的一個例子，還有，開啓gzip、緩存設置、合併資源請求的插件、設置50x，40x頁面、判斷移動端，pc端跳轉等配置，nginx仍是很強大的。