运行 grunt 和 tomcat 服务器的 Web 应用程序（Spring、Angular、Grunt、Maven、Tomcat）

Posted 2023-03-30

【中文标题】运行 grunt 和 tomcat 服务器的 Web 应用程序（Spring、Angular、Grunt、Maven、Tomcat）

【英文标题】：Web App (Spring, Angular, Grunt, Maven, Tomcat) running both grunt and tomcat servers

【发布时间】：2014-09-25 01:09:18

【问题描述】：

好的，所以我一直在阅读其他几个堆栈问题，并试图将它们拼凑在一起，但运气不佳。基本上我的方法是我目前有一个项目有多个子项目。我基本上有以下几点：

root
|----backend
|----|----src
|----|----|----main
|----|----|----|----java (individual java files not shown)
|----|----|----|----resources
|----|----|----|----|----META-INF
|----|----|----|----|----|----applicationContext.xml
|----|----|----|----webapp
|----|----|----|----|----WEB-INF
|----|----|----|----|----|----web_servicesConfig.xml
|----|----|----|----|----|----web.xml
|----|----pom.xml
|----deploy
|----|----src
|----|----|----main
|----|----|----|----resources (properties files for tomcat)
|----|----pom.xml
|----frontend
|----|----app
|----|----|----angular files
|----|----bower_components
|----|----|----bower files
|----|----bower.json
|----|----Gruntfile.js
|----|----pom.xml

好的，希望文件结构足够清楚。我打算使用 maven-grunt-plugin，这样我就可以在前端运行我的 grunt 命令。前端与 yo angular 产生的设置基本相同，或者至少是目标。 Deploy 简单地设置了 tomcat，后端保存了 Spring 4 的 restful services/api。

好的，这就是我感到困惑并寻求帮助的原因。我不知道如何让前端与后端正常工作。基本上我想知道是否有办法告诉 maven 以开发模式启动 Tomcat 和 Grunt 服务器，以便我可以使用它们的两个功能来快速开发我的项目，然后将 min 文件拉入生产构建的战争.我想我无法弄清楚如何让所有东西都很好地融合在一起。我检查了这个问题是哪种谈论它，但我仍然感到困惑：

How to deploy AngularJS app and Spring Restful API service on the same domain/server?

我会喜欢任何指向如何将 Maven 与 tomcat、spring、angularjs 和 grunt 一起使用的教程的链接……还有 bower，这样我就可以将它用于我的前端包管理。我已经阅读了几个示例，并且看到了许多关于如何将 spring 与 Java EE 和 jsp 一起使用的讨论。或者使用 Gradle 做一些我想做的事情......但没有什么完全像我正在尝试的那样。

当然，如果这是一个不好的方法，请告诉我。基本上我想让我的子项目尽可能分离，同时仍然允许开发人员从一个 pom 文件导入/运行。

【参考方案1】：

从你的问题中我只发现了两个问题

如何使用 grunt/bower + tomcat 进行持续开发 如何为生产部署

1 - 持续发展

我为此选择的解决方案 - 因为您已经使用 api 与 client <-> server 进行通信 - 是完全分离这两个项目。

那是什么意思？ 对我来说是拥有两个不同的存储库。一个用于客户端，一个用于服务器 这样一来，您获得的好处很少：

拆分项目的工作（前端/服务器端） 更易于维护 如果您想支持“仅 API”例如，移动应用程序等。

但是 - 他们在开发过程中如何沟通？

这是个好问题： 一种解决方案是在本地主机上并行运行两台服务器，即mvn clean tomcat:run -P yourprofile; grunt server

但是 - 如果我尝试从不同端口从客户端访问服务器端，我会得到跨域吗？ 你说的对。在这里你可以得到 grunt 及其插件的帮助。获取grunt-connect-proxy的副本

这个插件有什么好处，它充当 grunt 服务器和 tomcat 服务器之间的中间件，所以你向 grunt 服务器询问 API，但实际上 grunt 是要求 tomcat 服务器回答这个问题（当然是在幕后）

2 - 为生产部署

我想这是个人喜好问题。我发现war文件非常大，可以一次又一次地上传（即使能够在你所有的tomcat应用程序之间共享lib）。我想出的解决方案是通过 git 进行部署。

好的，但是我有一个很大的战争文件。我该怎么做？

对我来说，我使用我在 bash 中编写的部署脚本。这就是它的作用：

标记当前来源 运行 mvn clean package war:exploded -P your-prod-profile（这也将运行测试和集成测试） 使用上述命令，您可以将所有已编译项目的文件放在一个位置，而不是一个大的 war 文件。 将所有这些文件（和内部路径）复制到外部文件夹（我使用另一个存储库通过 git 进行维护部署。所以基本上我有 3 个存储库。一个用于服务器源，一个用于客户端源，一个用于服务器二进制文件。） 在执行 4 之前，请确保从中删除所有文件和文件夹（除了 .git 文件） 在 4 之后执行“git add -A” "git commit -a -m '新的生产版本X" 您可以在前后标记一些标签，以便在新产品中出现大错误时轻松恢复上一个代码 在服务器上运行远程命令以 a.) 停止服务器，b.) 从二进制存储库中提取最后的更改，c.) 再次运行服务器。 对我来说，我所做的是在 tomcat 应用程序与外部文件夹（二进制存储库）之间建立符号链接，所以

