显示导航

合并React Profile项目

365bet地区了解如何生成结合了React和365bet地区生产工件的JAR文件

扎卡里·克莱因(Zachary Klein)

365bet地区365bet地区版本 3.3.0

365bet地区365bet地区培训

365bet地区培训365bet地区由创建并积极维护365bet地区框架的人们开发和交付

入门

在本指南中,您将创建服务器客户365bet地区React概要文件中的项目默认情况下,React概要文件设置了单独的前端和后端应用程序,可以使开发过程更高效。但是,这可能无法满足您的部署需求,尤其是在将整个应用程序部署到Tomcat或Tomcat或Servlet容器中的情况下。可以作为胖JAR来执行由于365bet地区和Gradle构建工具的灵活性,我们只需少量更改即可配置365bet地区 React应用程序的统一构建

您将需要什么

要完成本指南,您将需要以下内容

  • 花些时间在你手上

  • 体面的文本编辑器或IDE

  • 安装了JDK或更高版本JAVA首页适当配置

如何完成指南

要开始,请执行以下操作

要么

365bet地区365bet地区指南存储库包含两个文件夹

  • 初始365bet地区初始项目通常是一个简单的365bet地区应用程序,其中包含一些其他代码,可以帮助您快速入门

  • 完成一个完整的示例它是按照指南中介绍的步骤进行操作并将这些更改应用于文档的结果。初始

要完成指南,请转到初始

  • 光盘进入grails指南反应合并初始

您可以直接前往如果你光盘进入grails指南反应结合完成

编写申请

如果您打开初始

我们做了一个小改动我们搬了初始服务器Gradle属性初始gradle属性

这俩服务器365bet地区客户React app有建立可以运行的任务gradlew服务器组装建立一个WAR或JAR文件,你可以运行要么gradlew客户端构建生成静态的React Webpack包我们创建新的第一步建立gradle文件位于项目结构顶部的上方客户服务器子项目

配置Gradle

创建一个新的建立gradle文件与设置gradle并添加以下内容

建立gradle
任务copyClientResources取决于: '客户建立') { (1)'建立'描述'将客户端资源复制到服务器中'从项目中复制文件'客户'buildDir absolutePath进入"${项目'服务器'buildDir}资源主要公众"任务assembleServerAndClient取决于: ['copyClientResources', '服务器组装']) {  (2)'建立'描述'构建组合的服务器客户端JAR'从文件树最后复制: "${项目'服务器'buildDir}") (4)进入"$rootDir建立"记录仪安静"JAR产生于$rootDir构建它结合了服务器和客户端项目"任务"服务器组装"mustRunAfter copyClientResources(3)
1 copyClientResources任务将复制由生成的静态文件进入资源目录服务器项目
2 assembleServerAndClient任务将复制步骤与现有Gradle联系起来组装的任务服务器项目这意味着只有在运行此顶级任务时,我们才会获得统一的存档服务器组装一个人将生成一个没有客户端资源的普通WAR JAR文件
3 如果copyClientResources要执行它必须在服务器组装365bet地区这确保了在组装365bet地区应用程序时客户端静态文件将可用
4 创建合并的JAR文件后,我们将文件复制到顶层建立目录

在本指南中,我们将使用可执行的JAR文件作为我们的部署目标。服务器项目建立gradle文件和删除下一行

服务器构建gradle
应用插入:"战争"

更新我们的配置

365bet地区现在我们有了一个统一的Gradle构建目标,我们还需要进行一些其他配置更改,所有这些更改都与单独的365bet地区 React应用程序和我们新的组合部署之间的URL差异有关。

365bet地区默认情况下,已部署的365bet地区应用中的静态资源是通过静态的基本URL将与我们的React应用程序期望的冲突,但是幸运的是,这是一个非常简单的更改

编辑服务器grails应用conf应用yml:

服务器grails应用conf应用yml
ils:
    资源:
        图案: /**

这只是将静态资源URL设置为根上下文

365bet地区类似地,我们需要编辑React应用程序用来对365bet地区应用程序进行REST调用的URL。src配置js在里面客户项目

编辑客户端src配置js:

客户端src配置js
进口来自的pjson'包json'const prod process env NODE ENV'';  (1)控制台日志`载入中$进程环境NODE ENV配置`);

出口const SERVER URL产品'' : 'HTTP本地主机';

出口const CLIENT VERSION pjson版本出口const REACT VERSION pjson依赖项有反应
1 工艺环境NODE ENV是一个NodeJS环境变量,它将告诉我们我们是在生产还是开发模式下运行。我们正在使用一个简单的三元运算符来切换服务器URL365bet地区config属性,以在开发过程中指向我们的独立365bet地区应用程序,并在生产中使用根上下文

网址映射

我们的最终变革需要在UrlMappings常规如果您默认记得服务器365bet地区365bet地区应用程序在根上下文中呈现了一些应用程序元数据,但是为了使我们的组合构建正常工作,我们需要在根上下文中加载React应用程序。幸运的是,这也是一个非常简单的更改

编辑服务器grails应用程序控制器演示UrlMappings groovy:

服务器grails应用程序控制器演示UrlMappings groovy
如果环境当前环境生产(1)
    '/'(小号: '索引html')
} 其他 {
    '/'(控制者: '应用', 行动:'指数')
}
1 我们正在使用免费环境类,以确定我们是在开发模式下运行还是在已部署的工件中运行,并适当设置URL映射

使用这个新的映射配置,当我们构建可执行的JAR文件时,/URL将被映射到索引html碰巧也是我们的React应用程序的登录页面

运行应用程序

要生成统一的可执行JAR文件,只需运行以下命令

在构建时生成的gradlew assembleServerAndClient JAR它将服务器和客户端项目结合在一起

要运行该应用程序,请使用Java罐子命令

365bet地区java jar构建服务器jar 365bet地区应用程序在环境生产中的http localhost运行

浏览到HTTP本地主机你应该看到React应用程序

向GET请求http本地主机应用程序365bet地区并且您应该从365bet地区应用程序中看到应用程序元数据

365bet地区恭喜您拥有统一的365bet地区 React生产版本