前后端分离是现在很流行的Web开发模式，本文所介绍的项目，前端使用Vue开发，后端使用Spring Boot开发，是一个典型的前后端分离的Web系统。
1. 打包
前端使用WebStorm做为开发IDE，使用如下命令打包：
yarn run build
打包之后，得到一个名为"dist"的文件夹。
后端使用IDEA做为开发IDE，安装了Maven插件，双击插件中的"package"完成打包，打包之后在"target"目录会生成一个名为"xxxx-0.0.1-SNAPSHOT.jar"的包。
2. 部署在Windows系统上
Windows系统部署比较简单，首先安装好JDK，安装路径为：C:Programe FilesJavajdk1.8.0_261
环境变量设置如下：
(1)系统变量中新增JAVA_HOME变量，取值：
C:Programe FilesJavajdk1.8.0_261
(2)系统变量新增JRE_HOME变量，取值：
C:Program FilesJavajre1.8.0_261
(3)系统变量中新增CLASSPATH变量，取值：
.;%JAVA_HOMElib;%JAVA_HOME%libdt.jar;%JAVA_HOME%lib ools.jar;
(4)系统变量中修改PATH变量，在尾部加上：
;%JAVA_HOME%in;%JRE_HOME%in;
如果配置正确，执行： 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上。
将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反向代理的功能。
对上述几台机器进行说明：
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/
使用浏览器的开发人员工具，查看网络请求，可以发现页面实际的请求地址，可能是在负载均衡配置中的任意一台主机上。