使用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中