小世界 主页归档标签
利用Nginx进行前后端分离项目部署-ruoyi

利用Nginx进行前后端分离项目部署

首先需要这个项目，利用git去仓库克隆：

1
git clone https://gitee.com/y_project/RuoYi-Vue.git

然后我们就获得了这个项目，你可以看到，这个项目分为：

  • ruoyi
  • ruoyi-ui

这两个文件夹，一个是后端，一个是前端。

根据正常的操作使用说明，我们先使用idea打开这个项目，更改一下项目的目标地址。一般都是在application.yml 文件上：

比如你可以改localhost，或者是其他的ip地址，我就改了ip地址。

当然，如果你仅仅需要部署到单个服务器上，其他的都别管，直接使用maven打包就行了。

后端的打包和运行很简单，这里不多赘述了

开始准备

我这里准备了三台虚拟机：

  1. 192.168.78.128
  2. 192.168.78.129
  3. 192.168.78.130

第二台和第三台虚拟机都是部署后端的jar包，我们准备使用Nginx进行负载均衡，这里我后端的数据库是连接前端的128的ip，因为只有同一个数据库才好进行负载均衡。

首先需要在128部署好docker，docker下安装好MySQL和Redis。

启动docker镜像，启动两个后端，紧接着我们来到前端进行部署。

安装Nodejs和Nginx

NodeJs

我这⾥下载的是 node-v12.16.3-linux-x64.tar.xz 安装包，并将其直接放在了 root ⽬录下。

1、在 /usr/local/ 下创建 node ⽂件夹并进⼊：

1
2
3
cd /usr/local/
mkdir node
cd node

2、将 Node 的安装包解压到 /usr/local/node 中即可

1
[root@localhost node]# tar -xJvf /root/node-v12.16.3-linux-x64.tar.xz

解压完之后， /usr/local/node ⽬录中会出现⼀个 node-v12.16.3-linux-x64 的⽬录

配置NODE系统环境变量

编辑 ~/.bash_profile ⽂件，在⽂件末尾追加如下信息:

1
2
# Nodejs
export PATH=/usr/local/node/node-v12.16.3-linux-x64/bin:$PATH

刷新环境变量，使之⽣效即可：

1
source ~/.bash_profile

检查安装结果

1
2
3
node -v
npm version
npx -v

Nginx

这⾥下载的是 nginx-1.17.10.tar.gz 安装包，并将其直接放在了 root ⽬录下

1、在 /usr/local/ 下创建 nginx ⽂件夹并进⼊:

1
2
3
cd /usr/local/
mkdir nginx
cd nginx

2、将 Nginx 安装包解压到 /usr/local/nginx 中即可：

1
[root@localhost nginx]# tar zxvf /root/nginx-1.17.10.tar.gz -C ./

解压完之后， /usr/local/nginx ⽬录中会出现⼀个 nginx-1.17.10 的⽬录

预先安装额外的依赖

1
2
yum -y install pcre-devel
yum -y install openssl openssl-devel

编译安装NGINX

1
2
3
cd nginx-1.17.10
./configure
make && make install

安装完成后，Nginx的可执⾏⽂件位置位于

1
/usr/local/nginx/sbin/nginx

启动NGINX

直接执⾏如下命令即可：

1
[root@localhost sbin]# /usr/local/nginx/sbin/nginx

如果想停⽌Nginx服务，可执⾏：

1
/usr/local/nginx/sbin/nginx -s stop

如果修改了配置⽂件后想重新加载Nginx，可执⾏：

1
/usr/local/nginx/sbin/nginx -s reload

注意其配置⽂件位于：

1
/usr/local/nginx/conf/nginx.conf

部署前端

把ruoyi-ui放在：

1
/root/workspace/ruoyi-ui/

文件夹下，并使用：

1
npm install --unsafe-perm --registry=https:registry.npm.taobao.org

–unsafe-perm：是为了更高的权限

–registry=https:registry.npm.taobao.org：拥有更快的镜像源

然后等待执行完毕。

执行完毕后，可以看到多了一个node模块。

接着输入：

1
npm run build:prod

开始建立，建立完成后，可以看到多了一个dist文件夹，这表示我们基本完成了环境的构建。

使用Nginx代理服务器完成部署

打开配置文件：

1
/usr/local/nginx/conf/nginx.conf

把最上的user注释改为：

1
user  root;

以此获得最大的权限。

接着，定位到：location /，并将其改为：

1
2
3
4
location / {
    root   /root/workspace/ruoyiui/dist;
    index  index.html index.htm;
}

如果页面发生了404错误，那么可以在这里修改为：

1
2
3
4
5
location / {
    root ...
    index ...
    try_files $uri $uri/ /index.html; ---解决页面刷新404问题
}

这句话的意思是，当访问uri没有的时候 尝试访问 index.html 由于vue是单页模式，所以入口都是index.html 无论访问什么连接都由vue本身接管

可以看到的是，这里的root路径，就是我们的前端路径。

启动nginx，然后我们可以打开节点：192.168.78.128

我们却发现，它出现了一点错误（暂时无图）

这个错误是地址引用错误，在验证码这个url错误，原因是正确的地址是：192.168.78.128/prod-api/xxxx

这表示，我们遗失了 prod-api 这个路径，那怎么办呢？

我们回到Nginx配置文件，添加一项：

1
2
3
4
5
6
7
       location /prod-api/ {
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://192.168.78.129:8080/;
       }

/usr/local/nginx/sbin/nginx -s reload ，重启Nginx，便可以了。

这里的前四段是标准写法，不用太多思考，最后的一段才是真正后端地址

负载均衡

需要在任意一个位置加上upstream：

1
2
3
4
   upstream ruoyi{
server 192.168.78.129:8080 weight=5;
server 192.168.78.130:8080 weight=3;
   }

并且把location /prod-api/ ，改为：

1
2
3
4
5
6
7
8

   location /prod-api/ {
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://ruoyi/;
       }

/usr/local/nginx/sbin/nginx -s reload，重启Nginx，这样Nginx便会自动的实现负载均衡。

SpringBoot项目Vue