首页 > 其他分享 >如何将React项目,部署到Web服务器的Tomcat 上

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

时间:2024-10-10 13:11:11浏览次数:7  
标签:xml Web Tomcat 文件 webapps React 文件夹

将 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 即可访问成功

 

标签:xml,Web,Tomcat,文件,webapps,React,文件夹
From: https://www.cnblogs.com/wwssgg/p/18456106

相关文章

  • 第二十二章 编译WebRTC框架
    源代码地址:https://webrtc.googlesource.com/src.git下载后放到src目录下gitclone https://chromium.googlesource.com/chromium/src/buildtools下载后放到src目录下gitclone https://chromium.googlesource.com/chromium/src/build需要https://chromium.googlesource.co......
  • 在 ASP.NET Core 中编写高性能 Web API 的4个小技巧
    WebAPI通常用来与外部模块进行通信、发送和接收数据,作为后端开发人员,应该把写出高性能的应用作为目标。下面4个技巧是我在编写WebAPI的小技巧。1、大量数据使用分页查询接口传输大量数据可能会导致严重的性能问题、过多的内存消耗和速度减慢。为了缓解这些可能的瓶颈,强......
  • springboot+vue基于javaweb电费管理系统【开题+程序+论文】
    系统程序文件列表开题报告内容研究背景随着信息化技术的飞速发展,各行各业的管理效率与服务质量均得到了显著提升。在电力行业中,电费管理作为其核心业务流程之一,直接关系到电力企业的运营效益与用户的满意度。传统的电费管理方式大多依赖于人工操作,不仅耗时费力,还容易出错,难......
  • SpringBootWeb AOP
    SpringBootWebAOP事务管理rollbackFor属性propagation属性 案例AOP基础 进阶通知类型通知顺序 切入点表达式execution@annotation连接点案例实体类接口方法切面类事务管理rollbackFor属性propagation属性REQUIRED:大部分情况下都是用该传播行......
  • 【Web自动化测试】Python + Selenium实现携程网火车票订购的自动化测试——PO模式篇
    目录1.PO模式2.目录结构3.代码(1).base层——`base.py`(2).common层——`function.py`(3).data层——`data.yaml`(4).po层——`login_page.py`(5).po层——`search_trains_page.py`(6).po层——`filter_tickets_page.py`(7).po层——`order_page.py`(8).testcase层——`test_b......
  • (开题)flask框架基于Web的立直麻将业余运动员考级管理系统(程序+论文+python)
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表开题报告内容研究背景随着互联网技术的飞速发展,电子商务已成为现代商业的重要组成部分。礼品卡作为一种新型的礼品形式,因其便捷性、灵活性和个性化特点,受到了广......
  • React Native性能剖析:Flipper工具使用
    文章目录Flipper工具简介安装Flipper连接Flipper使用Flipper分析性能ReactNative插件Network插件Layout插件HeapGraph插件GraphQL插件实战案例分析案例1:性能瓶颈定位案例2:内存泄漏检测优化代码再次使用Flipper分析进阶技巧性能优化技巧内存优化技巧......
  • 解密网易云音乐Web端的请求参数params与encSecKey
    网易云音乐作为一款功能强大的音乐流媒体平台,为用户提供了丰富的音乐体验和社区互动。然而,当用户希望批量下载音乐资源,尤其是整个歌单或某位歌手的全部歌曲时,受限于版权保护和平台策略,官方渠道通常无法直接实现这一需求。在这种情况下,一些技术爱好者或开发者可能会转向使用......
  • web网页制作(Radio Shack)
    <!doctypehtml>BootstrapdemoRadioShackStoreLocatorSteve'sWorkbenchRadioShackServicesElectronicRepairAboutRadioShackProductSupportRockandRollOnTourUnitedAgainstCrime......
  • JAVAWEB实现文件上传下载功能实例解析
    需求:大文件上传,批量上传,断点续传,文件夹上传,大文件下载,批量下载,断点下载,文件夹下载文件夹:上传下载需要支持层级结构,采用非压缩方式文件大小:100G前端:vue2,vue3,vue-cli,jquery,html,webuploader后端:JSP,springbootweb服务:tomcat数据库:mysql,oracle,达梦,国产化数据库服务......