如何将带有 angular 2 前端（angular-cli build）的 spring-boot webapp 部署到 Tomcat？

Posted 2023-02-27

【中文标题】如何将带有 angular 2 前端（angular-cli build）的 spring-boot webapp 部署到 Tomcat？

【英文标题】：How can I deploy a spring-boot webapp with angular 2 frontend (angular-cli build) to Tomcat?

【发布时间】：2017-10-22 06:45:53

【问题描述】：

我有一个 spring-boot web 应用程序，我使用 angular-cli 构建我的前端。我已将 angular-cli.json 中的 Angular 构建的输出目录设置为 resources/static，并且我已在 package.json 中配置了构建脚本，如下所示：

"scripts" : "build": "ng build --base-href /mywebapp", ...

在 spring-boot 配置的 application.properties 中，我将 server.contextPath 设置为“mywebapp”。

但如果我构建 Angular 应用程序，资源/静态中创建的 index.html 的包含 js 文件不包含服务器上下文路径“mywebapp”：

<script type="text/javascript" src="inline.bundle.js"></script>
<script type="text/javascript" src="polyfills.bundle.js"></script>

但我应该是这样的：

<script type="text/javascript" src="/mywebapp/inline.bundle.js"></script>
<script type="text/javascript" src="/mywebapp/polyfills.bundle.js"></script>

因此，如果我将 spring-boot 应用程序部署到 tomcat，则构建的 index.html 已加载，但它找不到导入的 js 文件，并尝试加载 http://localhost:8080/ 而不是 http://localhost:8080/mywebapp/ 下的文件。

如果我不想在根目录下部署带有 angular-frontend 的 spring-boot 应用程序，如何将它部署到 tomcat 服务器？

【问题讨论】：

很有趣，因为你在问怎么做，你实际上展示了怎么做，我找不到。您真正的问题是“如何将 Angular 和 Spring 部署到某个路径？”。

【参考方案1】：

请查看我对使用“--deploy-url”参数的回答。 https://***.com/a/43741602/5633515

在你的情况下，使用--deploy-url="/mywebapp/"

【讨论】：

谢谢它对我有用。现在我可以在 url localhost:8080/mywebapp 下访问我的 Angular 前端。但还有一个问题。如果我想让浏览器刷新一个有角度的路由器链接 URL（即localhost:8080/mywebapp/feature1），它就不再起作用了。角度应用程序正确导航到localhost:8080/mywebapp/feature1，但只有刷新此 URL 不再起作用。角根 URL 的刷新工作 (localhost:8080/mywebapp)

这在我看来像是一个代码问题，与加载的角度无关。您是否在刷新该功能 url 时看到正确的 angular 脚本标签？您是否看到控制台错误？

我在这里找到了解决方案：***.com/questions/44132284/…

【参考方案2】：

我也有同样的问题，首先我创建了一个 pom.xml 文件，然后我使用插件将我的包转换为 war 文件。

<plugins>

  <!-- ############################## -->
  <!-- npm scripts                    -->
  <!-- ############################## -->

  <plugin>
    <groupId>org.codehaus.mojo</groupId>
    <artifactId>exec-maven-plugin</artifactId>
    <executions>
      <execution>
        <id>exec-project-dependencies-install</id>
        <phase>generate-sources</phase>
        <configuration>
          <executable>npm</executable>
          <arguments>
            <argument>install</argument>
          </arguments>
        </configuration>
        <goals>
          <goal>exec</goal>
        </goals>
      </execution>

      <!-- run `ng build -prod -aot` -->
      <!-- * clean dist/ before generating distribution files -->
      <execution>
        <id>exec-compile</id>
        <phase>generate-sources</phase>
        <configuration>
          <executable>npm</executable>
          <arguments>
            <argument>run</argument>
            <argument>ci</argument>
          </arguments>
        </configuration>
        <goals>
          <goal>exec</goal>
        </goals>
      </execution>
    </executions>
  </plugin>

  <!-- generate zip -->
  <plugin>
    <groupId>org.apache.maven.plugins</groupId>
    <artifactId>maven-assembly-plugin</artifactId>
    <version>2.3</version>
    <configuration>
      <descriptors>
        <descriptor>src/assembly/static.xml</descriptor>
      </descriptors>
    </configuration>
    <executions>
      <execution>
        <id>make-assembly</id>
        <phase>package</phase>
        <goals>
          <goal>single</goal>
        </goals>
      </execution>
    </executions>
  </plugin>
   <!--generate zip -->
  <plugin>
    <groupId>org.apache.maven.plugins</groupId>
    <artifactId>maven-assembly-plugin</artifactId>
    <version>2.3</version>
    <configuration>
      <descriptors>
        <descriptor>src/assembly/static.xml</descriptor>
      </descriptors>
    </configuration>
    <executions>
      <execution>
        <id>make-assembly</id>
        <phase>package</phase>
        <goals>
          <goal>single</goal>
        </goals>
      </execution>
    </executions>
  </plugin>

在部署时，我发现了一些问题和很好的讲座。

理论 - https://kosbr.github.io/2016/10/09/angular-build.html

问题 - https://github.com/angular/angular-cli/issues/4517 - https://github.com/angular/angular-cli/pull/4090

希望对您有所帮助。