前后端分离是现在很流行的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/
使用浏览器的开发人员工具,查看网络请求,可以发现页面实际的请求地址,可能是在负载均衡配置中的任意一台主机上。