前后端分离项目：下载、运行、配置、构建、打包、部署：全部实战演习

 

项目部署演习

 

项目下载、运行、配置、构建、打包、部署：全部实战演习，前后端分离项目

 

本机环境：

前端：

系统版本：Centos 8

部署软件：Nginx，Mysql、Redis

IP地址：192.168.152.53

 

后端：

系统版本：Centos 7

部署软件：Tomcat

IP地址：192.168.152.253

 

一、gitee中下载开源项目RuoYi-Vue前后端分离版

### 因为是采用SpringBoot编写，所以必定先安装java环境 wget https://repo.huaweicloud.com/java/jdk/11.0.2+7/jdk-11.0.2_linux-x64_bin.rpm
rpm -ivh jdk-11.0.2_linux-x64_bin.rpm ### 安装git命令 yum -y install git-all ## 下载项目到本地，所有的主机均要下载 git clone https://gitee.com/vfancloud/RuoYi-Vue.git
 ## 克隆完毕后，会在当前你文件夹出现此目录 [root@TestCentos7 ruoyi]# ls RuoYi-Vue ### RuoYi文件夹下有以下文件，ruoyi-ui为项目的前端，ruoyi为项目的后端 [root@TestCentos7 RuoYi-Vue]# ls LICENSE README.md ruoyi ruoyi-ui ### 整体的目录结构，可以使用tree命令查看 tree ruoyi

 

二、修改后端配置文件(仅修改后端服务器即可)

### 后端应用需要配置mysql、redis等服务信息,配置为真实地址 ## 配置mysql vim ruoyi/src/main/resources/application-druid.yml ... druid: # 主库数据源 master: url: jdbc:mysql://192.168.152.53:3306/ry-vue?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8
 username: root password: root1 ... ### 以上源代码中表示，要读取数据库ry-vue,所以创建数据库ry-vue mysql> create database `ry-vue` character set utf8mb4; ### 将数据表数据导入数据库,数据表结构在ruoyi/sql/下 mysql> use ry-vue; mysql> source /var/ruoyi/RuoYi-Vue/ruoyi/sql/quartz.sql; mysql> show tables; # 查看会发现添加了许多表 ### 数据导入后，如果后端服务器于mysql所在服务器不是在同一个主机下，记得创建用户并赋予权限 mysql> CREATE USER 'root'@'192.168.152.253' IDENTIFIED BY 'root1'; mysql> GRANT ALL PRIVILEGES ON *.* TO root@192.168.152.253; ## 配置Redis vim ruoyi/src/main/resources/application.yml ... redis: # 地址 host: 192.168.152.53 # 端口，默认为6379 port: 6379 # 密码 password: redis # 连接超时时间 timeout: 10s ... ## 配置日志路径 vim ruoyi/src/main/resources/logback.xml ... <!-- 日志存放路径 -->
  <property name="log.path" value="/var/ruoyi/logs" /> ## 将所有的<encoder></encoder>中添加<charset>UTF-8</charset>，以防日志乱码 ## 一共有四处 <encoder>
      <pattern>${log.pattern}</pattern>
      <charset>UTF-8</charset>
    </encoder> ...

 

三、前端项目安装依赖、打包

## 查看当前目录文件 [root@Centos8 ruoyi-ui]# ll -h 总用量 20K -rw-r--r--  1 root root   58 6月  12 13:45 babel.config.js drwxr-xr-x  2 root root   61 6月  12 13:45 bin drwxr-xr-x  2 root root   22 6月  12 13:45 build drwxr-xr-x  3 root root   22 6月  14 12:20 node_modules -rw-r--r--  1 root root 2.9K 6月  12 13:45 package.json drwxr-xr-x  2 root root   61 6月  12 13:45 public -rw-r--r--  1 root root  460 6月  12 13:45 README.md drwxr-xr-x 11 root root  203 6月  12 13:45 src -rw-r--r--  1 root root 4.5K 6月  12 13:45 vue.config.js ### 前端服务器需要安装以下依赖 cd RuoYi-Vue/ruoyi-ui/ npm install --unsafe-perm --registry=https://registry.npm.taobao.org
 ## 此处用的npm工具，如没有，先行安装 yum install -y npm 或 wget https://npm.taobao.org/mirrors/node/v10.14.1/node-v10.14.1-linux-x64.tar.gz
