如何将 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 文档的静态内容部分，您可以找到

默认情况下，Spring Boot 提供来自类路径或 ServletContext 根目录中名为 /static（或 /public 或 /resources 或 /META-INF/resources）的目录中的静态内容

/META-INF/resources是“标准”方式（虽然不是最直观的），它直接来自 Java Servlet 规范 3.0（来自 JavaEE 版本 6）

Web 应用程序作为目录的结构化层次结构存在。 此层次结构的根用作作为应用程序一部分的文件的文档根。 例如，对于在 Web 容器中具有上下文路径/catalog的 Web 应用程序，位于 Web 应用程序层次结构基础的index.html文件或位于WEB-INF/lib内的 JAR 文件中，其中包括META-INF/resources下的index.html META-INF/resources目录可用于满足来自/catalog/index.html.的请求/catalog/index.html.

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

将 Angular 应用程序视为依赖项

引用的 JavaEE 规范也是webjar 所使用的。 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>

通知

我在 webjars 中看到的一些问题和观察结果：

• 我已经看到 webjars 和 web 字体的一些问题（当从 jar 文件内部提供时，浏览器没有加载字体）
• 有一些方法可以使用 npm 工具和我见过的所有包构建 webjars 无论如何都需要并在下面使用 java。 我还没有看到任何原生 JS 解决方案
• Webjars 本身不会影响应用程序的性能，但是从 Servlet 容器提供静态内容的性能（关于可能的吞吐量）总是比从 nginx 提供的性能低得多

Answer 2

我遵循了本教程，它与 Jakub 在他的回答中提到的有些相似。 我通常运行 mvn spring-boot:run 命令来一次性启动它。 设置项目的关键在 pom.xml 中。 确保您告诉构建将 Angular dist/ 文件复制到正确的位置。 在这种情况下，它需要将编译后的 JS 从 Angular 的 dist/ 文件夹复制到 server/target/classes/resources 以便它可以托管静态内容。

整个构建（mvn clean install）可能需要很长时间。 所以在开发过程中，我只需转到 src/main/web 目录并从那里运行 ng-serve，这样我就可以快速看到我的 UI 变化。

希望这可以帮助。

Answer 3

后端服务器使用 Spring Boot 和 Spring Web MVC 作为 REST 控制器，使用 Spring Data JPA 与 MySQL 数据库交互。 前端由 Angular 11、HTTP 客户端和路由器组成。

– Spring Boot 使用 Spring Web MVC 导出 REST API，并使用 Spring Data JPA 与 MySQL 数据库交互。

– Angular 客户端使用公理发送 HTTP 请求并检索 HTTP 响应，显示有关组件的数据。 我们还使用 Angular Router 导航到页面。

使用 Spring Boot 应用程序设置 Angular 11 的步骤。

1. 创建 Angular 11 应用程序以成功运行和构建。

2. 根据 QA、PROD、LOCAL 等环境创建构建。

3. 从区。 文件夹通过node-js收集编译文件。

4. Angular 使用打字稿在节点服务器上运行。 一旦你编译代码并在 dist 中构建 angular 项目。 文件夹，您将获得 .js 文件。 java脚本文件。

5. 我们可以将您作为 dist 文件夹中的 js 文件运行任何 UI 应用程序。

6. 创建 Spring boot 应用程序并编写 REST api 并成功编译和构建。

7. 在资源文件夹中创建静态文件夹。

8. 将静态文件夹路径放在 application.properties 中，例如 classpath:"resource/static/"。

9. 将所有已编译的 js 文件从 dist 文件夹放入静态文件夹。

10. 在 spring boot 项目中创建 webConfig.java 文件到 index.html 的路由 URL。

11. 创建构建和编译成功的spring boot项目。

12. 如果您运行该项目，您将从 Spring Boot 项目中获得 UI。

13. 从 Spring Boot 项目创建 jar。

14. 在 Azure 上部署并成功运行项目。

谢谢你可以访问我的博客了解详情。

https://draft.blogger.com/blog/post/edit/preview/8320325077779788397/7601438449518293236