希望这能给你一些指导，

最好的， 橡木

【讨论】：

感谢您的回复，我喜欢您的回答。我还是新手，所以我无法点击它，因为我还没有足够的声誉。 :-(

太棒了，非常感谢！正是我想要的。

【参考方案2】：

好的，所以我想发布一个适用于我的本地开发的解决方案，并允许我使用所需的方法......就像 Oak 所说的那样（抱歉，我不确定如何链接他的用户名）并有两个单独的构建/项目。但是，我的前端项目使用 grunt 在特定端口上提供我的代码，并使用一些中间件将端口上的请求定向到前端代码或运行 spring-boot 的服务器。这使我可以像代码真的在同一个项目上运行一样行事，并避免在不同的域/服务器上运行它们时出现任何 CORS 和其他问题。这是我的 grunt 构建中允许我这样做的代码部分：

livereload: 
    options: 
      debug: true,
      middleware: function (connect, options) 
        var middlewares = [];

        middlewares.push(rewriteModule.getMiddleware([
          //Load App under context-root of 'myappcontext/secured'
          from: '^/napiweb/(.*)$', to: '/$1',

          //Redirect slash to myappcontext/secured as convenience
          from: '^/$', to: '/napiweb', redirect: 'permanent'

          //Send a 404 for anything else
          //from: '^/.+$', to: '/404'
        ]));

        if (!Array.isArray(options.base)) 
          options.base = [options.base];
        

        options.base.forEach(function () 
          // Serve static files.
          middlewares.push(connect.static('.tmp'),
            connect().use(
              '/bower_components',
              connect.static('./bower_components')
            ),
            connect.static(appConfig.app));
        );

        // Make directory browse-able.
        //middlewares.push(connect.directory(directory));

        return middlewares;
      
    
  ,

然后我将我的 spring-boot 配置为具有本地开发代理，该代理将特定请求转发到前端。它设置如下：在我的 config.xml 文件中

<config proxy-port="http-port" console-port="1776">
  <console-recording sso="true" rest="true" max-entries="100" enable-debug- logging='true'/>
  <sso-cookie name="wamulator" domain=".somedomain.com" session-timeout-seconds="1800"/>
  <port-access local-traffic-only="false"/>
  <sso-traffic strip-empty-headers="true">
     <by-site host="localhost.somedomain.com" port="http-port">

       <cctx-mapping thost="127.0.0.1" tport="8081">
         <policy-source>xml=policy-src-xml</policy-source>
       </cctx-mapping>
       <cctx-mapping thost="127.0.0.1" tport="9000">
         <policy-source>xml=static-src-xml</policy-source>
       </cctx-mapping>
       <cctx-mapping thost="127.0.0.1" tport="8180">
         <policy-source>xml=napi-src-xml</policy-source>
       </cctx-mapping>
     </by-site>
  </sso-traffic>

 <user-source type='xml'>xml=usr-src-xml</user-source>
 <proxy-timeout inboundMillis="0" outboundMillis="0" />
</config> 

如您所见，cctx 映射会将一些请求定向到在端口 9000 上提供服务的前端，并将一些请求定向到提供 API 的后端。这是基于 policy-config.xml 和 static-config.xml文件。它们几乎完全相同，唯一的区别在于 authHost 和 cctx 设置，这里以一个为例：

<deployment at='2013-01-31_16:25:12.205-0700'>
   <environment id='dev' host='dev.somedomain.com (exposee)'/>
   <application id='napi-rest' authHost='localhost.somedomain.com/napiweb/api' cctx='/napiweb/api'>
   <authentication scheme='anonymous' name='Anonymous Authentication'> </authentication>
   <authorization failure-redirect-url='/denied.html'>
   <default format='exposee' value='Allow Authenticated Users'>
     <headers>
       <success>
         ...profile-att specific for my organization
       </success>
       <failure>
         <redirect value='/denied.html'/>
       </failure>
     </headers>
  </default>
  <rule name='Allow Authenticated Users' enabled='true' allow-takes-precedence='false'>
    <allow>
      <condition type='role' value='Anyone'/>
    </allow>
  </rule>
</authorization>

唯一的区别是另一个文件有authHost='localhost.somedomain.com/napiweb/' cctx='/napiweb/' 这会导致调用 API 和调用前端，就好像它们是从同一个项目中提供的一样。然后，当我们将项目推送到我们的存储库时，我们有两个构建周期。一个人使用前端并使用grunt build 创建静态资产，然后将这些文件复制到其余服务器，以便它可以提供它们。这允许我们有单独的项目进行开发，但只有一个服务器为我们的站点提供服务。不理想......因为最终我认为我们应该为前端和后端设置单独的服务器/实例，但由于我们不允许这样做，这使我们能够像在开发过程中那样行事。我希望这可以帮助别人。

【讨论】：

我只提供了这个，因为我注意到这篇文章获得了很多浏览量，也许有人想要一些代码来帮助他们开始。