tar zxvf node-v10.14.1-linux-x64.tar.gz -C /usr/local ln -s /usr/local/node-v10.14.1-linux-x64/bin/* /usr/bin/ ## 开始打包 npm run build:prod ## 打包完成后，会在当前目录下产生dist目录 [root@Centos8 ruoyi-ui]# ll -d dist/ drwxr-xr-x 3 root root 75 6月 14 16:34 dist/ ## 里边的内容 [root@Centos8 ruoyi-ui]# ls dist/ favicon.ico index.html robots.txt static ## 将前端打包好的文件放置nginx的html目录 [root@Centos8 ruoyi-ui]# cp -r dist/* /usr/share/nginx/html ## 启动nginx，测试访问 systemctl start nginx

 

测试访问

浏览器中输入http://192.168.152.53/

 

前端界面已经可以显示，但是验证码登录等后端功能还不能实现

下边开始配置后端服务器

 

四、后端打包，分别打jar包和war包

jar包：程序内嵌tomcat，直接运行即可

war包：需要放入服务器中tomcat的webapp目录下

## 查看当前目录文件 [root@TestCentos7 RuoYi-Vue]# cd ruoyi [root@TestCentos7 ruoyi]# ll -h 总用量 12K drwxr-xr-x 2 root root   84 6月  14 11:09 bin -rw-r--r-- 1 root root 7.8K 6月  14 11:09 pom.xml -rwxr-xr-x 1 root root 1.6K 6月  14 11:09 ry.sh drwxr-xr-x 2 root root   29 6月  14 11:09 sql drwxr-xr-x 3 root root   18 6月  14 11:09 src ## 开始打jar包 [root@TestCentos7 ruoyi]# mvn package ## 需要先行安装mvn wget https://mirrors.bfsu.edu.cn/apache/maven/maven-3/3.6.3/binaries/apache-maven-3.6.3-bin.tar.gz
tar zxvf apache-maven-3.6.3-bin.tar.gz -C /usr/local/
ln -s /usr/local/apache-maven-3.6.3/bin/mvn /usr/bin/ ## 打包完成后，会在当前目录生成target目录 [root@TestCentos7 ruoyi]# ll -h drwxr-xr-x 2 root root   84 6月  14 11:09 bin -rw-r--r-- 1 root root 7.8K 6月  14 11:09 pom.xml -rwxr-xr-x 1 root root 1.6K 6月  14 11:09 ry.sh drwxr-xr-x 2 root root   29 6月  14 11:09 sql drwxr-xr-x 3 root root   18 6月  14 11:09 src drwxr-xr-x 6 root root  131 6月  14 12:49 target ## 进入target目录，查看里面的jar包 [root@TestCentos7 ruoyi]# cd target/ [root@TestCentos7 target]# ls ruoyi.jar ruoyi.jar.original classes generated-sources  maven-archiver  maven-status ## 将jar包进行备份 [root@TestCentos7 target]# cp -a ruoyi.jar ../ ## 执行jar包 nohup java -jar ruoyi.jar &

------------- 以上jar包打包完成，下边分享war包的打包方法 --------------
----------- 特别注意一下 后端的Mysql和Redis 不要忘记启动啊 ------------ ## 因为此代码默认是打jar包，所以如果想打war包，还需修改一些配置 vim ruoyi/pom.xml ... <groupId>com.ruoyi</groupId>
        <artifactId>ruoyi</artifactId>
        <version>1.0</version>
        <packaging>war</packaging> # 主要是这条 ... ## 修改完war包的配置后，还要将jar包自己内嵌的tomcat移除掉 ## 同样是pom.xml，修改<!-- SpringBoot Web容器 -->这一段 vim ruoyi/pom.xml ... <!-- 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> ... ## 修改完以上配置之后，还要修改一个主函数的启动类 cd RuoYi-Vue/ruoyi/src/main/java/com/ruoyi vim SpringBootStartApplication.java ... package com.ruoyi; import org.springframework.boot.builder.SpringApplicationBuilder; import org.springframework.boot.web.servlet.support.SpringBootServletInitializer; public class SpringBootStartApplication extends RuoYiServletInitializer{ @Override protected SpringApplicationBuilder configure(SpringApplicationBuilder builder){ return builder.sources( RuoYiApplication.class ); } } ... ### 下边开始打war包 ## 首先先将之前的打jar包清理一下，清理之后target目录会消失 [root@TestCentos7 ruoyi]# mvn clean ## 开始打war包，依旧执行 [root@TestCentos7 ruoyi]# mvn package ## 打包完成后，同样生成target目录 root@TestCentos7 ruoyi]# ls bin pom.xml ruoyi.jar ry.sh sql src target ## 进入target将war包备份 [root@TestCentos7 target]# cp -a ruoyi.war ../ ## 将生成的war包直接放置tomcat的webapp目录下 [root@TestCentos7 ruoyi]# cp ruoyi.war /usr/local/apache-tomcat-9.0.36/webapps/ ## 启动tomcat cd /usr/local/apache-tomcat-9.0.36/bin ./startup.sh

以上jar包和war包两种方法均可实现功能

在jar或war都配置完毕并且启动后，还要去nginx做一个流量转发代理

才能实现后端流量的自动接入

 

可以看到，在登录时请求的是prod-api目录下的某个文件，所以要基于这个目录进行一个流量转发

## 在nginx.conf文件下的http模块中添加以下配置 vim /etc/nginx/nginx.conf ... 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.152.253:8080/;
 } ... ## 随后保存退出，重新加载nginx nginx -s reload

 

再次尝试打开网页，验证码等已经出现~  已经可以登录进行配置~