前后端分离项目部署vue+springboot

简介: 从oracle官方网站上下载1.8版本中的最新版的JDK。下载完成后,把文件通过WinSCP或者XFTP上传到服务器上。接着进行解压和配置环境变量。

看完本教程你会学到


1 项目下载

2 运行

3 配置

4 打包

5 前后端的部署

6 linux环境下操作软件

7 git基本操作

8 maven基本操作

9 nginx基本操作

10 node基本操作

11 docker简单使用

12 redis基本操作

13 mysql基本操作


20210502153637849.png


系统环境需求


阿里云CentOS8.2
JDK >= 1.8
MySQL >= 5.7
Maven >= 3.0
Redis
Node.js
Nginx


新建目录


#tmp存放临时安装包
mkdir -p /data/tmp
#service存放软件环境
mkdir -p /data/service
#gitee存放代码版本控制库
mkdir -p /data/gitee


以上目录非必须,可以自行选择安装路径。


JDK >= 1.8 (推荐1.8版本)


从oracle官方网站上下载1.8版本中的最新版的JDK。下载完成后,把文件通过WinSCP或者XFTP上传到服务器上。接着进行解压和配置环境变量。


下载地址:https://www.oracle.com/java/technologies/javase/javase-jdk8-downloads.html


#进入安装包目录,解压
cd /data/tmp
tar -zxvf jdk-8u261-linux-x64.tar.gz
#把解压出来的文件夹转移到统一的地方
mv /data/tmp/jdk1.8.0_261 /data/service/jdk1.8.0_261
#修改环境变量/etc/profile,JAVA_HOME修改为自己的jdk路径。
vim /etc/profile
export JAVA_HOME=/data/service/jdk1.8.0_261
export PATH=$PATH:$JAVA_HOME/bin
#使环境变量生效
source /etc/profile
#检查是否配置成功
java -version


Maven >= 3.0


从Maven官方网站上下载最新版的压缩包。下载完成后,进行解压和配置环境变量。


下载地址:https://maven.apache.org/download.cgi


#进入安装包目录,解压
cd /data/tmp
tar -zxvf apache-maven-3.6.3-bin.tar.gz
mv apache-maven-3.6.3 /data/service/
#修改环境变量/etc/profile,MAVEN_HOME修改为自己的路径。
export MAVEN_HOME=/data/service/apache-maven-3.6.3
export PATH=$PATH:$MAVEN_HOME/bin
#使环境变量生效
source /etc/profile
#检查是否配置成功
mvn -v


Git


从git官方网站上下载最新版的安装包,安装即可。


下载地址:https://git-scm.com/


#通过yum安装,本方法最简单。但是无法控制安装的版本
yum -y install git
#检查是否配置成功
git --version


安装之后,在git仓库中需要添加SSH公钥


ssh-keygen -t rsa -C "xx@xx.com"
cat ~/.ssh/id_rsa.pub


安装docker


#卸载旧版本
sudo yum remove docker \
                docker-client \
                docker-client-latest \
                docker-common \
                docker-latest \
                docker-latest-logrotate \
                docker-logrotate \
                docker-engine
#安装 Docker Engine-Community
sudo yum install -y yum-utils device-mapper-persistent-data lvm2
sudo yum-config-manager \
  --add-repo \
  http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo
sudo yum install docker-ce docker-ce-cli containerd.io
sudo systemctl start docker


注意:如果安装docker-ce报错,可以执行以下语句,再进行安装。


yum install https://download.docker.com/linux/fedora/30/x86_64/stable/Packages/containerd.io-1.2.6-3.3.fc30.x86_64.rpm


Mysql >= 5.7 (注意生产项目mysql都是独立部署)


安装教程:https://www.runoob.com/mysql/mysql-install.html

下载地址:https://dev.mysql.com/downloads/mysql/


访问Mysql的可视化数据库开发工具:Navicat Premium 工具的安装教程可自行搜索。


在Docker中安装MySQL。


