如何在 Tomcat 服务器上部署 reactJS 应用程序答案

【问题标题】：how to deploy reactJS application on Tomcat Server如何在 Tomcat 服务器上部署 reactJS 应用程序
【发布时间】：2018-06-07 19:28:34
【问题描述】：

我是 reactjs 新手，我想在 tomcat 服务器上部署我的 reactjs 应用程序，而不是在默认端口为 3000 的 react 服务器上运行。我运行 npm serve 命令来运行 npm 本地服务器，但需要使用 tomcat 服务器访问该应用程序。

请有任何建议。

谢谢

【问题讨论】：

标签： java reactjs tomcat deployment

【解决方案1】：

npm run build 可以触发构建过程，但它会生成代码，假设基本 url 没有任何相对路径，但是如果我想部署到服务器中的相对路径怎么办？？所以我所说的相对路径的意思是，我的 tomcat webapps 目录中有一个 simpleapp 文件夹，我想从中访问我的 react 应用程序，即 http://localhost/simpleapp 。如果你使用 react 路由器，它会变得更加复杂。

我得到一个空白页，但后来，我 found Some changes 完成了反应路由器和 package.json 解决了我的问题。

所以我找到的解决方案是：-

在 package.json 中提及主页属性

"主页": "https://localhost:8080/simpleapp",
对于 react 路由器，我们必须添加 basename 属性。

在上述情况下，应用程序将部署在 simpleapp 相对路径上

<Router basename={'/simpleapp'}>
  <Route path='/' component={Home} />
  {/* … */}
</Router>

【讨论】：

【解决方案2】：

在反应代码的根文件夹中运行此命令。

npm 运行构建

这会在名为“build”的文件夹中生成优化的生产版本，该文件夹基本上包含一个 index.html 页面，其中包含静态 JS 和 CSS 文件。然后，您可以将这些文件复制并粘贴到您的 Tomcat WebContent 文件夹中。

这是一个link，可能会对此有所了解。

【讨论】：

那么Server.xml 文件呢？我必须编辑它吗？我有 webapps 文件夹。我是否在那里创建一个文件夹，将构建复制到其中，然后配置我的 server.xml？我可以给她一些建议。
不，您不必编辑 server.xml 文件。只需将 build 文件夹中的文件粘贴到 Tomcat 中的 WebContent 文件中即可。
我如何知道它正在监听哪个端口？ React 中使用的只是 3000 吗？
没关系。我星期天早上的大脑正在与我作斗争。谢谢你的提示。问候
将构建文件夹的内容粘贴到 WebContent 文件夹后，运行您的服务器，您应该能够在端口 8080 (localhost:8080) 访问您的服务器

【解决方案3】：

您需要首先决定如何使用 Grunt 或 webpack 构建项目。您还可以在包 json 中添加类似 npm run build 的脚本，这可以触发构建过程。只需放置构建的文件并将脚本包含在 index.html 中，构建的项目就可以在任何 Web 服务器中使用。

【讨论】：

【解决方案4】：

按照上面的@Passcode 执行第 1 步。对于第 2 步，请使用 'HashRouter'

1) Go to index.js

2) Import HashRouter

Eg-> import { BrowserRouter, Route, Switch, Redirect,HashRouter} from "react-router-dom";

3) If you have 'BrowserRouter' replace it with 'HashRouter'.

更多详情

【讨论】：