在上一篇有關(guān)Spring Boot angular 5的文章中 ，我們使用Spring Boot angular 5實(shí)現(xiàn)了一個(gè)完整的堆棧端到端Web應(yīng)用程序。在本文中，我們將討論在tomcat上部署Spring Boot和Angle App的不同方法。 我們將創(chuàng)建一個(gè)具有后端（服務(wù)器）和前端（客戶端）的多模塊maven項(xiàng)目，并探討4種方法，以使用maven-war-plugin，maven-resources-plugin，jar包裝等方式進(jìn)行部署。

Spring Boot Angular 5項(xiàng)目

首先，讓我簡要介紹一下我們在上一個(gè)示例中構(gòu)建的內(nèi)容。 我們使用angular CLI生成了angular 5項(xiàng)目，并將其修改為具有列表用戶和添加用戶等功能。 我們使用Spring Boot公開了REST API以進(jìn)行Crud操作，并使用集成的spring數(shù)據(jù)與MySql數(shù)據(jù)庫進(jìn)行通信。 我們利用ng serv服務(wù)localhost：4200上的angular項(xiàng)目，它消耗了localhost：8080上公開的API。 以下是最終的項(xiàng)目結(jié)構(gòu)。

部署Spring Boot Angular應(yīng)用程序的不同方法

部署spring boot和angular應(yīng)用程序的最佳實(shí)踐是將用戶界面代碼與業(yè)務(wù)邏輯分開，這使客戶端代碼與服務(wù)器代碼脫鉤，因此應(yīng)用程序變得高度可伸縮且易于管理。 前端開發(fā)人員可以與前端開發(fā)人員并行進(jìn)行前端開發(fā)。 后端代碼可以免費(fèi)使用和集成不同的技術(shù)堆棧，并且可以供多個(gè)客戶端使用，例如可以將相同的API重新用于構(gòu)建android應(yīng)用程序，也可以將其與第三方客戶端集成在一起，這也減少了停機(jī)時(shí)間你的申請。 每當(dāng)您的API不可用或關(guān)閉時(shí)，您的客戶端應(yīng)用程序仍會打開。

但是有時(shí)候，為一個(gè)小型團(tuán)隊(duì)和一個(gè)小型應(yīng)用程序管理兩臺服務(wù)器將成為一項(xiàng)開銷。 如果單個(gè)全棧開發(fā)人員正在處理所有與UI和服務(wù)器相關(guān)的配置，則將前端和后端應(yīng)用程序打包到單個(gè)Web應(yīng)用程序中有時(shí)會更有幫助。 盡管如此，您仍可以公開REST API，并在同一個(gè)應(yīng)用程序中集成有角度的代碼，然后部署到tomcat，其他移動客戶端可以重用相同的API。

現(xiàn)在，當(dāng)要部署Java Web應(yīng)用程序時(shí)，我們有兩種不同的方法可以做到這一點(diǎn)。 在引入Spring Boot之后，您可以將應(yīng)用程序打包為帶有嵌入式tomcat和數(shù)據(jù)庫的FAT jar文件，并作為可執(zhí)行文件運(yùn)行。 另外，您可以使用多個(gè)maven插件來創(chuàng)建.war文件并將其部署到獨(dú)立的tomcat。

在本文中，我們將主要研究4種部署spring boot angular應(yīng)用程序的方法，它們是-使用節(jié)點(diǎn)服務(wù)器和tomcat，使用maven war插件，使用maven資源插件和spring boot jar打包。

Spring Boot Angular多模塊項(xiàng)目

我們已經(jīng)有兩個(gè)現(xiàn)有項(xiàng)目– userPortal（服務(wù)器）和portalApp（客戶端），現(xiàn)在我們將其轉(zhuǎn)換為多模塊項(xiàng)目。 為此，創(chuàng)建一個(gè)新文件夾– portal-parent，將現(xiàn)有項(xiàng)目都移動到該文件夾??中，并在portal-parent目錄中創(chuàng)建pom.xml文件。 此pom.xml將模塊定義為兩個(gè)現(xiàn)有子項(xiàng)目– userPortal和portalApp，打包類型將為pom。 因此，無論何時(shí)構(gòu)建此父級，都會首先構(gòu)建子模塊。

