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

概述项目部署演习 项目下载、运行、配置、构建、打包、部署：全部实战演习，前后端分离项目 本机环境： 前端： 系统版本：Centos 8 部署软件：Nginx，Mysql、Redis IP地址：192.16

 

项目部署演习

 

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

 

本机环境：

前端：

系统版本：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.rpmrpm -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]# lsRuoYi-Vue### RuoYi文件夹下有以下文件，ruoyi-ui为项目的前端，ruoyi为项目的后端[root@TestCentos7 RuoYi-Vue]# liCENSE  README.md  ruoyi  ruoyi-ui### 整体的目录结构，可以使用tree命令查看tree ruoyi

 

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

### 后端应用需要配置MysqL、redis等服务信息,配置为真实地址## 配置MysqLvim 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-vueMysqL> 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;## 配置Redisvim ruoyi/src/main/resources/application.yml...  redis:    # 地址    host: 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.Jsdrwxr-xr-x  2 root root   61 6月   bindrwxr-xr-x  22 6月   builddrwxr-xr-x  3 root root   14 12:20 node_modules-rw-r--r--  1 root root 2.9K 6月   package.Jsondrwxr-xr-x   public-rw-r--r--  1 root root  460 6月   README.mddrwxr-xr-x 11 root root  203 6月   src-rw-r--r--  4.5K 6月   vue.config.Js### 前端服务器需要安装以下依赖cd RuoYi-Vue/ruoyi-ui/npm install --unsafe-perm --registry=https:registry.npm.taobao.org## 此处用的npm工具，如没有，先行安装yum install -y npm 或 npm.taobao.org/mirrors/node/v10.14.1/node-v10.14.1-linux-x64.tar.gztar zxvf node-v10.14.1-linux-x64.tar.gz -C /usr/localln -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 总用量 12Kdrwxr-xr-x 84 6月  11:09 bin-rw-r--r-- 7.8K 6月   pom.xml-rwxr-xr-x 1.6K 6月  09 ry.shdrwxr-xr-x 29 6月   sqldrwxr-xr-x 18 6月   src## 开始打jar包[root@TestCentos7 ruoyi]# mvn package## 需要先行安装mvnmirrors.bfsu.edu.cn/apache/maven/maven-3/3.6.3/binarIEs/apache-maven-3.6.3-bin.tar.gztar zxvf apache-maven-3.6.3-bin.tar.gz -C /usr/local/ln -s /usr/local/apache-maven-3/bin/mvn /usr/bin/## 打包完成后，会在当前目录生成target目录[root@TestCentos7 ruoyi]# ll -h drwxr-xr-x  srcdrwxr-xr-x 6 root root  131 6月  49 target## 进入target目录，查看里面的jar包[root@TestCentos7 ruoyi]# cd target/[root@TestCentos7 target]# 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/ruoyivim 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]# bin  pom.xml  ruoyi.jar  ry.  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/## 启动tomcatcd /usr/local/apache-tomcat-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/;      }...## 随后保存退出，重新加载NginxNginx -s reload

 

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

总结

以上是内存溢出为你收集整理的前后端分离项目：下载、运行、配置、构建、打包、部署：全部实战演习全部内容，希望文章能够帮你解决前后端分离项目：下载、运行、配置、构建、打包、部署：全部实战演习所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。