java - 如何将 Angular 6 项目和 Spring Boot 项目部署为单个部署单元

Question

我有两个项目，一个是 Angular 项目(前端应用程序)，另一个是 Spring boot(Rest Api 的)。当我单独运行这两个项目时，一切正常。但现在我想为这两个项目生成一个可运行的 jar 文件，这样当我在 localhost:8081 中运行 jar 时，它应该同时启动 Angular 模块和 spring boot 模块。

我已将以下插件添加到我的 pom.xml 文件中

<plugin>
                <artifactId>maven-resources-plugin</artifactId>
                <executions>
                    <execution>
                        <id>copy-resources</id> 
                        <phase>validate</phase> 
                        <goals>
                            <goal>copy-resources</goal>
                        </goals>                          
                        <configuration>                                   
                            <outputDirectory>${build.directory}/classes/static/</outputDirectory >
                            <resources>
                                <resource>
                                    <directory>../angular6-MyProject/dist</directory>
                                </resource>
                            </resources>
                        </configuration>
                    </execution>
                </executions>
        </plugin>

Answer 1

快速回答

您需要将静态文件复制到 servlet 容器的 ${build.directory}/classes/META-INF/resources 文件夹中，将它们作为 war/jar 文件中的静态文件(即https://www.webjars.org 如何工作)。

直接从 jar 处理 HTML

在 Spring Boot documentation 的静态内容部分中你可以找到

By default, Spring Boot serves static content from a directory called /static (or /public or /resources or /META-INF/resources) in the classpath or from the root of the ServletContext

/META-INF/resources 是“标准”方式(尽管不是最直观)，它直接来自 Java Servlet 规范 3.0(来自 JavaEE 版本 6)

A Web application exists as a structured hierarchy of directories. The root of this hierarchy serves as the document root for files that are part of the application. For example, for a Web application with the context path /catalog in a Web container, the index.html file at the base of the Web application hierarchy or in a JAR file inside WEB-INF/lib that includes the index.html under META-INF/resources directory can be served to satisfy a request from /catalog/index.html.

因此，设置适当的路径就可以完成这项工作。

将 Angular 应用程序视为依赖项

引用的 JavaEE 规范也是 webjars利用。 Webjar 是打包到 JAR 存档文件中的客户端依赖项。 Webjar 存在的主要原因是避免添加和管理客户端依赖项(例如 Angular、jQuery)，这通常会导致代码库难以维护。

但是如果 Angular 可以是一个 webjar，那么您的前端也可以是。我倾向于将 Angular 应用程序打包为 jar 文件并将其视为依赖项。

前端应用程序

从 Maven 驱动 npm + 创建 Jar 文件

<project>

    <groupId>com.examplegroupId>
    <artifactId>myapp-ui</artifactId>
    <packaging>jar</packaging>

    <build>
        <plugins>
           <!-- run the frontend (npm / bower stack) and update dependencies -->
            <plugin>
                <groupId>com.github.eirslett</groupId>
                <artifactId>frontend-maven-plugin</artifactId>
                <configuration>
                    <installDirectory>target</installDirectory>
                </configuration>
                <executions>
                    <execution>
                        <id>install node and npm</id>
                        <goals>
                            <goal>install-node-and-npm</goal>
                        </goals>
                        <phase>generate-resources</phase>
                        <configuration>
                            <nodeVersion>v8.9.1</nodeVersion>
                            <npmVersion>5.5.1</npmVersion>
                        </configuration>
                    </execution>
                    <execution>
                        <id>npm install</id>
                        <goals>
                            <goal>npm</goal>
                        </goals>
                        <phase>generate-resources</phase>
                        <configuration>
                            <arguments>install</arguments>
                        </configuration>
                    </execution>
                    <execution>
                        <id>npm build</id>
                        <goals>
                            <goal>npm</goal>
                        </goals>
                        <phase>generate-resources</phase>
                        <configuration>
                            <arguments>run build</arguments>
                        </configuration>
                    </execution>
                </executions>
            </plugin>

            <!-- copy everything as a webjar -->
            <plugin>
                <artifactId>maven-resources-plugin</artifactId>
                <executions>
                    <execution>
                        <id>copy-resources</id>
                        <phase>process-resources</phase>
                        <goals>
                            <goal>copy-resources</goal>
                        </goals>
                        <configuration>
                            <outputDirectory>${basedir}/target/classes/META-INF/resources</outputDirectory>
                            <resources>
                                <resource>
                                    <directory>dist/</directory>
                                </resource>
                            </resources>
                        </configuration>
                    </execution>
                </executions>
            </plugin>
        </plugins>
    </build>
</project>

后端应用

直接使用依赖

<dependencies>
    <dependency>
        <groupId>com.example<groupId>
        <artifactId>myapp-ui</artifactId>
    </dependency>
</dependencies>

通知

我在 webjar 中看到的一些问题和观察结果:

• 我发现了一些与 webjar 和 web 字体有关的问题(从 jar 文件内部提供字体时，浏览器不会加载字体)
• 有多种方法可以使用 npm 工具构建 webjar，而且我见过的所有包都需要并在底层使用 java。我还没有看到任何原生 JS 解决方案
• Webjar 本身不会影响应用程序的性能，但是从 Servlet 容器提供静态内容的性能始终明显低于从 nginx 提供静态内容的性能(就可能的吞吐量而言)