“虚拟机上部署一个前后端分离项目（若依-ruoyi）实验”

2020-06-30

实验

字数统计: 1.5k | 阅读时长≈ 6 分钟

来源于B站UP主CodeSheep。

若依（ruoyi）项目部署

该项目是B站UP主程序羊CodeSheep的一个开源在gitee上的项目，参照他的讲解，将这个项目部署在本地的虚拟机上。

1. 项目简介

这是个一个前后端分离的权限管理系统。
项目来源于：https://gitee.com/y_project/RuoYi-Vue/blob/master/README.md#only_comment_project
前端采用Vue、Element UI。
后端采用Spring Boot、Spring Security、Redis & Jwt。
权限认证使用Jwt，支持多终端认证系统。
支持加载动态权限菜单，多方式轻松权限控制。

2. 虚拟机与环境准备

准备3台虚拟机，做好一些简单的配置，网卡、防火墙等等。。。
虚拟机的环境配置可以参考下图：

3. 代码下载

网址：https://gitee.com/y_project/RuoYi-Vue/blob/master/README.md#only_comment_project
使用git软件克隆到本地，因为我们还要用编译器做一些修改，之后再上传到服务器上：
1
git clone https://gitee.com/y_project/RuoYi-Vue.git

4. 使用IDEA进行本地导入

上述步骤中下载好的代码，现在可以使用IDEA软件打开：

5. 修改配置

5.1. 修改数据库配置

在IDEA中修改项目src目录下的resource下的application-druid.yml中的数据库配置，分别是数据库所在主机的ip地址，数据库用户名和密码：
在Navicat中创建ry-vue数据库：
将项目中的sql文件导入ry-vue数据库，创建表：
- 对应的sql文件位于：
- 导入成功后，ry-vue数据库中有30张表：

5.2. 修改Redis配置

主要修改reids的ip地址和密码：

5.3. 修改日志配置

修改日志存放路径（本地路径）和日志的编码格式：

测试：

跑一下，看是否还有故障：

6. 项目上传、构建、打包

6.1. 上传项目

借助Xftp工具将前端代码传到/root/ruoyi文件夹下（这里我使用先在本地压缩的方式，防止出现错误）：

使用unzip命令进行解压。
同理，借助Xftp将后端代码也上传到其他的两台主机上。

6.2. 前端项目构建与打包

先安装依赖，需要node.js的支持：npm install --unsafe-perm --registry=https://registry.npm.taobao.org

会多出两个文件：
开始打包：
npm run build:prod
打包完成之后，会在当前前端项目的目录下生成一个dist目录：

6.3. 后端项目构建与打包（jar包）

进入到后端代码文件中cd ,
mvn package
打包完成之后，会在当前目录下生成一个target文件，里面有我们需要的jar包：

6.4. 后端项目构建与打包（war包）

打war包之前需要先在本地修改一些后端代码。主要有修改pom文件中的打包形式、spring boot容器里面的内置tomcat服务器要去除、添加一个启动类。

pom文件中的打包形式：

<groupId>com.ruoyi</groupId>
<artifactId>ruoyi</artifactId>
<version>2.3.0</version>
<packaging>war</packaging>

pom文件中修改打包时的内置容器tomcat:

<!-- SpringBoot Web容器 -->
   <dependency>
       <groupId>org.springframework.boot</groupId>
       <artifactId>spring-boot-starter-web</artifactId>
   </dependency>
   <!--添加如下代码-->
   <dependency>
       <groupId>org.springframework.boot</groupId>
       <artifactId>spring-boot-starter-tomcat</artifactId>
       <scope>provided</scope>
   </dependency>

添加启动类：
创建SpringBootStartApplication.class。

package com.ruoyi;

import org.springframework.boot.builder.SpringApplicationBuilder;
import org.springframework.boot.web.servlet.support.SpringBootServletInitializer;

public class SpringBootStartApplication extends SpringBootServletInitializer {

    @Override
    protected SpringApplicationBuilder configure(SpringApplicationBuilder builder) {
        return builder.sources( RuoYiApplication.class );
    }
}

我们主要修改了这两个文件，那么我们只要将这两个文件重新上传到后端服务器上。

开始打war包：
先执行下清理mvn clean将之前打jar包时的target文件清理掉。记得先将jar包拷贝出来。
开始打包mvn package，之后生成target文件，里面有ruoyi.war了。war包需要放入tomcat中才可以运行的。

7. 项目服务器部署

7.1. 前端项目部署

在前端代码的主机上配置nginx，我的nginx是在/usr/local/nginx/conf/nginx.conf下，前端代码所在目录为/ruoyi/dist，修改如下代码：
启动nginx（nginx -s quit 正常停止或关闭Nginx），之后通过ip地址即可访问。

7.2. 后端项目部署

7.2.1. jar包部署

进入后端文件夹，执行jar包nohup java -jar ruoyi.jar &
连接前后端，在前端随便输入验证码点击登录，F12查看页面代码：

重新进入nginx.conf文件中修改下配置，添加：

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

重新加载下nginx：/nginx -s reload，之后便可以登录进入后台。

7.2.2. war包部署

先杀死之前的jar包进程：
1
2
ps -aux | grep java
kill -9 进程号
查看tomcat的部署路径，拷贝ruoyi.war到该tomcat的webapps路径下：
1
2
cd /tomcat/webapps
cp /ruoyi/ruoyi.war ./
重启tomcat：tomcat.service restart，其自动生成了ruoyi文件夹。