在一个 jar 中使用 Spring boot 2.x 构建 angular 11答案

【问题标题】：Build angular 11 with Spring boot 2.x in one single jar在一个 jar 中使用 Spring boot 2.x 构建 angular 11
【发布时间】：2021-07-18 14:52:42
【问题描述】：

我在使用 Springboot jar 构建 angular 11 时遇到问题。如果我分别运行应用程序（8080 上的后端和 4200 上的 ui）它们工作得很好，它们之间的连接和调用都正常且稳定。

我正在尝试做的实际上是整合它。我看过很多例子，但我不知道我在哪里做错了什么。

这是项目结构图：

这里是 maven 插件，它们正在安装并将 ui 构建内容复制到 jar 中。

   <plugin>
        <groupId>com.github.eirslett</groupId>
        <artifactId>frontend-maven-plugin</artifactId>
        <version>${frontend-maven-plugin.version}</version>
        <configuration>
            <nodeVersion>${node.version}</nodeVersion>
            <workingDirectory>${frontendSrcDir}</workingDirectory>
            <installDirectory>${project.build.directory}</installDirectory>
            <environmentVariables>
                <CI>true</CI>
            </environmentVariables>
            <!--suppress UnresolvedMavenProperty -->
            <skip>${skip.ui}</skip>
        </configuration>
        <executions>
            <execution>
                <id>install-frontend-tools</id>
                <goals>
                    <goal>install-node-and-npm</goal>
                </goals>
                <configuration>
                    <nodeVersion>v14.16.0</nodeVersion>
                    <npmVersion>6.14.13</npmVersion>
                </configuration>
            </execution>
            <execution>
                <id>npm-install</id>
                <goals>
                    <goal>npm</goal>
                </goals>
                <configuration>
                    <arguments>install</arguments>
                </configuration>
            </execution>
            <execution>
                <id>build-frontend</id>
                <goals>
                    <goal>npm</goal>
                </goals>
                <phase>prepare-package</phase>
                <configuration>
                    <arguments>run build --prod</arguments>
                </configuration>
            </execution>
        </executions>
    </plugin>
    <plugin>
        <groupId>org.apache.maven.plugins</groupId>
        <artifactId>maven-resources-plugin</artifactId>
        <executions>
            <execution>
                <id>angular-build</id>
                <goals>
                    <goal>copy-resources</goal>
                </goals>
                <phase>validate</phase>
                <configuration>
                    <outputDirectory>${project.build.outputDirectory}/static</outputDirectory>
                    <resources>
                        <resource>
                            <directory>${frontendSrcDir}/dist/ui</directory>
                        </resource>
                    </resources>
                </configuration>
            </execution>
        </executions>
    </plugin>

在 jar 中，构建文件被复制到 jar/BOOT-INF/classes/static 下。这是图片

我错过了什么？

【问题讨论】：

标签： java angular spring-boot jar frontend-maven-plugin

【解决方案1】：

如果您在“资源”中有一个名为“static”或“public”的文件夹，Spring boot 会自动提供静态内容。因此，将所有从 Angular 编译的文件放在资源下一个名为“静态”的文件夹中。

这样做会使弹簧靴有角度:)

【讨论】：

【解决方案2】：

在@Aborgh 的回答中，

因此，将所有从 angular 编译的文件放在资源下一个名为“静态”的文件夹中。

这是正确的，我只是添加更多。具体来说，当您运行npm build等构建命令时，它会在dist文件夹中生成静态文件，例如xxx.html、xxx.js、xxx.css。

所以你想复制dist下的所有文件并将它们粘贴到你的Springboot项目中，将它们直接放入resources/static文件夹中。

与您的问题无关，但我建议您将静态文件放在与 Springboot 后端应用程序分开的地方。尝试使用 Nginx 等反向代理，以便将 https://example.com/api/xxx 等请求解析到 Springboot 后端应用程序，并将 https://example.com/foo/xxx 等所有其他请求解析到前端 Angular 视图。

【讨论】：