使用 Angular 2 前端部署在 Heroku Java 应用程序上

Posted 2023-03-07

【中文标题】使用 Angular 2 前端部署在 Heroku Java 应用程序上

【英文标题】：Deploying on Heroku Java app with Angular2 fronend

【发布时间】：2017-04-15 09:02:06

【问题描述】：

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

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

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

它在根目录中搜索 *.ts 文件，但不在“webapp”java 文件夹中。 是否有一些智能构建包可以完成这样的任务，或者其他方便的方法可以简单地完成它？

提前谢谢你！

【参考方案1】：

您可以通过 Heroku 对 multiple buildpacks on an app 的支持来完成此操作。简而言之，运行：

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

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

Heroku Node.js 构建包will not install devDependencies by default。您需要将它们移动到 dependencies 或设置配置变量 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 post中有更详细的描述。

【参考方案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 中指定为脚本（我使用的是 angular 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