部署的大致步骤
0.配置环境,jdk下载安装配置环境变量,Mysql下一步就好记住用户名和密码,
Redis下载win版本运行即可,
Maven 下载配置环境变量修改本地库存放位置,
Node 下一步就好设置下淘宝的镜像源。
JDK >= 1.8 (推荐1.8版本)
Mysql >= 5.7.0 (推荐5.7版本)
Redis >= 3.0
Maven >= 3.0
Node >= 12
1.下载解压
https://gitee.com/y_project/RuoYi-Vue ,点击下载zip即可
也可以使用git
建议使用Git
克隆,因为克隆的方式可以和RuoYi
随时保持更新同步。使用Git
命令克隆
git clone https://gitee.com/y_project/RuoYi-Vue.git
2.配置若依
后端,导入两个文件,配置两个文件
导入eclipse
依照maven项目导入。菜单 File
-> Import
,然后选择 Maven
-> Existing Maven Projects
,点击 Next
> 按钮,选择工作目录,然后点击 Finish
按钮,即可成功导入。
软件会自动识别加载网络依赖库,可能会因为网络太慢而中断,注意配置袋里或切换maven源。
导入idea类似
创建数据库ry-vue
并导入sql目录下的数据脚本ry_2021xxxx.sql
,quartz.sql。
编辑resources
目录下的application-druid.yml,核对数据库地址、账号、密码
编辑resources目录下的application.yml,基于情况修改端口和上下文路径,所谓上下文路径就是给所有的连接增加一个前缀目录
前端
在idea中打开控制台,
# 进入项目目录
cd ruoyi-ui
# 强烈建议不要用直接使用 cnpm 安装,会有各种诡异的 bug,可以通过重新指定 registry 来解决 npm 安装速度慢的问题。
npm install --registry=https://registry.npmmirror.com
3.编译运行
后端
编译器直接运行
打开项目运行com.ruoyi.RuoYiApplication.java,出现若依logo表示成功启动
编译
编译有两种方式,jar和war,jar有java可以直接运行,因为jar中包含了tomar,war需要tomcat服务器
jar直接打包,打包命令执行package.bat,或者idea右边maven点击package也可以打包
多模块版本会生成在ruoyi/ruoyi-admin
模块下target
文件夹里生成打包文件
war打包,多模块版本在ruoyi/ruoyi-admin
模块下修改pom.xml
中的packaging
修改为war同时
去除内嵌Tomcat
(PS:此步骤不重要,因为不排除也能在容器中部署war
)。
<!-- 多模块排除内置tomcat -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
<exclusions>
<exclusion>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-tomcat</artifactId>
</exclusion>
</exclusions>
</dependency>
<!-- 单应用排除内置tomcat -->
<exclusions>
<exclusion>
<artifactId>spring-boot-starter-tomcat</artifactId>
<groupId>org.springframework.boot</groupId>
</exclusion>
</exclusions>
打包命令执行package.bat,或者idea右边maven点击package也可以打包
运行
运行前后端依据代码有两种方式,单独tomcat、单独nginx、tomcat+nginx混合方式。如果后端是jar前端vue可以部署在前端单独tomcat或者前端单独nginx,如果后端war可以的部署方式前后端单独tomcat和后端tomcat+前端nginx混合方式
jar
使用命令行执行:java –jar ruoyi.jar
或者执行脚本:ruoyi/bin/run.bat
war
将打包好war
文件上传到tomcat
服务器下的webapps
文件夹,并将名字修改为prod-api.war
注意,这里的webpps是tomcat的目录war目录,也可以自定义目录。文件命名为prod-api.war是因为tomc会自动解压war,解压后的文件夹名称就是prod-api,prod-api也是url访问路径,前端默认访问这个后端路径。
然后启动在bin/下启动tomcat
,可以查看启动日志或者使用curl
或者浏览器访问是否已经启动,访问地址:http://ip:port/prod-api/
,如果返回欢迎使用RuoYi后台管理框架,当前版本:v3.8.4,请通过前端地址访问。
,证明后端部署成功;
前端
编译器直接运行
# 本地开发 启动项目
npm rudev dev
编译
# 打包正式环境
npm run build:prod
# 打包预发布环境
npm run build:stage
构建打包成功之后,会在根目录生成 dist
文件夹,里面就是构建打包好的文件,压缩该文件夹
运行
nginx配置为该文件夹启动即可。
worker_processes 1; events { worker_connections 1024; } http { include mime.types; default_type application/octet-stream; sendfile on; keepalive_timeout 65; server { listen 80; server_name localhost; charset utf-8; location / { root /home/ruoyi/projects/ruoyi-ui; #dist目录 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:8080/; #后端代理目录 如果是后端是jar就可以这样配置,如果是tomcat应该配置
http://localhost:8080
/prod-api/
} error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } } }
tomcat运行方式。将webapps下的BOOT文件下的所有文件(除WEB-INF之外)删除
修改tomcat/webapps/ROOT/WEB-INF目录下的web.xml文件如下:
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
version="4.0" metadata-complete="true">
<display-name>Router for Tomcat</display-name>
<error-page>
<error-code>404</error-code>
<location>/index.html</location>
</error-page>
</web-app>
修改server.xml
,Host
节点下添加
<Context docBase="dist前端文件路径" path="/" reloadable="true" source=""/>
将打包好的dist文件下的所有文件上传到tomcat/webapps/ROOT文件夹下
启动tomcat(将路径切换到tomcat/bin下)
cd /usr/local/apache-tomcat-9.0.65/webapps/bin
执行
./startup.sh
启动成功后,浏览器访问http://ip:port
默认账户/密码 admin/admin123
若能正确展示登录页面,并能成功登录,菜单及页面展示正常,则表明环境搭建成功
提示
因为本项目是前后端完全分离的,所以需要前后端都单独启动好,才能进行访问。
前端安装完node后,最好设置下淘宝的镜像源,不建议使用cnpm(可能会出现奇怪的问题)
其他说明
vue.config.js 文件
outputDir 表示输出目录
publicPath表示根目录
环境变量
所有测试环境或者正式环境变量的配置都在 .env.development 等 .env.xxxx
文件中。
它们都会通过 webpack.DefinePlugin
插件注入到全局。
环境变量必须以VUE_APP_
为开头。如:VUE_APP_API
、VUE_APP_TITLE
你在代码中可以通过如下方式获取:
console.log(process.env.VUE_APP_xxxx)
扩展阅读:《Vue CLI - 环境变量和模式》
注意
环境配置修改后,需要重新运行才会生效
这里的配置通常是在 Nginx 的配置文件(/etc/nginx/nginx.conf)中进行的,因为 Nginx 是一个高性能 Web 服务器和反向代理服务器,支持gzip压缩,并且可以有效的缓解服务器的性能瓶颈。
在 Nginx 配置文件中,gzip压缩相关的配置可以在 http、server 或 location 块中进行。例如在http块中进行的配置如下:
```nginx
http {
gzip on;
gzip_min_length 1k;
gzip_buffers 16 64K;
gzip_http_version 1.1;
gzip_comp_level 5;
gzip_types text/plain application/x-javascript text/css application/xml application/javascript;
gzip_vary on;
# 其他http相关配置
...
}
```
这样配置之后,Nginx 将启用gzip压缩,对于满足压缩条件的请求进行gzip压缩,从而减少资源文件的体积,以加快网页访问速度。需要注意的是,这个配置中的具体参数值和是否开启gzip压缩,需要根据具体的应用场景和需求进行调整。
建议开启Gzip压缩
在http
配置中加入如下代码对全局的资源进行压缩,可以减少文件体积和加快网页访问速度。
# 开启gzip压缩
gzip on;
# 不压缩临界值,大于1K的才压缩,一般不用改
gzip_min_length 1k;
# 压缩缓冲区
gzip_buffers 16 64K;
# 压缩版本(默认1.1,前端如果是squid2.5请使用1.0)
gzip_http_version 1.1;
# 压缩级别,1-10,数字越大压缩的越好,时间也越长
gzip_comp_level 5;
# 进行压缩的文件类型
gzip_types text/plain application/x-javascript text/css application/xml application/javascript;
# 跟Squid等缓存服务有关,on的话会在Header里增加"Vary: Accept-Encoding"
gzip_vary on;
# IE6对Gzip不怎么友好,不给它Gzip了
gzip_disable "MSIE [1-6]\.";
同时建议开启解压缩静态文件 如何使用Gzip解压缩静态文件
#常见问题
- 如果使用
Mac
需要修改application.yml
文件路径profile
- 如果使用
Linux
提示表不存在,设置大小写敏感配置在/etc/my.cnf
添加lower_case_table_names=1
,重启MYSQL服务 - 如果提示当前权限不足,无法写入文件请检查
application.yml
中的profile
路径或logback.xml
中的log.path
路径是否有可读可写操作权限
如遇到无法解决的问题请到Issues (opens new window)反馈,会不定时进行解答。