RuoYi-Vue项目部署流程

项目地址

  1. 框架地址:https://gitee.com/y_project/RuoYi-Vue
  2. 文档地址:https://doc.ruoyi.vip/ruoyi-vue/
  3. issues:https://gitee.com/y_project/RuoYi-Vue/issues

部署成果

部署成果

后端部署

可以使用idea或者eclipse或者项目下bin目录中的脚本进行打包(war / jar),打包时有几点需要注意:

logback.xml文件中的路径建议改为./logs
application.yml中的profile需要改为服务器存在的真实路径

jar部署

因为springboot中已经内置了tomcat或者其他容器,不需要另外部署tomcat,按照下面步骤操作:

  1. 将打包后的jar文件放在任意一个位置;

  2. 在服务器上和jar同一个目录下新建一个config目录,将项目里的application-druid.ymlapplication.yml或者其他yml配置文件复制出来,放入config目录;

  3. 执行命令启动: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

  4. 可以查看启动日志或者使用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部署

  1. 将打包后的war文件,放在服务的webapps下,可以使用解压缩软件解压(war其实就是个压缩包),解压后将文件夹重命名为ROOT,如果需要带项目有也可以配置为其他名称,更多tomcat配置这里不再赘述;
  2. 启动tomcat,可以查看启动日志或者使用curl或者浏览器访问是否已经启动,访问地址:http://ip:port,如果返回{"msg":"请求访问:/,认证失败,无法访问系统资源","code":401},证明部署成功;

前端部署

前端部署可以使用nginx部署或者直接使用tomcat部署。

使用nginx部署

  1. 将前端打包,命令:npm run build:prod,将dist(默认的)目录放在服务器的任意一个文件夹下,比如这里放在/home/www/projects/ruoyi-ui

  2. 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;
            }
        }
    
  3. 启动nginx或者重载nginx

  4. 浏览器访问http://ip查看是否正常显示,如果出现登录界面并且显示验证码说明部署成功

tomcat部署

一般情况下使用nginx部署,但是有些时候也有人使用tomcat部署,按照下面的流程进行:

部署在ROOT下(单独占用容器)

注意:这里不需要在server.xml下增加HOST节点

  1. 如果你的后端和前端不在同一个tomcat下,也就是单独部署vue,那就需要修改.env.production文件中的VUE_APP_BASE_API为你后端地址+端口,例如VUE_APP_BASE_API = '//localhost:8080'

  2. 将前端打包,命令:npm run build:prod,将dist(默认的)目录放在服务器tomcatwebapps下,将dist重命名为ROOT

  3. 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>
    

    最终效果如下图:
    ROOT目录

  4. 启动tomcat,浏览器访问http://ip:port,出现登录界面和验证码说明部署成功

部署在ROOT下(和后端同一容器)

注意:这里不需要在server.xml下增加HOST节点

  1. 如果你的后端和前端在同一个tomcat下,那就需要修改.env.production文件中的VUE_APP_BASE_API为你后端的项目名,例如VUE_APP_BASE_API = '/prod-api',其中prod-api就是你的后端项目名,部署方法可以参考上面的后端部署-war部署

  2. 将前端打包,命令:npm run build:prod,将dist(默认的)目录放在服务器tomcatwebapps下,将dist重命名为ROOT

  3. 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>
    

    最终效果如下图:
    和后端同一容器

  4. 启动tomcat,浏览器访问http://ip:port,出现登录界面和验证码说明部署成功

部署在非ROOT下

这里部署的项目名是admin

  1. 如果你的后端和前端在同一个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'

  2. 修改vue.config.js下的publicPath,例如:publicPath: process.env.NODE_ENV === "production" ? "/admin/" : "/", 这里根据你部署的项目名决定,这个影响资源文件的引用

  3. router/index.js下添加base: "/admin",,如下

    export default new Router({
      base: "/admin",
      mode: 'history', // 去掉url中的#
      scrollBehavior: () => ({ y: 0 }),
      routes: constantRoutes
    })
    
  4. Navbar.vue中的退出方法里location.href = '/index';改为location.href = this.$router.options.base + '/index';

  5. 将前端打包,命令:npm run build:prod,将dist(默认的)目录放在服务器tomcatwebapps下,将dist重命名为admin

  6. 在server.xml中加入Host节点下添加:<Context docBase="admin" path="/admin/" reloadable="true" source=""/>

  7. 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>
    
  8. 启动tomcat,浏览器访问http://ip:port/admin,出现登录界面和验证码说明部署成功

    其他配置方式可以自己参考上面的方式尝试,需要注意的点:

    1、tomcat项目名路径配置
    2、vue静态资源路径配置相应和项目名一致

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Mr.李大哥

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值