在一个 jar 中使用 Spring 引导 2.x 构建 angular 11

Question

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

我想做的是整合这个。我看过很多例子，但我不知道我在哪里做错了什么。

这是项目结构的图片：

这是安装 ui build 内容并将其复制到 jar 中的 maven 插件。

   <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 中，build 文件被复制到 jar/BOOT-INF/classes/static 下。这是图片

我错过了什么？

Answer 1

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

这样做将使 spring 启动服务 angular :)

Answer 2

在@Aborgh 的回答中，

So put all of the compiled files from angular in a folder called "static" under resources.

没错，我只是补充一些。具体来说，当你运行构建命令如npm build时，它会生成静态文件如xxx.html、xxx.js、xxx.css 在 dist 文件夹中。

所以你要复制dist下的所有文件，然后粘贴到你的Springboot项目中，直接放到resources/static文件夹下。

与您的问题无关，但我建议您将静态文件放在与 Springboot 后端应用程序分开的地方。尝试使用 Nginx 等反向代理，这样您就可以将 https://example.com/api/xxx to your Springboot backend application and all other requests such as https://example.com/foo/xxx 等请求解析到您的前端 Angular 视图。

在一个 jar 中使用 Spring 引导 2.x 构建 angular 11

Build angular 11 with Spring boot 2.x in one single jar

java

jar

spring-boot

angular

frontend-maven-plugin