RuoYi-Vue项目部署
项目地址
- 框架地址:https://gitee.com/y_project/RuoYi-Vue
- 文档地址:https://doc.ruoyi.vip/ruoyi-vue/
- issues:https://gitee.com/y_project/RuoYi-Vue/issues
部署成果
后端部署
可以使用idea
或者eclipse
或者项目下bin
目录中的脚本进行打包(war / jar),打包时有几点需要注意:
logback.xml
文件中的路径建议改为./logs
application.yml
中的profile
需要改为服务器存在的真实路径
jar部署
因为springboot
中已经内置了tomcat
或者其他容器,不需要另外部署tomcat
,按照下面步骤操作:
-
将打包后的
jar
文件放在任意一个位置; -
在服务器上和
jar
同一个目录下新建一个config
目录,将项目里的application-druid.yml
、application.yml
或者其他yml
配置文件复制出来,放入config
目录; -
执行命令启动:
nohup java -jar ruoyi-admin.jar
也可以加更多的启动参数,如果是linux
也可以把项目下的ry.sh
放在jar
同级目录下,修改ry.sh
里的AppName
和相关路径,执行./ry.sh start
即可启动脚本使用方法
启动:./ry.sh start
停止:./ry.sh stop
重启:./ry.sh restart
状态:./ry.sh status
-
可以查看启动日志或者使用
curl
或者浏览器访问是否已经启动,访问地址:http://ip:port
,如果返回{"msg":"请求访问:/,认证失败,无法访问系统资源","code":401}
,证明部署成功;—说明
放在config
目录是为了以后修改端口号以及数据库连接等信息方便,直接修改yml
配置文件即可,不需要重现打包jar
,因为springboot
加载配置文件顺序是
1、/config/application.yml
2、/application.yml
3、classpath:/config/application.yml
4、classpath:/application.yml
注意:这些文件或者目录是根据命令发起目录来的,假如脚本或命令是在admin目录下执行,而jar文件是在admin/target目录下,则需要将config/xxx.yml文件及目录放在admin目录下
war部署
- 将打包后的
war
文件,放在服务的webapps
下,可以使用解压缩软件解压(war其实就是个压缩包),解压后将文件夹重命名为ROOT
,如果需要带项目有也可以配置为其他名称,更多tomcat
配置这里不再赘述; - 启动tomcat,可以查看启动日志或者使用
curl
或者浏览器访问是否已经启动,访问地址:http://ip:port
,如果返回{"msg":"请求访问:/,认证失败,无法访问系统资源","code":401}
,证明部署成功;
前端部署
前端部署可以使用nginx
部署或者直接使用tomcat
部署。
使用nginx部署
-
将前端打包,命令:
npm run build:prod
,将dist
(默认的)目录放在服务器的任意一个文件夹下,比如这里放在/home/www/projects/ruoyi-ui
-
在
nginx
配置文件中做下面的配置,此处后端的端口(8080
)需要根据实际后端部署情况修改server { listen 80; server_name localhost; location / { root /home/www/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/; } error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } }
-
启动
nginx
或者重载nginx
-
浏览器访问
http://ip
查看是否正常显示,如果出现登录界面并且显示验证码说明部署成功
tomcat部署
一般情况下使用nginx部署,但是有些时候也有人使用tomcat部署,按照下面的流程进行:
部署在ROOT下(单独占用容器)
注意:这里不需要在
server.xml
下增加HOST
节点
-
如果你的后端和前端不在同一个tomcat下,也就是单独部署vue,那就需要修改
.env.production
文件中的VUE_APP_BASE_API
为你后端地址+端口,例如VUE_APP_BASE_API = '//localhost:8080'
-
将前端打包,命令:
npm run build:prod
,将dist
(默认的)目录放在服务器tomcat
的webapps
下,将dist
重命名为ROOT
-
在
ROOT
下新建WEB-INF
目录,在WEB-INF
目录中新建web.xml
文件如下:<?xml version="1.0" encoding="UTF-8"?> <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_3_1.xsd" version="3.1" 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>
最终效果如下图:
-
启动
tomcat
,浏览器访问http://ip:port
,出现登录界面和验证码说明部署成功
部署在ROOT下(和后端同一容器)
注意:这里不需要在
server.xml
下增加HOST
节点
-
如果你的后端和前端在同一个tomcat下,那就需要修改
.env.production
文件中的VUE_APP_BASE_API
为你后端的项目名,例如VUE_APP_BASE_API = '/prod-api'
,其中prod-api
就是你的后端项目名,部署方法可以参考上面的后端部署-war部署
-
将前端打包,命令:
npm run build:prod
,将dist
(默认的)目录放在服务器tomcat
的webapps
下,将dist
重命名为ROOT
-
在
ROOT
下新建WEB-INF
目录,在WEB-INF
目录中新建web.xml
文件如下:<?xml version="1.0" encoding="UTF-8"?> <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_3_1.xsd" version="3.1" 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>
最终效果如下图:
-
启动
tomcat
,浏览器访问http://ip:port
,出现登录界面和验证码说明部署成功
部署在非ROOT下
这里部署的项目名是
admin
-
如果你的后端和前端在同一个tomcat下,那就需要修改
.env.production
文件中的VUE_APP_BASE_API
为你后端的项目名,例如VUE_APP_BASE_API = '/prod-api'
,其中prod-api
就是你的后端项目名;如果你的后端和前端不在同一个tomcat下,也就是单独部署vue,那就需要修改.env.production
文件中的VUE_APP_BASE_API
为你后端地址+端口,例如VUE_APP_BASE_API = '//localhost:8080'
。 -
修改
vue.config.js
下的publicPath
,例如:publicPath: process.env.NODE_ENV === "production" ? "/admin/" : "/",
这里根据你部署的项目名决定,这个影响资源文件的引用 -
router/index.js
下添加base: "/admin",
,如下export default new Router({ base: "/admin", mode: 'history', // 去掉url中的# scrollBehavior: () => ({ y: 0 }), routes: constantRoutes })
-
Navbar.vue
中的退出方法里location.href = '/index';
改为location.href = this.$router.options.base + '/index';
-
将前端打包,命令:
npm run build:prod
,将dist
(默认的)目录放在服务器tomcat
的webapps
下,将dist
重命名为admin
-
在server.xml中加入Host节点下添加:
<Context docBase="admin" path="/admin/" reloadable="true" source=""/>
-
在
admin
下新建WEB-INF
目录,在WEB-INF
目录中新建web.xml
文件如下:<?xml version="1.0" encoding="UTF-8"?> <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_3_1.xsd" version="3.1" 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>
-
启动
tomcat
,浏览器访问http://ip:port/admin
,出现登录界面和验证码说明部署成功其他配置方式可以自己参考上面的方式尝试,需要注意的点:
1、
tomcat
项目名路径配置
2、vue
静态资源路径配置相应和项目名一致