【问题标题】:Web App (Spring, Angular, Grunt, Maven, Tomcat) running both grunt and tomcat servers运行 grunt 和 tomcat 服务器的 Web 应用程序(Spring、Angular、Grunt、Maven、Tomcat)
【发布时间】: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 文件导入/运行。

【问题讨论】:

    标签: java spring angularjs gruntjs maven-tomcat-plugin


    【解决方案1】:

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

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

    1 - 持续发展

    我为此选择的解决方案 - 因为您已经使用 apiclient <-> 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 中编写的部署脚本。这就是它的作用:

    1. 标记当前来源
    2. 运行 mvn clean package war:exploded -P your-prod-profile(这也将运行测试和集成测试)
    3. 使用上述命令,您可以将所有已编译项目的文件放在一个位置,而不是一个大的 war 文件。
    4. 将所有这些文件(和内部路径)复制到外部文件夹(我使用另一个存储库通过 git 进行维护部署。所以基本上我有 3 个存储库。一个用于服务器源,一个用于客户端源,一个用于服务器二进制文件。)
    5. 在执行 4 之前,请确保从中删除所有文件和文件夹(除了 .git 文件)
    6. 在 4 之后执行“git add -A”
    7. "git commit -a -m '新的生产版本X"
    8. 您可以在前后标记一些标签,以便在新产品中出现大错误时轻松恢复上一个代码
    9. 在服务器上运行远程命令以 a.) 停止服务器,b.) 从二进制存储库中提取最后的更改,c.) 再次运行服务器。
    10. 对我来说,我所做的是在 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 创建静态资产,然后将这些文件复制到其余服务器,以便它可以提供它们。这允许我们有单独的项目进行开发,但只有一个服务器为我们的站点提供服务。不理想......因为最终我认为我们应该为前端和后端设置单独的服务器/实例,但由于我们不允许这样做,这使我们能够像在开发过程中那样行事。我希望这可以帮助别人。

    【讨论】:

    • 我只提供了这个,因为我注意到这篇文章获得了很多浏览量,也许有人想要一些代码来帮助他们开始。
    猜你喜欢
    • 2015-08-30
    • 2013-02-20
    • 1970-01-01
    • 2014-03-13
    • 1970-01-01
    • 1970-01-01
    • 2015-05-16
    • 1970-01-01
    • 2012-06-09
    相关资源
    最近更新 更多