#查看可用的 MySQL 版本
docker search mysql
#拉取5.7版本
docker pull mysql:5.7
#创建配置文件目录
mkdir -p /data/docker/mysql/conf
#进入配置文件目录,添加一个配置文件
vim my.cnf
#启动镜像
docker run -p 3306:3306 --name mysql -v /data/docker/mysql/conf:/etc/mysql/conf.d -e MYSQL_ROOT_PASSWORD=Vv0IBQ5qST -d mysql:5.7


[mysqld]
character-set-server=utf8
[mysql]
default-character-set=utf8


#进入docker容器设置env LANG=C.UTF-8
docker exec -it mysql env LANG=C.UTF-8 bash


注意1:MySQL(5.7.19)的默认配置文件是 /etc/mysql/my.cnf 文件。如果想要自定义配置,建议向 /etc/mysql/conf.d 目录中创建 .cnf 文件。新建的文件可以任意起名,只要保证后缀名是 cnf 即可。


注意2:在mysql的镜像启动之前,创建配置文件目录,并放置好配置文件。这样mysql启动的时候,就可以直接使用配置好的参数。以下内容是配置数据库的字符集为utf-8。


注意3:如果使用docker进入mysql数据库执行包含中文的sql语句,出现中文乱码的情况,需要在容器系统中设置使用中文包。所以进入docker容器时需要设置环境语言:


Redis


安装教程:https://www.runoob.com/redis/redis-install.html

下载地址:https://github.com/tporadowski/redis/releases


