使用Angular2 fronend在Heroku Java应用程序上进行部署

Question

在使用Angular 2 fronend部署基于Java的应用程序时，我遇到了一个问题。

我的应用程序需要安装NodeJs并且它是“npm install”以从package.json获取它的所有依赖项。 而且只有maven。 Angular2 app位于java webapp文件夹中。 我看到buildpacks来安装它。 但他们不工作。 例如这一个

https://github.com/Vincit/heroku-buildpack-java-nodejs

它在根目录中搜索* .ts文件，但不在“webapp”java文件夹中搜索。 有没有像这样的任务的智能构建包，或其他方便的方式来做到这一点？

先感谢您！

Answer 1

您可以使用Heroku 对应用程序上多个buildpack的支持来实现此目的。 简而言之，运行：

$ heroku buildpacks:clear
$ heroku buildpacks:add heroku/nodejs
$ heroku buildpacks:add heroku/java

在您的情况下，情况可能与此JHipster示例非常相似， 该示例使用Node.js和angular。 有几点需要考虑：

• 默认情况下 ，Heroku Node.js buildpack 不会安装devDependencies 。 您需要将它们移动到dependencies或设置config var NPM_CONFIG_PRODUCTION=false 。
• 如果您在运行时不需要node_modules目录或Node.js运行时，它将使您的应用程序变得庞大。 您可以使用Maven删除它们。

这是一个例子：

<plugin>
  <artifactId>maven-clean-plugin</artifactId>
  <version>2.5</version>
  <executions>
    <execution>
      <id>clean-build-artifacts</id>
      <phase>install</phase>
      <goals><goal>clean</goal></goals>
      <configuration>
        <excludeDefaultDirectories>true</excludeDefaultDirectories>
        <filesets>
          <fileset>
            <directory>node_modules</directory>
          </fileset>
          <fileset>
            <directory>.heroku/node</directory>
          </fileset>
        </filesets>
      </configuration>
    </execution>
  </executions>
</plugin>

这在JHipster帖子中有更详细的描述。

Answer 2

我用这个插件：

https://github.com/eirslett/frontend-maven-plugin

<plugin>
   <groupId>com.github.eirslett</groupId>
    <artifactId>frontend-maven-plugin</artifactId>
    <version>1.0</version>
    <executions>
      <execution>
       <id>install node and npm</id>
       <goals>
        <goal>install-node-and-npm</goal>
       </goals>
       <configuration>
        <nodeVersion>v4.4.3</nodeVersion>
        <npmVersion>3.8.3</npmVersion>                                    
       </configuration>
     </execution>
     <execution>
      <id>npm install</id>
       <goals>
        <goal>npm</goal>
       </goals>
      <configuration>
        <arguments>--strict-ssl=false install</arguments>
      </configuration>
      </execution>                            
      <execution>
      <id>npm build prod</id>
      <goals>
       <goal>npm</goal>
      </goals>
     <configuration>
    <arguments>run build.prod</arguments>
    </configuration>
    </execution>
   </executions>
  </plugin>

npm build.prod是我为prod部署构建的gulp任务，在我的package.json中指定为脚本（我使用的是角度2种子）： https ： //github.com/mgechev/angular-seed

我必须创建一个任务来复制到我的Java应用程序的地方静态使用这些文件：

import * as gulp from 'gulp';
let gnf = require('gulp-npm-files');
let resourceDest = 'src/main/resources/public';

export = () => {

        gulp.src('**', {cwd:'./dist/prod'}).pipe(gulp.dest(resourceDest));
        gulp.src(gnf(), {base:'./'}).pipe(gulp.dest(resourceDest));


};

这将我编译的angular 2 javascript复制到src / main / resources / public中