部署Spring Boot Angular App（Maven和Tomcat）的4种方法

在上一篇有关Spring Boot angular 5的文章中 ，我们使用Spring Boot angular 5实现了一个完整的堆栈端到端Web应用程序。在本文中，我们将讨论在tomcat上部署Spring Boot和Angle App的不同方法。 我们将创建一个具有后端（服务器）和前端（客户端）的多模块maven项目，并探讨4种方法，以使用maven-war-plugin，maven-resources-plugin，jar包装等方式进行部署。

Spring Boot Angular 5项目

首先，让我简要介绍一下我们在上一个示例中构建的内容。 我们使用angular CLI生成了angular 5项目，并将其修改为具有列表用户和添加用户等功能。 我们使用Spring Boot公开了REST API以进行Crud操作，并使用集成的spring数据与MySql数据库进行通信。 我们利用ng serv服务localhost：4200上的angular项目，它消耗了localhost：8080上公开的API。 以下是最终的项目结构。

部署Spring Boot Angular应用程序的不同方法

部署spring boot和angular应用程序的最佳实践是将用户界面代码与业务逻辑分开，这使客户端代码与服务器代码脱钩，因此应用程序变得高度可伸缩且易于管理。 前端开发人员可以与前端开发人员并行进行前端开发。 后端代码可以免费使用和集成不同的技术堆栈，并且可以供多个客户端使用，例如可以将相同的API重新用于构建android应用程序，也可以将其与第三方客户端集成在一起，这也减少了停机时间你的申请。 每当您的API不可用或关闭时，您的客户端应用程序仍会打开。

但是有时候，为一个小型团队和一个小型应用程序管理两台服务器将成为一项开销。 如果单个全栈开发人员正在处理所有与UI和服务器相关的配置，则将前端和后端应用程序打包到单个Web应用程序中有时会更有帮助。 尽管如此，您仍可以公开REST API，并在同一个应用程序中集成有角度的代码，然后部署到tomcat，其他移动客户端可以重用相同的API。

现在，当要部署Java Web应用程序时，我们有两种不同的方法可以做到这一点。 在引入Spring Boot之后，您可以将应用程序打包为带有嵌入式tomcat和数据库的FAT jar文件，并作为可执行文件运行。 另外，您可以使用多个maven插件来创建.war文件并将其部署到独立的tomcat。

在本文中，我们将主要研究4种部署spring boot angular应用程序的方法，它们是-使用节点服务器和tomcat，使用maven war插件，使用maven资源插件和spring boot jar打包。

Spring Boot Angular多模块项目

我们已经有两个现有项目– userPortal（服务器）和portalApp（客户端），现在我们将其转换为多模块项目。 为此，创建一个新文件夹– portal-parent，将现有项目都移动到该文件夹​​中，并在portal-parent目录中创建pom.xml文件。 此pom.xml将模块定义为两个现有子项目– userPortal和portalApp，打包类型将为pom。 因此，无论何时构建此父级，都会首先构建子模块。

<modelVersion>4.0.0</modelVersion>
 
    <groupId>com.devglan</groupId>
    <artifactId>portal-parent</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <packaging>pom</packaging>
 
    <name>portal parent</name>
    <description>portal parnt</description>
 
    <modules>
        <module>user-portal</module>
        <module>portal-app</module>
    </modules>

使用Maven War插件进行部署

Maven War插件通过收集Web应用程序的所有工件依赖项，类和资源来创建.war文件。 因此，在此配置中，我们将配置客户端项目以将所有静态资源推送到目标/客户端，稍后在创建war文件时，我们将使用maven war插件将其包含在.war生成中并将其放置在/ static文件夹中。 当然，Spring Boot具有一项功能，可以在静态文件夹中查找静态资源，并且可以使用我们的静态静态资源。

因此，现在我们将如何获得静态资源的最终构建。 好吧，这将由angular本身完成。如果您查看angular-cli.json，您将发现一个JSOn属性为–“ outDir”：“ dist” ，。 这意味着如果我们构建角度项目，最终输出将被推送到dist文件夹。 现在，我们将在客户端pom.xml文件中进行配置，以使用npm构建角度项目。 为此，我们必须在客户端pom.xml中进行如下更改：

