如何创建角度项目的war文件？

Posted 2023-02-27

【中文标题】如何创建角度项目的war文件？

【英文标题】：How to create war file of angular project?

【发布时间】：2021-01-12 09:41:41

【问题描述】：

我正在做一个项目，我使用 angular 作为前端，spring boot 作为后端。我想在 Sentora 控制面板上部署我的项目。它只需要在服务器上部署战争文件。我创建了spring项目的war文件，但我不知道如何创建angular项目的war文件。我使用了 Angular 的 vs 代码。我试图找到在互联网上为 Angular 创建战争文件的方法，但没有找到任何解决方案。我是否需要在 Eclipse 中导入 Angular 项目？请有人告诉我创建角度项目战争文件的分步解决方案。

更新：部署 wabit.war 文件时出错

我部署了简单的 spring boot 项目 demo-0.0.1-SNAPSHOT 并且它启动了。

wabit.war 文件已部署，但未启动。它给出了错误

FAIL - 无法启动上下文路径 [/wabit] 处的应用程序

为什么会这样？

【参考方案1】：

另一种解决方案不是为您的 Angular 项目创建一个 war 文件，而是将其嵌入到 Spring Boot War 中。

这样做

只需通过ng build 命令创建您的角度dist。 复制该文件夹中所有内容的内容。 转到您的 Spring Boot 项目并将它们粘贴到资源中的静态包中 目录。路径应该是src/main/resources/static 创建并部署 Spring Boot War 文件，您的 Angular 也将运行。

这就是你的spring boot目录应该是什么样子

【讨论】：

@bunT 你能详细告诉我你做了哪些步骤吗......还告诉我你的 dist 文件夹中的内容你能把截图粘贴到你的问题中吗？

我关注了这个答案.. ***.com/a/54629606/10109195

@bunT 我已经更新了答案，看看你是不是这样

你的步骤也写了，但你没有提到上面链接中提到的构建的 pom.xml。

我在这里列出我的假设并让我知道它们是否正确，您有一个已经有一个 pom 的 spring boot 项目，并且您创建了一个处于可部署状态的 war 文件。现在您还需要在服务器上运行 angular，但服务器只接受 war 文件。我的建议是，在创建 war 文件之前，将 angular dist 文件夹的内容复制到您的 spring boot 资源/静态文件夹中，如上图所示。一旦复制，现在创建您的战争文件并将其部署在服务器上。您现在也可以访问角度了

【参考方案2】：

您可以使用 maven 来执行此操作。 只需在您的项目中添加一个 pom.xml 并包含以下信息。

使用此配置，您必须在名为 dist 的文件目录中构建您的 Angular 应用程序。

<project xmlns="http://maven.apache.org/POM/4.0.0"
                       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
                       xsi:schemaLocation="http://maven.apache.org/POM/4.0.0
                          http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <!-- The Basics -->
    <groupId>your.group</groupId>
    <artifactId>projectName</artifactId>
    <version>1.0.0</version>
    <packaging>war</packaging>
    <!-- Build Settings -->
    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-war-plugin</artifactId>
                <version>3.3.1</version>
                <configuration>
                    <webResources>
                        <resource>
                            <!-- this is relative to the pom.xml directory -->
                            <directory>dist</directory>
                        </resource>
                    </webResources>
                </configuration>
            </plugin>
        </plugins>
    </build>
</project>

创建此文件后，您必须使用以下命令

mvn clean install

文件将在target/目录中创建

您可以在apache maven official documentation 中找到有关 maven-war-plugins 的更多信息

【讨论】：

我应该在 Eclipse 中导入 Angular 项目还是可以在 vs 代码中进行 mvn clean install？

你需要安装 maven。但不，你不需要使用 eclipse 只需使用mvn clean install。在包含 pom.xml 的目录中

在将angular项目导入eclipse后，我将项目转换为maven项目，然后我添加了你提到的pom.xml并创建了web.xml文件。之后我做了maven安装并在目标中创建了war文件文件夹。

如果war文件在Sentora主机面板上成功运行，我会通知您。

我浏览了这个bezkoder.com/integrate-angular-spring-boot/#comment-4982，这个应用程序对我来说在同一个端口上运行。但之后我创建了该项目的war文件并尝试在tomcat上运行但它不起作用。你知道如何运行这个应用程序吗？