前后端分离项目：下载、运行、配置、构建、打包、部署：全部实战演习
项目部署演习
项目下载、运行、配置、构建、打包、部署：全部实战演习，前后端分离项目
本机环境：
前端：
系统版本：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
再次尝试打开网页，验证码等已经出现~ 已经可以登录进行配置~