前后端分離是現在很流行的Web開發模式,本文所介紹的項目,前端使用Vue開發,后端使用Spring Boot開發,是一個典型的前后端分離的Web系統。
1. 打包
前端使用WebStorm做為開發IDE,使用如下命令打包:
yarn run build
打包之后,得到一個名為"dist"的文件夾。
后端使用IDEA做為開發IDE,安裝了Maven插件,雙擊插件中的"package"完成打包,對應命令:
mvn clean package
打包之后在"target"目錄會生成一個名為"xxxx-0.0.1-SNAPSHOT.jar"的包。
2. 部署在Windows系統上
Windows系統部署比較簡單,首先安裝好JDK,安裝路徑為:C:\Programe Files\Java\jdk1.8.0_261\
環境變量設置如下:
(1)系統變量中新增JAVA_HOME變量,取值:
C:\Programe Files\Java\jdk1.8.0_261\
(2)系統變量新增JRE_HOME變量,取值:
C:\Program Files\Java\jre1.8.0_261
(3)系統變量中新增CLASSPATH變量,取值:
.;%JAVA_HOME%\lib;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;
(4)系統變量中修改PATH變量,在尾部加上:
;%JAVA_HOME%\bin;%JRE_HOME%\bin;
如果配置正確,執行: java -version 命令,即可得到java的版本號。
前端部署在IIS中,操作如下:
點擊“服務管理器” -> “角色” -> “Web服務器(IIS)” -> “Internet服務(IIS)管理器。
打開"主機名節點" -> "網站" -> "右鍵添加網站",輸入“網站名稱”、“路徑”、“端口”等信息。
然后將前端的“dist”文件夾中的內容,放到上面“路徑”對應的目錄中。
后端Spring Boot默認打包為jar包,打開命令行工具,使用命令:
java -jar xxxx-0.0.1-SNAPSHOT.jar
至此Windows上部署完成。
3. 部署在Linux系統上並實現負載均衡
Linux的JDK環境變量設置,見大數據框架環境安裝與配置01--服務器基本設置中的第5節,本文不再重復介紹。
Linux系統(Ubuntu),前端部署在Nginx上。nginx的基本配置,見這篇文章
將dist文件夾放在如下路徑:“/usr/local/lm/dist”
安裝Nginx,使用命令:
sudo apt-get install nginx
安裝完畢后,nginx的相關配置在“/etc/nginx”目錄中,對nginx進行如下配置:
(1)修改/etc/nginx/sites-available/default
cd /etc/nginx/sites-available
sudo vim default
編輯此文件,內容修改如下:
server {
listen 80 default_server;
listen [::]:80 default_server;
root /var/www/html;
index index.html index.htm index.nginx-debian.html;
server_name _;
location / {
try_files $uri $uri/ =404;
}
}
server { listen 8112;#端口 listen [::]:8112; server_name lm; root /usr/local/lm/dist;#對應的部署目錄 index index.html; location / { try_files $uri $uri/ =404; } }
保存並關閉。
(2)修改文件/etc/nginx/nginx/conf
cd /etc/nginx
sudo vim nginx.conf
將此文件第一行
user www-data;
修改為:
user root;
(3)添加文件/etc/nginx/conf.d/xxxx.conf,加入如下內容:
輪詢式的負載均衡配置如下:
upstream asen{#通過反向代理實現負載均衡
server 127.0.0.1:8112;#本機反向代理
server 119.45.xxx.83:8112;#slave1 反向代理
server 119.45.xxx.181:8112;#slave2 反向代理
server 47.95.xxx.145:8112;#windows主機 反向代理
}
server {
listen 80;
server_name 119.45.xxx.245;#本機公網IP
location / {
# 后端的Web服務器可以通過X-Forwarded-For獲取用戶真實IP
proxy_next_upstream error timeout invalid_header http_500 http_502 http_503 http_504;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_set_header X_Nginx_Proxy true;
proxy_pass http://asen;
proxy_redirect off;
}
}
通過上述設置,即可完成nginx的反向代理。並實現了本機以及另外兩台Ubuntu機器,和一台Windows機器的負載均衡。
實際項目中,可能不會這樣設置,本文只是為了驗證nginx反向代理的功能。
使用Nginx實現反向代理,對訪問者提供一個統一的訪問地址,在nginx接收到請求后,會根據自己配置的代理列表,根據負載均衡的策略選擇一台實際的服務器來處理。
如上面的設置,就是由master機器的80端口,統一接收請求,然后轉發給本機以及其他三台機器處理。
權重式負載均衡配置如下:
upstream asen{#通過反向代理實現負載均衡
server 127.0.0.1:8112 weight=1;#權重1
server 119.45.xxx.83:8112 weight=5;#權重5
server 119.45.xxx.181:8112 weight=5;#權重5
server 47.95.xxx.145:8112 weight=10;#權重10
}
server {
listen 80;
server_name 119.45.xxx.245;#本機公網IP
location / {
# 后端的Web服務器可以通過X-Forwarded-For獲取用戶真實IP
proxy_next_upstream error timeout invalid_header http_500 http_502 http_503 http_504;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_set_header X_Nginx_Proxy true;
proxy_pass http://asen;
proxy_redirect off;
}
}
ip_hash式權重配置如下(每個客戶端固定訪問某一台服務器):
upstream asen{#通過反向代理實現負載均衡
ip_hash;
server 127.0.0.1:8112;#本機反向代理
server 119.45.xxx.83:8112;#slave1 反向代理
server 119.45.xxx.181:8112;#slave2 反向代理
server 47.95.xxx.145:8112;#windows主機 反向代理
}
server {
listen 80;
server_name 119.45.xxx.245;#本機公網IP
location / {
# 后端的Web服務器可以通過X-Forwarded-For獲取用戶真實IP
proxy_next_upstream error timeout invalid_header http_500 http_502 http_503 http_504;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_set_header X_Nginx_Proxy true;
proxy_pass http://asen;
proxy_redirect off;
}
}
對上述幾台機器進行說明:
slave1機器,ip地址為:119.45.xxx.83,這台機器也需要安裝web服務器,本文使用nginx。然后設置 /etc/nginx/sites-available/default ,/etc/nginx/nginx/conf
這兩個文件,但是不要添加/etc/nginx/conf.d/xxxx.conf 這個文件。設置方式與本節(1)、(2)內容一致。
slave2機器,ip地址為:119.45.xxx.181,這台機器與上面的slave1設置相同。
這兩台機器都監聽8112端口。
而windows機器,ip地址為:47.95.xxx.145,配置方式如本文的第二部分“部署在Windows系統上”配一樣,即使用IIS監聽8112端口。
接下來在master、slave1、slave2三台機器上分別運行如下命令,啟動spring boot后端程序:
cd /usr/local/lm
nohup java -jar lm.jar > log.file 2>&1 &
這樣三台Ubuntu機器的后端就啟動了。
可以通過http://master公網IP:80端口訪問頁面,並實現nginx反向代理的負載均衡:
http://119.45.xxx.245:80/
使用瀏覽器的開發人員工具,查看網絡請求,可以發現頁面實際的請求地址,可能是在負載均衡配置中的任意一台主機上。
