前言

前后端分離，是指前端html頁面與后端開發(fā)獨(dú)立、運(yùn)行（部署）獨(dú)立。

物料準(zhǔn)備

部署物料

• 編譯好的前端代碼
• 打包好的后端java程序
• 穩(wěn)定版的 Ngnix 前往下載

圖1：物料清單

安裝Ngnix（windows）

將下載好的nginx-1.22.1.zip 解壓進(jìn)行雙擊 nginx.exe 進(jìn)行安裝：

圖2：安裝Nginx

驗(yàn)證Nginx 安裝，訪問：http://localhost

圖2：安裝Nginx

表示安裝成功，在Windows環(huán)境安裝，需要注意，安裝目錄不能有中文。

部署應(yīng)用

發(fā)布規(guī)劃

• 通過 example.org 能夠訪問到頁面
• 啟動(dòng)2個(gè)后端節(jié)點(diǎn)做負(fù)載均衡

配置代理

為了后面更好的維護(hù)代理的配置文件，在 conf 目錄下新建一個(gè)conf.d的目錄，用于存放后續(xù)擴(kuò)展的配置。然后通過 include conf.d/*.conf 引入到nginx.conf主配置文件中。

圖3：Nginx配置目錄

圖4：引入子配置文件目錄

注：includ 子配置文件的路徑是相對路徑，基于 conf目錄；當(dāng)然也可以用絕對路徑。

配置前端靜態(tài)代理

創(chuàng)建conf.d/example.conf配置文件，并配置前端代理。

server {
    listen 80;
    server_name example.org;
    location / {
    # 存放靜態(tài)資源的路徑，此處是相對路徑，以 Nginx 根路徑為基礎(chǔ)，也可以用絕對路徑
      root www/html;
    }
}

圖5：靜態(tài)資源存放路徑

配置后端反向代理

首先，跟前端開發(fā)進(jìn)行約定，通過/api前綴訪問后端接口，在Nginx就可以通過/api的代理路徑，反向代理到后端接口。同時(shí)，按照我們的發(fā)布規(guī)劃，后端需要做負(fù)載。

去到conf.d/example.conf配置文件中，配置后端的方向代理，并做負(fù)載。

upstream backend {
   # 因?yàn)樵诒镜夭渴?，所以是localhost，可以是不同的服務(wù)器IP或者域名
   server localhost:8080;
   server localhost:8081;
}

server {
    listen 80;
    server_name example.org;
    location / {
    # 存放靜態(tài)資源的路徑，此處是相對路徑，以 Nginx 根路徑為基礎(chǔ)，也可以用絕對路徑
      root www/html;
    }
    
    location /api/ {
      proxy_pass http://backend/;
    }
}

提示：完成上面配置之后，確保后端應(yīng)用程序啟動(dòng)的2個(gè)節(jié)點(diǎn)的端口是 8080 和8081。

更新Nginx 配置，使其生效：

./nginx.exe -s reload

驗(yàn)證部署

添加 hosts

127.0.0.1 example.org

瀏覽器輸入：http://example.org 訪問

圖6：部署驗(yàn)證

至此，項(xiàng)目部署完成。

總結(jié)

• Nginx 安裝目錄不能有中文
• Nginx 靜態(tài)目錄的相對路徑是基于Nginx安裝的根目錄
• Nginx 子配置文件的相對路徑是基于conf 目錄