<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插件進(jìn)行部署

Maven War插件通過收集Web應(yīng)用程序的所有工件依賴項(xiàng)，類和資源來創(chuàng)建.war文件。 因此，在此配置中，我們將配置客戶端項(xiàng)目以將所有靜態(tài)資源推送到目標(biāo)/客戶端，稍后在創(chuàng)建war文件時(shí)，我們將使用maven war插件將其包含在.war生成中并將其放置在/ static文件夾中。 當(dāng)然，Spring Boot具有一項(xiàng)功能，可以在靜態(tài)文件夾中查找靜態(tài)資源，并且可以使用我們的靜態(tài)靜態(tài)資源。

因此，現(xiàn)在我們將如何獲得靜態(tài)資源的最終構(gòu)建。 好吧，這將由angular本身完成。如果您查看angular-cli.json，您將發(fā)現(xiàn)一個(gè)JSOn屬性為–“ outDir”：“ dist” ，。 這意味著如果我們構(gòu)建角度項(xiàng)目，最終輸出將被推送到dist文件夾。 現(xiàn)在，我們將在客戶端pom.xml文件中進(jìn)行配置，以使用npm構(gòu)建角度項(xiàng)目。 為此，我們必須在客戶端pom.xml中進(jìn)行如下更改：

此配置將按照pom文件中的配置下載并安裝節(jié)點(diǎn)和npm，npm install將安裝package.json中列為依賴項(xiàng)的所有模塊，并且在執(zhí)行階段，根據(jù)軟件包中的配置，最終源將被推送到dist文件夾中.json。

另外，我們將在服務(wù)器的pom文件中進(jìn)行配置，在配置war文件時(shí)，我們將配置maven war插件以包含../client/target的資源，并且將角度客戶端作為jar依賴項(xiàng)。 這樣，將產(chǎn)生最終的戰(zhàn)爭，現(xiàn)在您可以將其部署到任何獨(dú)立的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>

服務(wù)器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>

完成這些更改后，請運(yùn)行mvn clean install并生成您的戰(zhàn)爭。

使用Maven資源插件進(jìn)行部署

我們已經(jīng)配置了客戶端，以在上述配置中將所有靜態(tài)源推送到dist文件夾。 現(xiàn)在，我們將使用maven資源插件將dist文件夾中的所有文件復(fù)制到服務(wù)器項(xiàng)目的/ 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包裝進(jìn)行部署

在這種情況下，我們會將有角項(xiàng)目包裝為罐子。 因此，客戶端pom文件中不需要進(jìn)行任何更改。此外，我們不需要在服務(wù)器pom文件中配置任何maven插件。 刪除除了spring-boot-maven-plugin之外的所有構(gòu)建配置。 不要忘記在服務(wù)器pm文件中添加客戶端項(xiàng)目jar依賴項(xiàng)。 因此，現(xiàn)在，當(dāng)我們構(gòu)建項(xiàng)目時(shí)，jar將包含在META-INF / resources目錄中，并且Spring Boot已預(yù)先配置為從該資源文件夾中提供靜態(tài)內(nèi)容。 您需要更改的一件事是package.json的build參數(shù)。

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

節(jié)點(diǎn)和Tomcat服務(wù)器部署

在這種情況下，角度項(xiàng)目可以托管在節(jié)點(diǎn)服務(wù)器上，而Spring Boot應(yīng)用程序可以托管在任何其他應(yīng)用程序服務(wù)器上。 為此，請運(yùn)行ng build命令生成dist文件夾，然后將此文件夾復(fù)制到后端節(jié)點(diǎn)服務(wù)器。 這樣做可以幫助分別平衡兩個(gè)服務(wù)器的負(fù)載。

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

總結(jié)

以上是生活随笔為你收集整理的部署Spring Boot Angular App（Maven和Tomcat）的4种方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。