Redis可视化管理工具:[AnotherRedisDesktopManager]:(https://github.com/qishibo/AnotherRedisDesktopManager/releases)


docker pull redis:latest
docker run -itd --name redis-test -p 6379:6379 redis
开启redis
docker start redis-test


Node.js


安装教程:https://www.runoob.com/nodejs/nodejs-install-setup.html


tar xf node-v14.15.4-linux-x64.tar.xz       // 解压
cd node-v14.15.4-linux-x64/                 // 进入解压目录
./bin/node -v                               // 执行node命令 查看版本
//解压文件的 bin 目录底下包含了 node、npm 等命令,我们可以使用 ln 命令来设置软连接:
mv /data/tmp/node-v14.15.4-linux-x64 /data/service/
ln -s /data/service/node-v14.15.4-linux-x64/bin/npm   /usr/local/bin/ 
ln -s /data/service/node-v14.15.4-linux-x64/bin/node   /usr/local/bin/


Nginx 安装


#首先安装nginx前置软件
yum -y install gcc pcre-devel zlib-devel openssl openssl-devel
#下载nginx软件安装包
cd /data/tmp
wget http://nginx.org/download/nginx-1.19.6.tar.gz
tar -zxvf nginx-1.19.6.tar.gz
cd nginx-1.19.6
#设置安装目录为/usr/local/nginx
./configure --prefix=/usr/local/nginx
make
make install
#启动nginx
/usr/local/nginx/sbin/nginx


#clone项目源代码
git clone git@gitee.com:y_project/RuoYi-Vue.git


注意:在clone代码之前,需要在gitee管理后台中添加服务器的SSH公钥。详见https://gitee.com/help/articles/4191


后端部署步骤


1 从git仓库clone下来最新代码。ruoyi前后端分离版本的gitee地址是https://gitee.com/y_project/RuoYi-Vue


2使用可视化数据库开发工具 Navicat Premium进入数据库管理界面。创建数据库ry-vue并执行数据脚本ry_2021xxxx.sql,quartz.sql


3修改项目中的配置文件,配置文件有两个,分别是application.yml和application-druid.yml。


cd /data/gitee/RuoYi-Vue/ruoyi-admin/src/main/resources/
#修改application.yml的项目启动端口号
vim application.yml
#修改application-druid.yml的数据源
vim application.yml


server:
port: 18081
ruoyi:
profile: /data/tmp
# redis 配置
spring:
redis:
      # 地址
      host: localhost
      # 端口,默认为6379
      port: 6379
      # 数据库索引
      database: 0
      # 密码
      password:


# 数据源配置
spring:
  datasource:
      type: com.alibaba.druid.pool.DruidDataSource
      driverClassName: com.mysql.cj.jdbc.Driver
      druid:
          # 主库数据源
          master:
              url: jdbc:mysql://localhost:3306/ry-vue?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8
              username: root
              password: Vv0IBQ5qST


4修改好项目的配置文件之后,把入口项目进行打包。通过mvn打包成一个可执行的jar包。


cd /data/gitee/RuoYi-Vue/
mvn clean install -pl com.ruoyi:ruoyi-admin -am


5启动项目:把jar复制到程序目录,通过java命令行的方式启动jar包文件。因为本项目是使用了spring boot框架,所以jar中内置了web容器,不需要额外安装tomcat了。


打包完成后,/data/gitee/RuoYi-Vue/ruoyi-admin/target/ruoyi-admin.jar就是打包完成后的jar包文件。


mkdir -p /data/app/ruoyi-vue
cp /data/gitee/RuoYi-Vue/ruoyi-admin/target/ruoyi-admin.jar /data/app/ruoyi-vue/ruoyi-admin.jar
cd /data/app/ruoyi-vue/
nohup java -jar ruoyi-admin.jar &
tail -300f


nohup和&用来表示本命令需要在后台执行,这样退出命令行程序后,java程序也不会停止。


6查看日志,验证项目是否成功运行。


tail -300f


前端部署步骤


# 进入项目目录
cd /data/gitee/RuoYi-Vue/ruoyi-ui
#本地启动的话,可以在这里修改后端接口端口。如果是直接打包的话,不需要修改该配置文件
vim vue.config.js
# 打包正式环境
npm run build:prod
mkdir /data/app/ruoyi-ui
mv dist/* /data/app/ruoyi-ui/
#把生成好的 dist 文件夹的静态文件发布到你的 nginx 或者静态服务器即可,其中的 index.html 是后台服务的入口页面。
vim /usr/local/nginx/conf/nginx.conf
location / {
          root   /data/app/ruoyi-ui;
try_files $uri $uri/ /index.html;
          index index.html index.htm;
      }
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://localhost:18081/;
}
#重新加载配置文件nginx
/usr/local/nginx/sbin/nginx -s reload


相关文章
|
前端开发 Java 关系型数据库
基于Java+Springboot+Vue开发的鲜花商城管理系统源码+运行
基于Java+Springboot+Vue开发的鲜花商城管理系统(前后端分离),这是一项为大学生课程设计作业而开发的项目。该系统旨在帮助大学生学习并掌握Java编程技能,同时锻炼他们的项目设计与开发能力。通过学习基于Java的鲜花商城管理系统项目,大学生可以在实践中学习和提升自己的能力,为以后的职业发展打下坚实基础。技术学习共同进步
969 7
|
JavaScript 前端开发 Java
制造业ERP源码,工厂ERP管理系统,前端框架:Vue,后端框架:SpringBoot
这是一套基于SpringBoot+Vue技术栈开发的ERP企业管理系统,采用Java语言与vscode工具。系统涵盖采购/销售、出入库、生产、品质管理等功能,整合客户与供应商数据,支持在线协同和业务全流程管控。同时提供主数据管理、权限控制、工作流审批、报表自定义及打印、在线报表开发和自定义表单功能,助力企业实现高效自动化管理,并通过UniAPP实现移动端支持,满足多场景应用需求。
1402 1
|
前端开发 安全 Java
基于springboot+vue开发的会议预约管理系统
一个完整的会议预约管理系统,包含前端用户界面、管理后台和后端API服务。 ### 后端 - **框架**: Spring Boot 2.7.18 - **数据库**: MySQL 5.6+ - **ORM**: MyBatis Plus 3.5.3.1 - **安全**: Spring Security + JWT - **Java版本**: Java 11 ### 前端 - **框架**: Vue 3.3.4 - **UI组件**: Element Plus 2.3.8 - **构建工具**: Vite 4.4.5 - **状态管理**: Pinia 2.1.6 - **HTTP客户端
1694 4
基于springboot+vue开发的会议预约管理系统
|
前端开发 JavaScript Java
基于springboot+vue开发的校园食堂评价系统【源码+sql+可运行】【50809】
本系统基于SpringBoot与Vue3开发,实现校园食堂评价功能。前台支持用户注册登录、食堂浏览、菜品查看及评价发布;后台提供食堂、菜品与评价管理模块,支持权限控制与数据维护。技术栈涵盖SpringBoot、MyBatisPlus、Vue3、ElementUI等,适配响应式布局,提供完整源码与数据库脚本,可直接运行部署。
687 6
基于springboot+vue开发的校园食堂评价系统【源码+sql+可运行】【50809】
|
供应链 JavaScript BI
ERP系统源码,基于SpringBoot+Vue+ElementUI+UniAPP开发
这是一款专为小微企业打造的 SaaS ERP 管理系统,基于 SpringBoot+Vue+ElementUI+UniAPP 技术栈开发,帮助企业轻松上云。系统覆盖进销存、采购、销售、生产、财务、品质、OA 办公及 CRM 等核心功能,业务流程清晰且操作简便。支持二次开发与商用,提供自定义界面、审批流配置及灵活报表设计,助力企业高效管理与数字化转型。
1062 2
ERP系统源码,基于SpringBoot+Vue+ElementUI+UniAPP开发
|
监控 数据可视化 JavaScript
springboot + vue的MES系统生产计划管理源码
MES系统(制造执行系统)的生产计划管理功能是其核心模块之一,涵盖生产计划制定与优化、调度排程、进度监控反馈、资源管理调配及可视化报告五大方面。系统基于SpringBoot + Vue-Element-Plus-Admin技术栈开发,支持多端应用(App、小程序、H5、后台)。通过实时数据采集与分析,MES助力企业优化生产流程,适用于现代化智能制造场景。
774 1
|
JavaScript Java 测试技术
基于SpringBoot+Vue实现的留守儿童爱心网站设计与实现(计算机毕设项目实战+源码+文档)
博主是一位全网粉丝超过100万的CSDN特邀作者、博客专家,专注于Java、Python、PHP等技术领域。提供SpringBoot、Vue、HTML、Uniapp、PHP、Python、NodeJS、爬虫、数据可视化等技术服务,涵盖免费选题、功能设计、开题报告、论文辅导、答辩PPT等。系统采用SpringBoot后端框架和Vue前端框架,确保高效开发与良好用户体验。所有代码由博主亲自开发,并提供全程录音录屏讲解服务,保障学习效果。欢迎点赞、收藏、关注、评论,获取更多精品案例源码。
|
JavaScript Java 测试技术
基于SpringBoot+Vue实现的家政服务管理平台设计与实现(计算机毕设项目实战+源码+文档)
面向大学生毕业选题、开题、任务书、程序设计开发、论文辅导提供一站式服务。主要服务:程序设计开发、代码修改、成品部署、支持定制、论文辅导,助力毕设!
|
JavaScript 搜索推荐 Java
基于SpringBoot+Vue实现的家乡特色推荐系统设计与实现(源码+文档+部署)
面向大学生毕业选题、开题、任务书、程序设计开发、论文辅导提供一站式服务。主要服务:程序设计开发、代码修改、成品部署、支持定制、论文辅导,助力毕设!
|
JavaScript 前端开发 Java
Spring Boot 与 Vue.js 前后端分离中的数据交互机制
本文深入探讨了Spring Boot与Vue.js在前后端分离架构下的数据交互机制。通过对比传统`model.addAttribute()`方法与RESTful API的设计,分析了两者在耦合性、灵活性及可扩展性方面的差异。Spring Boot以RESTful API提供数据服务,Vue.js借助Axios消费API并动态渲染页面,实现了职责分明的解耦架构。该模式显著提升了系统的灵活性和维护性,适用于复杂应用场景如论坛、商城系统等,为现代Web开发提供了重要参考。
1638 0