nginx+node+vue+node部署個簡單的先後端分離應用

前言

linux服務器上使用nginx部署前端靜態資源和反向代理後臺接口。

nginx

簡介

官網介紹

nginx(engine x)是一款輕量級的Web服務器/反向代理服務器及電子郵件代理服務器。

安裝配置

安裝

安裝完，使用nginx -v,查看是否安裝成功。

命令行參數

• nginx -v 能夠查詢版本
• nginx -t 測試配置文件
• nginx -s signal
  • nginx -s stop 快速關閉
  • nginx -s quit 優雅地關閉（處理完全部的請求）
  • nginx -s reopen 從新打開日誌文件
  • nginx -s reload 從新加載配置（開啓一個新的工做進程來使用新的配置，優雅地關閉老的工做進程）
• nginx -p 前綴名稱 設置nginx路徑前綴（默認/usr/share/nginx）
• nginx -c 文件名稱 設置新的配置文件
• nginx -g 指令名稱 設置全局的指令

配置文件

linux系統安裝完，有個默認的nginx.conf配置文件通常在/etc/nginx目錄下。

nginx的配置文件主要由幾個指令控制的模塊組成。這些指令有簡單的指令和塊級指令（模塊）。簡單的指令包括名稱和參數，二者之間要有空格，使用逗號結尾。模塊由花括號組成。使用#來註釋。

官網上列出的全部指令

默認文件如上圖，#註釋掉的指令，不少爲默認配置或者提示如何配置。咱們要搭建一個http服務器，最主要的是配置http模塊裏的內容。

http模塊裏能夠配置簡單的指令，好比要引入的媒體類型文件等等。最重要的仍是要配置server模塊，會涉及到的監聽端口，域名，路由匹配等等。

server詳解

官網server解釋

server主要是配置一個虛擬的服務器，配置ip地址和域名均可以，listen指令監聽鏈接虛擬服務器的地址和端口號，server_name指令能夠列出全部server names。

listen

官網listen解釋

listen指令配置的主要是ip地址和端口。ip地址和端口或者ip地址或者主機名：

• listen 127.0.0.1:8000;
• listen 127.0.0.1;
• listen 8000;
• listen *:8000;
• listen localhost:8000;

只有ip地址的話，默認是80端口。

server_name

設置虛擬服務器的名字，能夠是多個。根據請求中的HOST字段，能夠匹配特定的server塊。

詳解

location

根據請求的URI,配置不一樣的處理，至關於路由。

location值能夠爲特定的字符串或者一個正則表達式。nginx優先檢查特定字符串，而且採用匹配到最長的字符串定義的location。根據正則表達式在配置文件出現的前後順序檢查。若是沒有匹配到正則表達式，則使用以前的location。

• ~*修飾符 忽略大小寫
• ~修飾符 大小寫敏感
• ^~修飾符 不使用正則
• =修飾符 精準匹配
• @ 重定向

proxy_pass

官網解釋

根據特定location中匹配到的URI，設置被代理的虛擬服務器協議和地址。http或者https協議必需要有，地址能夠是具體的域名或者ip地址（端口號無關緊要）。例如：

proxy_pass http://localhost:8000/uri/;
複製代碼

nginx變量

官網上列出的全部變量

諸如：$host $remote_addr

一個簡單demo

咱們將vue完成的前端包部署在 /data/vue-app/dist目錄下，將node開發的後臺應用部署啓動後，監聽7001端口。URI匹配到 /,就會去前端包的主頁，因爲是單頁面應用且路由是history模式，因此有個 try_files指令的對未匹配到的路徑時，讓應用進入主頁的處理，而當匹配 /api/路徑下的xhr請求時，則會轉發到node寫的後臺應用。例如URI是 /api/login時，nginx就會轉發到node後臺應用，後臺服務給出響應，再經過nginx返給前端。

後臺node應用是用阿里開源的 eggjs寫的，經過nginx的簡單配置，實現先後端分離和nginx的反向代理。