谷歌前端GWT项目整合springboot并打成jar包进行部署

一：背景

我们的一个配置中心项目使用了GWT + springboot的项目架构。之前的部署方式是将GWT先用maven编译成js文件，然后把js文件再单独部署到tomcat中尽情启动，相当于一个前后端分离的状态。但是随着我们逐渐将应用部署方式转向云的时候，单独部署tomcat+再部署一个后端jar项目就不如直接部署一个自带前端项目的jar项目更香了。（方便开发，测试，及部署。大大提高工作效率！）

二：实现思路

将GWT编译后产生的前端文件直接放到springboot的static文件夹下。这样启动boot后直接可以访问到前端。
实现在项目中使用maven命令就可以完成编译，打包。无需其他手动操作。

三：实现方式

主要通过修改pom文件中插件的方式来实现

1. 修改原model的war包改为jar包

    <modelVersion>4.0.0</modelVersion>
    <artifactId>asdasd</artifactId>
    <packaging>jar</packaging>

2. 解决jsp报错问题

   <!-- 必须使用低版本tomcat,否则jsp报错.怀疑是jsp写法问题,未调研
   https://blog.csdn.net/chenzhirong520/article/details/125167400 -->
   <dependency>
       <groupId>org.apache.tomcat.embed</groupId>
       <artifactId>tomcat-embed-jasper</artifactId>
       <version>7.0.109</version>
       <scope>provided</scope>
   </dependency>
   <!-- 借据7版本tomcat:juli 报错 -->
   <dependency>
       <groupId>org.apache.tomcat</groupId>
       <artifactId>tomcat-juli</artifactId>
       <version>7.0.109</version>
       <scope>compile</scope>
   </dependency>
<!--  jsp报错:Unable to compile class for JSP  https://blog.csdn.net/chen888312/article/details/78639236     -->
    <dependency>
        <groupId>javax.servlet</groupId>
        <artifactId>servlet-api</artifactId>
        <scope>provided</scope>
    </dependency>
    <dependency>
        <groupId>javax.servlet</groupId>
        <artifactId>jstl</artifactId>
        <version>1.2</version>
    </dependency>

3. 修改gwt编译插件：将默认编译后的输出路径放到这个目录下<webappDirectory>./src/main/webapp/</webappDirectory>是为了方便在本地通过boot方式启动,本地启动前需要先编译

<plugin>
   <groupId>org.codehaus.mojo</groupId>
   <artifactId>gwt-maven-plugin</artifactId>
   <executions>
       <execution>
           <goals>
               <goal>compile</goal>
           </goals>
           <!-- gwt 配置官网 https://gwt-maven-plugin.github.io/gwt-maven-plugin/compile-mojo.html  -->
           <configuration>
               <module>com.qwe.1123.app.Module</module>
               <!--<extraJvmArgs>-Xmx4096M</extraJvmArgs>-->
               <extraJvmArgs>-Xmx1024M</extraJvmArgs>
               <enableAssertions>true</enableAssertions>
               <draftCompile>false</draftCompile>
               <!-- 为了强制重新编译, -->
               <force>true</force>
               <!-- 下面一行配置对于包含了drools的依赖的app项目非常重要，否则会因为drools对ecj的依赖导致编译失败，以后考虑加到management里去 -->
               <!-- 在eclipse里运行里，需要修改run configuration -> classpath ，把gwt-dev.jar放到项目之前 -->
               <gwtSdkFirstInClasspath>true</gwtSdkFirstInClasspath>
               <!--为了信鸽扫描增加的内容，上面
               内存有4095改成了1024 -->
               <localWorkers>2</localWorkers>
               <!--  persistentunitcachedir配置成系统编译路径是因为。修改了webappDirectory后,输出地址发生了改变 -->
               <persistentunitcachedir>${project.build.directory}</persistentunitcachedir>
               <!-- 放到这个目录下是为了方便在本地通过boot方式启动,本地启动前需要先编译 -->
               <webappDirectory>./src/main/webapp/</webappDirectory>
               <deploy>${project.build.directory}/${project.build.finalName}</deploy>
           </configuration>
       </execution>
   </executions>
   <dependencies>
       <dependency>
           <groupId>org.springframework</groupId>
           <artifactId>spring-core</artifactId>
           <version>${spring.version}</version>
       </dependency>
       <dependency>
           <groupId>com.google.gwt</groupId>
           <artifactId>gwt-dev</artifactId>
           <version>${gwt.version}</version>
       </dependency>
   </dependencies>
</plugin>

4. 使用antrun命令,将gwt编译后的代码复制到target路径,目的是为了将前端页面编译到jar包中

<!-- 使用antrun命令,将gwt编译后的代码复制到target路径,目的是为了将前端页面编译到jar包中.
            antrun使用方法 https://blog.csdn.net/qq_33547169/article/details/83059858-->
 <plugin>
       <groupId>org.apache.maven.plugins</groupId>
       <artifactId>maven-antrun-plugin</artifactId>
       <executions>
           <execution>
               <id>prepare</id>
               <!-- 在package之前进行copy -->
               <phase>prepare-package</phase>
               <configuration>
                   <tasks>
                       <echo message="将gwt编译后的页面拷贝到target路径"/>
                       <copy todir="${project.build.directory}/classes/META-INF/resources/" overwrite="true">
                           <fileset dir="./src/main/webapp/"/>
                       </copy>
                   </tasks>
               </configuration>
               <goals>
                   <goal>run</goal>
               </goals>
           </execution>
       </executions>
   </plugin>

小tips：加快GWT项目编译速度的配置

设置为仅支持chrome浏览器,减少排列组合,加快编译速度

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 2.4.0//EN" "http://google-web-toolkit.googlecode.com/svn/tags/2.4.0/distro-source/core/src/gwt-module.dtd">
<module rename-to="App">
	<inherits name='com.123.Module' />
	
	<!-- 所有的外部js文件引入请放在jquery之后  -->
	<script src="js/pcsLigerDialog.js" />

	<!--  设置为仅支持chrome浏览器,减少排列组合,加快编译速度	-->
	<set-property name="user.agent" value="safari" />
	<!--  设置为仅支持中文,加快编译速度 @link https://blog.csdn.net/ttfuckyou3/article/details/84127696?ops_request_misc=&request_id=&biz_id=102&utm_term=gwt%20%20%E7%BC%96%E8%AF%91%E5%8A%A0%E9%80%9F&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-0-84127696.142^v73^insert_down4,201^v4^add_ask,239^v1^insert_chatgpt&spm=1018.2226.3001.4187	-->
	<extend-property name="locale" values="zh_CN"/>
	<entry-point class='com.param.ui.client.product.ModuleLoad' />
	<public path="public"/>
	<source path='client'/>
</module>