发布：2024/1/16 12:29:39作者：管理员 来源：本站 浏览次数：653

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

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