如何打包分离 Web 服务和 HTML/JS 的 Web 应用程序

Question

我们正在尝试拆分当前打包为单个 WAR 文件的 Web 应用程序。我们想将依赖于 Spring 引导的 Web 服务 (RESTful) 部分打包到一个 WAR 中。我们希望能够单独部署包含所有 HTML/JS 组件的前端部分。

我们使用 Tomcat 8 作为应用程序容器。

我们已经分离了代码并为 Web 服务生成了 .WAR，这没问题。我们想知道如何为 HTML/JS 部分做这件事。如何打包，使用Maven？如何使用Tomcat部署和启动它？然后如何配置 Tomcat 以便应用程序的两个部分共享相同的端点：

localhost:8080:application/ 对于 HTML/JS 部分
localhost:8080:application/rest/ 用于 SpringBoot.

我们现在所拥有的只是将 HTML/JS 文件手动复制到 tomcat 的 webapps 文件夹中，但这对于轻松部署来说并不令人满意。另外，我们没有设法在 Tomcat.

中配置端点

欢迎任何帮助！

Answer 1

有多种方法和工具可以实现您想要实现的目标。

我将建议一种使用我在类似项目中使用的一些工具来完成此操作的方法。虽然这个答案可能看起来以意见为导向，但它可能会给您一些想法，让您可以着手做出自己的选择。

如果下面描述的任何步骤需要更多详细信息，请告诉我，我会进行更新。

如何打包，使用Maven？

您需要做的第一件事是将您的项目分成至少两个模块：

一个 war 模块与您的 REST 服务
带有静态文件的客户端模块。

要构建客户端模块，您可以使用 Gulp。它将帮助您管理静态 JS/HTML/CSS 文件上的简单任务。您可以通过 com.github.eirslett 使用 frontend-maven-plugin 启动 gulp 任务：

<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>v6.9.1</nodeVersion>
            <npmVersion>3.10.9</npmVersion>
         </configuration>
      </execution>
      <execution>
         <id>npm install</id>
         <goals>
            <goal>npm</goal>
         </goals>
         <configuration>
            <arguments>install</arguments>
         </configuration>
      </execution>
      <execution>
         <id>npm rebuild node-sass</id>
         <goals>
            <goal>npm</goal>
         </goals>
         <configuration>
            <arguments>rebuild node-sass</arguments>
         </configuration>
      </execution>
      <execution>
         <id>gulp build</id>
         <goals>
            <goal>gulp</goal>
         </goals>
         <configuration>
            <arguments>build --no-notification</arguments>
         </configuration>
      </execution>
      <execution>
         <id>gulp test</id>
         <phase>test</phase>
         <goals>
            <goal>gulp</goal>
         </goals>
         <configuration>
            <arguments>test - - no-notification</arguments>
         </configuration>
      </execution>
   </executions>
</plugin>

在此示例中，插件启动所需的步骤：

npm install -> gulp
gulp 构建 -> 你的客户端模块构建
gulp 测试 -> 你的客户端单元测试

那么您需要在模块的根目录下有一个 gulp 文件。

现在 gulp 需要做的最少的事情就是将后端 URL 的其余服务提供给您的客户端应用程序。您正在使用 angular，所以我建议您在构建阶段使用 gulp-ng-constant 来动态修改 angular 常量：

const ngConstant = require('gulp-ng-constant');

gulp.task('build', gulp.series('ngconstant:prod', gulp.parallel('other', 'webpack:dist')));

    gulp.task('ngconstant:prod', function () {
      return ngConstant({
          name: 'yourApp',
          constants: {
              BASE_URL : 'http://www.exemple.com:8080'
          },
          template: conf.constantTemplate,
          stream: true
      })
      .pipe(rename('app.constants.js'))
      .pipe(gulp.dest(conf.app + 'app/'));
    });

在上面的 gulp 文件中，webpack 用于进行实际构建。

如何用Tomcat部署启动？

localhost:8080:application/ for the HTML/JS part

localhost:8080:application/rest/ for the web services running under SpringBoot.

我不会这样做的。在 Tomcat 中将您的 Web 应用程序和客户端应用程序置于同一上下文根目录下似乎很复杂。

相反，我建议您将静态文件部署到不同的上下文根或不同的 Http 服务器，例如 Apache http 服务器。从技术上讲，您的客户端应用程序不需要应用程序服务器。将它部署到像 Apache 这样的常规、更轻、更快的 http 服务器上，将允许它在您重新启动 Tomcat 服务器时仍然运行。

然后你会得到：

http://www.exemple.com/ 用于您的客户端应用程序
http://www.exemple.com:8080/services/ 为您的服务 webapp

现在您的客户端应用程序与您的服务 webapp 位于不同的主机上。而且会导致跨源错误。因此，您将必须配置 CORS 以允许您的客户端应用程序向您的服务 webapp 发送请求。

另一种解决方案是将 Apache 设置为 tomcat 的代理。您可以定义一个 VirtualHost，它将 ward 所有从端口 8080 到 tomcat 服务器的请求。

如何打包分离 Web 服务和 HTML/JS 的 Web 应用程序

How to package Web application separating web services and HTML/JS

java

tomcat

war

maven

spring-boot