此配置将按照pom文件中的配置下载并安装节点和npm，npm install将安装package.json中列为依赖项的所有模块，并且在执行阶段，根据软件包中的配置，最终源将被推送到dist文件夹中.json。

另外，我们将在服务器的pom文件中进行配置，在配置war文件时，我们将配置maven war插件以包含../client/target的资源，并且将角度客户端作为jar依赖项。 这样，将产生最终的战争，现在您可以将其部署到任何独立的tomcat。

客户端pom.xml

<build>
    <finalName>client</finalName>
    <plugins>
      <plugin>
        <groupId>com.github.eirslett</groupId>
        <artifactId>frontend-maven-plugin</artifactId>
        <version>1.6</version>
 
        <configuration>
          nodeVersion>v8.9.0</nodeVersion>
          <npmVersion>5.5.1</npmVersion>
 
        </configuration>
 
        <executions>
          <execution>
            <id>install node and npm</id>
            <goals>
              <goal>install-node-and-npm</goal>
            </goals>
          </execution>
 
          <execution>
            <id>npm install</id>
            <goals>
              <goal>npm</goal>
            </goals>
          </execution>
 
          <execution>
            <id>npm run build</id>
            <goals>
              <goal>npm</goal>
            </goals>
 
            <configuration>
              <arguments>run build</arguments>
            </configuration>
          </execution>
        </executions>
      </plugin>
    </plugins>
    <resources>
      <resource>
        <directory>target/client</directory>
        <targetPath>static</targetPath>
      </resource>
    </resources>
  </build>

服务器pom.xml

<build>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
			</plugin>
			<plugin>
				<artifactId>maven-war-plugin</artifactId>
				<version>3.2.0</version>
				<configuration>
					<webResources>
						<resource>
							<directory>../user-portal/target</directory>
						</resource>
					</webResources>
				</configuration>
			</plugin>
		</plugins>
	</build>

完成这些更改后，请运行mvn clean install并生成您的战争。

使用Maven资源插件进行部署

我们已经配置了客户端，以在上述配置中将所有静态源推送到dist文件夹。 现在，我们将使用maven资源插件将dist文件夹中的所有文件复制到服务器项目的/ src / main / resources / static文件夹中，并且spring boot将从/ static文件夹中存储这些资源。 以下是pom配置。

<plugin>
	<artifactId>maven-resources-plugin</artifactId>
	<executions>
		<execution>
			<id>copy-resources</id>
			<phase>validate</phase>
			<goals><goal>copy-resources</goal></goals>
			<configuration>
				<outputDirectory>${build.directory}/classes/static/</outputDirectory >
				<resources>
					<resource>
						<directory>../portal-app/dist</directory>
					</resource>
				</resources>
			</configuration>
		</execution>
	</executions>
</plugin>

使用Spring Boot Jar包装进行部署

在这种情况下，我们会将有角项目包装为罐子。 因此，客户端pom文件中不需要进行任何更改。此外，我们不需要在服务器pom文件中配置任何maven插件。 删除除了spring-boot-maven-plugin之外的所有构建配置。 不要忘记在服务器pm文件中添加客户端项目jar依赖项。 因此，现在，当我们构建项目时，jar将包含在META-INF / resources目录中，并且Spring Boot已预先配置为从该资源文件夹中提供静态内容。 您需要更改的一件事是package.json的build参数。

"build": "ng build -prod –output-path dist/META-INF/resources"

节点和Tomcat服务器部署

在这种情况下，角度项目可以托管在节点服务器上，而Spring Boot应用程序可以托管在任何其他应用程序服务器上。 为此，请运行ng build命令生成dist文件夹，然后将此文件夹复制到后端节点服务器。 这样做可以帮助分别平衡两个服务器的负载。

翻译自: https://www.javacodegeeks.com/2018/03/4-ways-to-deploy-spring-boot-angular-app-maven-tomcat.html