如何在具有ReactJs代码的Wildfly中配置静态index.html

问题描述

我已经使用npm build构建了我的ReactJS应用程序，最后我有了bundle.js和其他依赖项，这些依赖项与Babel和webpack模块捆绑在一起。

在我的最终dist文件夹中，该文件夹具有index.html，该文件夹指向bundle.js（如下所示）

<!DOCTYPE html>
<html lang="en">
<head><link rel="stylesheet" href="styles.css">
  <Meta charset="UTF-8">
  <Meta http-equiv="X-UA-Compatible" content="IE=edge">
  <Meta name="viewport" content="width=device-width,initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://npmcdn.com/react-bootstrap-table/dist/react-bootstrap-table-all.min.css">
  
</head>
<body>
  <div id="app"></div>
  <script src="bundle.js"></script>
</body>
</html>

下面是在npm构建之后生成的dist文件夹。

在本地我可以使用npm start启动应用程序，但是现在我的问题是如何将这个静态文件夹部署到Wildfly 18.x中？这样我就可以启动我的ReactJS代码。

解决方法

WildFly是用于托管基于JVM的Web应用程序的应用程序服务器，因此在其上部署基于JS的应用程序并不常见。

您需要做的是从dist文件夹中创建一个war文件，然后使用其管理控制台或JBoss CLI将其部署到WildFly中。

您可以找到有关战争文件here和here的更多详细信息。还有为ReactJS应用here和here创建战争的详细信息。最终here提供了有关应用程序部署的WildFly 18文档。

reactjs reactjs static-content wildfly