若依框架(前后端分离)打war包部署到linux

news2024/11/17 19:51:16

一、前端部署

1.找到ruoyi-ui目录。

 2.安装依赖。

        npm install

3.执行以下操作,解决 npm 下载速度慢的问题。

        npm install --registry=https://registry.npmmirror.com

4.修改vue.config.js,若后端采用的是默认8080端口,则不用修改,默认就是8080端口。

 5.打包,执行如下命令。

        npm run build:pro

执行完命令,会在ruoyi-ui目录下生成dist文件,将此文件复制到linux某个目录下,如下图:

 在dist目录下,新建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>

二、nginx配置(自行安装)

 1.配置nginx.conf文件

 

 location /{
          root   /data/ruoyi/project/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:6007/;
        }

2.配置完启动nginx,若已启动,则重新加载

3.此时在浏览器里输入地址   {服务器公网ip}:{前端端口号}

看到如下页面,则说明前端部署成功了,502是因为后端还未启动

 

三、后端部署

   官网要求:

 

 1.修改ruoyi-admin中pom.xml,打成war包

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
    <!--忽略掉内嵌的tomca 打包部署到tomcat -->
    <exclusions>
        <exclusion>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-tomcat</artifactId>
        </exclusion>
    </exclusions>
</dependency>

2.配置application.yml,修改文件路径,服务端口,以及Redis

 

 3. 配置application-druid.yml,配置数据源

4.修改logback.xml中的日志路径

 5.推荐先clean,再package进行打包

 6.打包成功后,会在ruoyi-admin,target目录下,生成对应的war包

 7.将此war包上传至tomcat,webapps目录下

四、 配置tomcat

1.找到tomcat配置文件server.xml

 2.修改server.xml端口(根据自己的项目确定是否要修改)

3.修改server.xml中的Host,添加Context

 <Context docBase="/usr/local/tomcat9/apache-tomcat-9.0.68/webapps/ruoyi-admin" path="" reloadable="false" crossContext="true"/>

4.配置完成以后,重新启动tomcat

 5.查看tomcat启动日志,若未出错,在浏览器重新输入 {服务器公网ip}:{前端端口号},若出现了验证码,则说明前后端均已部署成功。

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/409756.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

2023最新最全vscode插件精选

文章简介 本文介绍最新、最实用、最强大的 vscode 精选扩展。好用的扩展&#xff0c;犹如神兵利器&#xff0c;帮助程序员在代码的世界中&#xff0c;所向披靡&#xff0c;战无不胜&#xff01; 作者介绍 随易出品&#xff0c;必属精品&#xff0c;只写有深度&#xff0c;有质…

vue 路由钩子

路由钩子分为三种 全局钩子&#xff1a; beforeEach、 afterEach、beforeResolve单个路由里面的钩子&#xff1a; beforeEnter组件路由&#xff1a;beforeRouteEnter、 beforeRouteUpdate、 beforeRouteLeave 它的三个参数&#xff1a; to: (Route路由对象) 即将要进入的目标…

【前端知识体系梳理(三)】Diff策略

​ 目录 &#x1f349;前言 &#x1f349;传统Diff算法 &#x1f349;React Diff &#x1f353;&#x1f353;&#x1f353;1、tree diff &#x1f353;&#x1f353;&#x1f353;2、component diff &#x1f353;&#x1f353;&#x1f353;3、element diff &#x1…

前端页面项目——博客系统

目录 1.实现博客列表页 1.1 实现导航栏 1.2 实现中间版心 1.3 实现个人信息 1.4 实现博客列表 2. 实现博客正文页 3. 实现博客登陆页 4. 实现博客编辑 4.1 实现编辑区 4.2 引入编辑器 展示 1&#xff09;登录页面 2&#xff09;博客列表页 3&#xff09;博客详情页 4&am…

【JavaScript】手撕前端面试题:手写Object.create | 手写Function.call | 手写Function.bind

&#x1f5a5;️ NodeJS专栏&#xff1a;Node.js从入门到精通 &#x1f5a5;️ 博主的前端之路&#xff08;源创征文一等奖作品&#xff09;&#xff1a;前端之行&#xff0c;任重道远&#xff08;来自大三学长的万字自述&#xff09; &#x1f5a5;️ TypeScript知识总结&…

PyQt5之进度条:QProgressBar

PyQt5之进度条&#xff1a;QProgressBar 在软件中&#xff0c;在处理特别冗长的任务时&#xff0c;如果没有相关的进度信息&#xff0c;这个等待的过程会比较考验用户的耐心&#xff0c;根据相关理论&#xff0c;进度条可以缓解用户在等待过程中的焦虑&#xff0c;所以&#x…

前端学习笔记(14)-Vue3组件传参

1.props&#xff08;父组件传递给子组件&#xff09;1.1 实现如果你没有使用 <script setup>&#xff0c;props 必须以 props 选项的方式声明&#xff0c;props 对象会作为 setup() 函数的第一个参数被传入&#xff1a;在子组件中&#xff1a;export default {props: {ti…

微信小程序头像昵称填写能力

