在一个 jar 中使用 Spring boot 2.x 构建 angular 11 [英] Build angular 11 with Spring boot 2.x in one single jar

问题描述

我在用 Springboot jar 构建 angular 11 时遇到了问题.如果我单独运行这些应用程序(8080 上的后端和 4200 上的 ui)，它们就可以正常工作，两者之间的连接和调用都正常且稳定.

I am facing an issue bulding an angular 11 with Springboot jar. If I runn separatelly the apps (the backend on 8080 and the ui on 4200) they work just fine, the connection and calls in between are ok and stable.

我真正想做的是整合这个.我看过很多例子，但我不知道我哪里做错了.

What I am trying to do is actually integrate this. I've seen plenty of examples but I don't know where and what Am I doing wrong.

这是项目结构的图片:

这里是 Maven 插件，它们正在安装和复制 ui 构建的东西到 jar 中.

Here are the maven plugins which are installing and copying the ui build stuff into the 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 下.这是图像

In the jar the build files are copied under jar/BOOT-INF/classes/static. Here is the image

我错过了什么?

推荐答案

在@Aborgh 的回答中，

In @Aborgh answer,

因此，将来自 angular 的所有编译文件放在名为static"的文件夹中；在资源下.

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

这是正确的，我只是添加了一些.具体来说，当你运行npm build等构建命令时，会在dist中生成xxx.html、xxx.js、xxx.css等静态文件 文件夹.

That is correct, and I am just adding some more. Specifically, when you run the build command such as npm build, it generates static files such as xxx.html, xxx.js, xxx.css in the dist folder.

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

So you want to copy all the files under dist and paste them into your Springboot project, place them right into the resources/static folder.

与您的问题无关，但我建议您将静态文件与 Springboot 后端应用程序分开放置.尝试使用 Nginx 等反向代理，这样您就可以解析诸如 https://example.com/api/xxx 到您的 Springboot 后端应用程序和所有其他请求，例如 https://example.com/foo/xxx 到您的前端 Angular 视图.

Not relevant to your question, but I would recommend you put the static files somewhere separated from your Springboot backend application. Try reverse proxies such as Nginx so you can resolve requests such as https://example.com/api/xxx to your Springboot backend application and all other requests such as https://example.com/foo/xxx to your frontend Angular views.

这篇关于在一个 jar 中使用 Spring boot 2.x 构建 angular 11的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！