如何在Tomcat服务器上部署ReactJS应用程序

Question

我是ReactJ的新手，我想在Tomcat服务器上部署我的ReactJS应用程序，而不是在React Server上运行，默认端口为3000。我运行NPM服务命令以运行NPM本地服务器，但需要使用Tomcat服务器访问该应用程序。

请提出任何建议。

谢谢

Answer 1

npm run build 可以触发构建过程，但是假设基本URL没有任何相对路径，它会生成代码，但是如果我想部署到相对我的服务器中的路径??。因此，相对路径我的意思是，我的tomcat webapps目录中有一个简单的文件夹，我想从http：//http：//localhost/simpleapp访问我的react应用程序。如果您使用React Router，它会变得更加复杂。

我得到了一个空白页，但是后来，我发现了关于React路由器和软件包的一些更改。解决了我的问题。

所以我发现的解决方案是： -

1. package.json中提及主页属性

   "主页"：" https：//localhost：8080/simpleapp"，

2. 对于React路由器，我们必须添加Basename属性。

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

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

Answer 2

在您的React代码的根文件夹中运行此命令。

npm run build

这将在一个名为" build"的文件夹中生成优化的生产构建，该文件夹基本上包含一个带有静态JS和CSS文件的index.html页面。然后，您可以将这些文件复制到tomcat WebContent文件夹中。

这是一个链接，可能对此有所了解。

Answer 3

您需要首先决定如何使用grunt或webpack构建项目。您还可以在软件包JSON中添加诸如npm run build之类的脚本，从而触发构建过程。构建的项目可以通过仅放置构建文件并在您的index.html中包含脚本来使用。

Answer 4

按照上面的@PassCode遵循步骤1。对于第2步

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'.

更多详细信息

1. https://medium.com/@daniel.hramkov/browserrouter-vs-hashrouter-e8bf1c3824ce
2. React-Router URL在刷新或手动写作时不起作用