Ruoyi前后端分离项目部署至Tomcat上

本文详细描述了如何在项目中进行前端Vue的打包部署,包括使用npm构建并发布到Tomcat。同时介绍了环境变量配置,如MySQL和Redis的设置,以及后端Java应用的打包和部署流程。最后,涉及了Tomcat服务器的配置以确保前后端协同工作正常。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

项目部署

4.1.前端打包

disaster-ui目录下为本项目的前端所在位置,在命令行窗口进入该目录,然后输入npm run build:prod部署前端Vue项目,或者直接在disaster-ui/bin目录下双击build.bat文件部署前端。

图 4-1 前端部署图

4.2 环境变量

  • 在MySQL可视化软件中新建flowable数据库(以Navicat Premium):右击数据库运行->运行sql文件(文件路径/disasterSystem/script/sql/mysql/disaster.sql)。如果本机MySQL地址、用户名和密码不同需改ruoyi-admin/src/main/resources/application-prod.yml相应参数。

              (a)数据库新建            (b)MySQL连接参数设置图

图 4-2-1 数据库新建与数据库连接参数设置图

  • 运行本机安装的redis:找到redis安装目录,双击redis-server.exe文件,运行redis。如果本机Redis地址、端口、数据库所以以及用户名和密码不同需改ruoyi-admin/src/main/resources/application-prod.yml相应参数。

图4-2-2 Redis连接参数设置图

4.3.后端打包

在项目的bin目录下依次双击clean.bat和package.bat打包Web工程,生成war或jar包文件。然后在项目ruoyi-admin目录下生成target文件夹包含war或jar包。

 

图 4-3 后端部署图

4.4前后端部署(以Tomcat服务器为例子)

若依(前后端分离版),部署tomcat中_若依部署到tomcat-CSDN博客

  • 后端将target目录下(ruoyi-admin/target)的war包和disaster-ui的dist目录复制到tomcat安装目录的webapps目录下。

图4-4-1复制打包后文件致Tomcat的webapps目录下

  • 增加配置信息

在tomcat/config目录下的server.xml"搜索Context”并增加图4-4-2(a)两行路径配置信息,增加上下文,启动时能方便找路径。

<Context docBase="dist" path="" reloadable="false"/>
<Context docBase="ruoyi-admin" path="/prod-api" reloadable="false"/>

在webapps/dist目录下新建文件夹WEB-INF,然后在该目录下新建文件web.xml,主要用于配置404重定向,文件内容如图4-4-2(b)。

<?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>/</display-name>
     <error-page>
        <error-code>404</error-code>
        <location>/index.html</location>
    </error-page>
</web-app>

     

图 (a)新增路径配置信息      图 (b)新增配置信息防止网页刷新出现404

图4-4-2新增配置信息

要将ruoyi前后端分离项目部署到Windows服务器上,可以按照以下步骤进行: ### 一、准备工作 1. **安装Java环境** - 下载并安装JDK(建议使用JDK 8或以上版本)。 - 配置环境变量: - `JAVA_HOME`:指向JDK安装目录。 - `PATH`:添加`%JAVA_HOME%\bin`。 2. **安装数据库** - 根据项目需求安装MySQL或Oracle数据库。 - 配置数据库用户和权限。 3. **安装Tomcat** - 下载并安装Tomcat。 - 配置环境变量: - `CATALINA_HOME`:指向Tomcat安装目录。 4. **安装Node.js** - 下载并安装Node.js。 - 配置环境变量: - `NODE_HOME`:指向Node.js安装目录。 - `PATH`:添加`%NODE_HOME%\bin`。 ### 二、部署后端 1. **获取项目代码** - 使用Git或直接下载项目代码。 2. **配置数据库连接** - 修改`application.yml`或`application.properties`文件,配置数据库连接信息。 3. **打包项目** - 进入项目目录,运行以下命令打包项目: ```bash mvn clean package ``` 4. **部署Tomcat** - 将生成的`war`文件复制到Tomcat的`webapps`目录下。 - 启动Tomcat,访问`http://localhost:8080/项目名`验证部署是否成功。 ### 三、部署前端 1. **获取项目代码** - 使用Git或直接下载项目代码。 2. **安装依赖** - 进入项目目录,运行以下命令安装依赖: ```bash npm install ``` 3. **构建项目** - 运行以下命令构建项目: ```bash npm run build ``` 4. **部署静态文件** - 将`dist`目录中的静态文件复制到Tomcat的`webapps/ROOT`目录下,或配置Nginx进行反向代理。 ### 四、配置Nginx(可选) 1. **安装Nginx** - 下载并安装Nginx。 2. **配置反向代理** - 修改Nginx配置文件,添加以下内容: ```nginx server { listen 80; server_name your_domain.com; location / { root /path/to/your/dist; try_files $uri $uri/ /index.html; } location /api/ { proxy_pass http://localhost:8080/项目名/api/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } } ``` 3. **启动Nginx** - 启动Nginx,访问`http://your_domain.com`验证部署是否成功。 ### 五、验证部署 1. **访问前端** - 在浏览器中访问`http://your_domain.com`,验证前端是否正常显示。 2. **测试API** - 通过前端页面或Postman测试API接口,确保后端服务正常。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

FE_Jinger

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

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

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

打赏作者

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

抵扣说明:

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

余额充值