1、基本介绍 微信小程序获取头像昵称的能力&#xff0c;最近又进行了一次调整&#xff0c;如果没有记错这是今年第三次调整了&#xff0c;每次调整每个开发者心中我相信都跟我一样&#xff0c;万马奔腾。。。今天写个demo体验下实际效果如何。 详细信息请见小程序用户头像昵称…

微信小程序实现PDF预览功能——pdf.js(含源码解析)

文章目录前言一、pdf.js 是什么&#xff1f;二、使用步骤1.下载库文件2.使用方式微信小程序端——使用 web-view 标签H5 端——使用 iframe 标签&#xff08;使用vue框架&#xff09;3.更改源码如何隐藏顶部工具栏如何让用户强制阅读一定时间如何获取pdf总页数如何获取pdf当前页…

【折腾电脑】Edge浏览器看B站视频卡顿最全解决办法合集

开头碎碎念&#xff1a;更新频率明显和疫情呈正相关&#xff0c;祝大家健健康康吃好喝好&#xff01; 使用Microsoft Edge浏览器观看B站视频&#xff0c;卡得无法忍受。 在网络上搜索相关问题&#xff0c;最早的一条是2016/04/17微软问题反馈的记录。任何原因的卡顿都是正常的&…

Vue样式穿透

Vue样式穿透 vue文件的style标签的scoped属性作用&#xff1a;PostCSS在元素标签上添加特殊属性值&#xff0c;在样式的选择器后面添加属性选择器&#xff0c;实现了组件样式的私有化&#xff0c;防止组件之间的样式污染&#xff08;比如相同类名的元素&#xff09;。 但在使…

【CSS】盒子模型内边距 ② ( 内边距复合写法 | 代码示例 )

文章目录一、内边距复合写法1、语法2、代码示例 - 设置 1 个值3、代码示例 - 设置 2 个值4、代码示例 - 设置 3 个值5、代码示例 - 设置 4 个值一、内边距复合写法 1、语法 盒子模型内边距 可以通过 padding-left 左内边距padding-right 右内边距padding-top 上内边距padding-…

前端开发服务器中的 Proxy 代理跨域实现原理解读

各位朋友你们好&#xff0c;我是桃小瑞&#xff0c;微信公众 桃小瑞。在这给大家拜个晚年&#xff0c;祝各位朋友新年快乐。 前言 在前端的开发过程中&#xff0c;尤其是在浏览器环境下&#xff0c;跨域是个绕不开的话题&#xff0c;相信每个前端都会涉及到这个问题&#xf…

“write javaBean error, fastjson version 1.2.83, class org.apache.shiro.web.servlet.ShiroHttpServletR

1. 相关技术 springboot 2.6.3mybatis-spring-boot-starter 2.2.2mybatis 3.5.10fastjson 1.2.83hutool-all 5.7.22shiro-spring 1.8.0 2. 报错信息 "write javaBean error, fastjson version 1.2.83, class org.apache.shiro.web.servlet.ShiroHttpServletRequest, meth…

<router-view> can no longer be used directly inside <transition> or <keep-alive>.

百度翻译&#xff1a; &#xff1c;router view&#xff1e;不能直接在&#xff1c;transition&#xff1e;或&#xff1c;keep alive&#xff1e;中使用。 改用插槽道具&#xff1a; 运行环境&#xff1a; "vue": "^3.2.8", "vue-router": &quo…

idea的vue文件中使用ElementUi组件

作为计算机专业的学生&#xff0c;在做实训项目时很惆怅前端页面的搭建&#xff0c;这个时候就突出到了组件的好处&#xff1b; 这篇就是给大家展示使用ElementUi组件&#xff01;&#xff01;&#xff01; 内容上分为vue3和之前的版本&#xff0c;自行选择&#xff01;&#x…

33.JavaScript映射与集合(Map、Set)数据类型基础知识介绍与使用

文章目录映射与集合&#xff08;Map、Set&#xff09;映射&#xff08;Map&#xff09;Map常用的方法不要使用map[key]访问属性对象作为Map的键Map的遍历与迭代默认的迭代方式forEach()从数组、对象创建Map从数组、Map创建对象集合&#xff08;Set&#xff09;集合迭代总结映射…

Vuex 之一:3种拿到 state 中数据的方式与实例剖析

Ⅰ、Vuex 简介&#xff1a; 1、Vuex 是什么&#xff1f; 答&#xff1a;Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式&#xff1b; 而所谓状态就是指&#xff1a;组件中所维护的数据); (简而言之&#xff1a;就是状态管理&#xff0c;解决复杂组件数据通信&#xff0c…

React中实现keepalive组件缓存效果

背景&#xff1a;由于react官方并没有提供缓存组件相关的api&#xff08;类似vue中的keepalive&#xff09;&#xff0c;在某些场景&#xff0c;会使得页面交互性变的很差&#xff0c;比如在有搜索条件的表格页面&#xff0c;点击某一条数据跳转到详情页面&#xff0c;再返回表…

处理vue中的长按事件、点击事件、默认事件冲突

写在前面 示例是h5项目。技术栈&#xff1a;vue vant nuxt。 知识点简介&#xff1a; touchstart: // 手指放到屏幕上时触发 touchend: // 手指离开屏幕时触发 touchmove: // 手指在屏幕上滑动式触发 touchcancel: // 系统取消touch事件的时候触发 页面及需求&#xff1a; …