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

Question

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

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

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

• localhost:8080:application/用于 HTML/JS 部分
• localhost:8080:application/rest/用于在 SpringBoot 下运行的 Web 服务。

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

欢迎任何帮助!

Answer 1

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

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

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

如何打包，使用Maven？

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

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

要构建客户端模块，您可以使用 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 test -> 你的客户端单元测试

然后您需要在模块的根目录下有一个 gulpfile。

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

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/'));
    });

在上面的 gulpfile 中，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/为您的服务网络应用

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

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