前后端分离是现在很流行的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/

使用浏览器的开发人员工具,查看网络请求,可以发现页面实际的请求地址,可能是在负载均衡配置中的任意一台主机上。

 

posted on 2020-09-05 08:31  Sempron2800+  阅读(2315)  评论(0编辑  收藏  举报