如何将React项目,部署到Web服务器的Tomcat 上

news/2024/10/10 13:22:19/文章来源:https://www.cnblogs.com/wwssgg/p/18456106

将 React 应用部署到 Tomcat 服务器上通常需要将其构建为静态文件,然后将这些文件放入 Tomcat 的 webapps 目录。以下是具体步骤:

步骤指南

1. 构建 React 应用

首先,你需要在本地构建你的 React 应用。

npm run build

  这会在项目根目录下生成一个 build 文件夹,里面包含了优化后的静态文件。

2. 将构建结果放入 Tomcat

接下来,将构建生成的文件上传到 Tomcat 服务器。

1、找到 Tomcat 的 webapps 目录:

  通常位于 TOMCAT_HOME/webapps,其中 TOMCAT_HOME 是你安装 Tomcat 的目录。

2、创建一个新目录:

  在 webapps 目录下创建一个新的文件夹(例如 myapp),用于存放你的 React 应用。

3、复制静态文件:

  将 build 文件夹中的所有内容(包括 index.html, JavaScript 和 CSS 文件)复制到刚刚创建的 myapp 目录中。

3. 配置 Tomcat

为了确保 React 应用可以正常工作,你可能需要修改 Tomcat 的 web.xml 文件来支持 HTML5 路由。

1、打开 web.xml

TOMCAT_HOME/conf/web.xml 中找到该文件。

2、添加错误页面配置:

<web-app> 标签内添加如下配置:

<error-page><error-code>404</error-code><location>/index.html</location>
</error-page>

4、在TOMCAT_HOME/conf/server.xml 中,

将你放到webapps 文件夹,设为Root文件夹

 

完成:浏览器输入 localhost:8080/home 即可访问成功

 

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

实时显示和拍照存储,IFD-x让你实时掌握温度信息 非接触式热成像仪器红外线成像

实时显示和拍照存储,IFD-x让你实时掌握温度信息 非接触式热成像仪器红外线成像非接触式热成像仪器,IFD-x采用红外阵列高精度温度传感器和先进的软件算法。它能够对视场范围内的任何物体进行红外成像,成像分辨率达到512*384像素,温度灵敏度为0.1℃,绝对精度为1.5℃,刷新频…

USB 鼠标的实现

目录前言5 USB 标准请求5.1 USB 标准设备请求的结构5.2 GET_DESCRIPTOR 请求5.3 SET_ADDRESS 请求5.4 SET_CONFIGURATION 请求6 设备描述符的实现9 配置描述符集合的结构9.1 配置描述符结构9.2 接口描述符的结构9.3 端点描述符的结构9.4 HID 描述符的结构9.5 [示例:描述符]11 …

USB 概述及协议基础

《圈圈教你学 USB》第 1 章学习笔记1 USB 是什么?1)USB(Universal Serial Bus,通用串行总线)2 USB 的特点1)USB 协议版本与速度:来源:https://www.usbzh.com/article/detail-199.html2)开发 USB 常用网站: https://www.usb.org3 USB 的拓扑结构USB 是主从结构,主机为…

AI云平台介绍

AI云平台是基于云计算基础设施,集成机器学习、深度学习、自然语言处理、计算机视觉等先进AI技术,通过云端服务的形式,向用户提供数据预处理、模型训练、模型部署、预测推理等一系列AI开发与应用服务的平台。AI云平台是基于云计算基础设施,集成机器学习、深度学习、自然语言…

无人直播自动化回复客户咨询

我们插件是根据页面元素变动进行自动化操作的,想要实现网页版自动化,必须了解html以及dom结构,还有xpath定位方法。 各大直播后台页面结构不一样,所以要进行兼容处理,我们一个插件支持以下直播或客服平台 唯一客服浏览器插件 十年开发经验程序员,离职全心创业中,历时三年…

AMD 线程撕裂者7970X 搭配双卡A5000,打造模具设计公司工作站虚拟化方案

客户为一家模具设计公司,使用 UG/NX 设计软件,现有10名设计师。当前面临以下问题:信息安全:设计图纸存在泄密风险,无法确保数据安全。 远程访问:设计师无法通过远程方式访问工作站进行设计工作。 资源共享:设计工作站目前归属于个人,设计资源难以高效共享,工作站资源利…

【日记】生巧好好吃!(701 字)

正文今天才发现昨天寒露。不过昨天很冷,今天倒挺暖和,太阳很好。下午上班,觉得这么好的太阳不做点什么很亏,于是转身回去拿了被子。晚上下班去收,被子上面落的全是桂花。那时候天色已暗,天边有一种低沉但通透的蓝。一般这种时候温度都很低了。秋天真的到了啊……主管买的…

UE4.26 Emissive Decal(发光贴花)模拟Light Function

【USparkle专栏】如果你深怀绝技,爱“搞点研究”,乐于分享也博采众长,我们期待你的加入,让智慧的火花碰撞交织,让知识的传递生生不息!主要是想用Emissive Decal(发光贴花)来模拟出SpotLight的Light Function效果。 原因是SpotLight的Light Function依赖于阴影,而SpotL…

APP上架大陆应用商店记录

重点自己的手机APP想要上架到国内的应用市场必须要进行ICP备案 部分平台需要电子软著信息 大部分应用商店上架需要准备好合规的隐私政策电子软著 其中包含【APP电子版权认证证书】、【计算机软件著作权登记证书】两个证书 最便捷的方式是找专业人士带跑流程,根据时长分为不同的…

搭建Redis哨兵集群并使用RedisTemplate实现读写分离

一、理论相关通过上篇博客:搭建Redis“主-从-从”模式集群并使用 RedisTemplate 实现读写分离,我们已经搭建好了Redis“主-从-从”模式集群并且实现读写分离,这里会出现几个问题:如果主库宕机了,我们就需要运行一个新主库,比如说把一个从库切换为主库,把它当成主库。这就…

唯一客服浏览器插件: 视频号直播自动回复与循环发送话术-自动化插件

唯一客服浏览器插件 gofly.v1kf.com 我们在做视频号直播的时候,会有这种自动回复咨询问题的功能唯一客服浏览器插件现在就支持,在视频号直播后台,自动化回复用户问题,以及循环发送我们的介绍话术 十年开发经验程序员,离职全心创业中,历时三年开发出的产品《唯一客服系统》…

[编程笔记] 当前上下文中不存在名称ViewBag

当前上下文中不存在名称"ViewBag",很多ViewBag、@Html.Partial、@Html.FunctionBar() 等这些地方都报波浪线了,提示不存在这个名称,但是代码是可以运行的最近在弄另外一个项目,很长一段时间没接触MVC了,Visual Studio 2022识别cshtml文件的时候,出了一点故障!…