我有一个应用程序,REST作为Spring Boot应用程序,客户端作为Angular2 .
早些时候,我分别启动了应用程序 - Spring Boot通过启动SpringBootApplication主方法(它开始侦听端口8080),Angular2 - 从命令行运行 npm start
(它通常在3000端口上启动) .
现在我希望Maven用一个命令运行这两个应用程序 .
-
Angular 4.0.0
-
Spring Boot 1.5.4.RELEASE
我一直试图申请answer和this tutorial . 但在第一种情况下,只启动Angular应用程序,仅次于REST .
我的package.json:
"scripts": {
"build": "tsc -p src/",
"build:watch": "tsc -p src/ -w",
"serve": "lite-server -c=bs-config.json",
"prestart": "npm run build",
"start": "concurrently \"npm run build:watch\" \"npm run serve --proxy-config proxy-config.json\" ",
"lint": "tslint ./src/**/*.ts -t verbose"
},
"license": "ISC",
"dependencies": {
"@angular/animations": "^4.2.4",
"@angular/common": "~4.0.0",
"@angular/compiler": "~4.0.0",
"@angular/core": "~4.0.0",
"@angular/forms": "~4.0.0",
"@angular/http": "~4.0.0",
"@angular/material": "^2.0.0-beta.7",
"@angular/platform-browser": "~4.0.0",
"@angular/platform-browser-dynamic": "~4.0.0",
"@angular/router": "~4.0.0",
"@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.26",
"angular-in-memory-web-api": "~0.3.0",
"angular2-modal": "^3.0.1",
"bootstrap": "^3.3.6",
"core-js": "^2.4.1",
"hammerjs": "^2.0.8",
"jsplumb": "^2.4.3",
"ng2-bs3-modal": "^0.10.4",
"ng2-popup": "^0.4.0",
"rxjs": "5.0.1",
"systemjs": "0.19.40",
"zone.js": "^0.8.4"
},
"devDependencies": {
"concurrently": "^3.2.0",
"lite-server": "^2.2.2",
"typescript": "~2.1.0",
"canonical-path": "0.0.2",
"tslint": "^3.15.1",
"rimraf": "^2.5.4",
"@types/node": "^6.0.46"
},
"repository": {}
3 回答
我同意sinedsem,对于dev我会将这两个应用分开 . 至于管理 生产环境 构建,我会做的事情略有不同 . 我不喜欢在构建中涉及任何手动步骤的想法,例如将构建文件从angular复制到spring boot app的源代码 .
相反,我会在maven下管理整个构建,并将角度ui和spring boot应用程序构建为单独的模块 . 构建将完全由maven管理,使用frontend-maven-plugin将角度ui构建委派给npm / gulp等 . 这可以作为依赖关系添加到构建输出的spring boot app可以复制到spring boot模块的目标目录 .
父POM
创建一个新的父POM
Angular UI模块
使用frontend-maven-plugin构建Angular UI模块以执行任何npm / bower / gulp等构建步骤 . 将构建的输出设置为
target/classes/static
或将构建的角度资源复制到target/classes/static
例如下面的插件安装node / npm并运行所需的npm bower和gulp步骤来构建角度应用程序 .
Spring Boop App模块
这应该与当前的spring boot模块相同,添加了新的parent和angular-ui模块的依赖项 .
由于角度UI的构建版本打包在target / classes / static下,而angular-ui jar位于spring boot的类路径中,因此角度ui被打包到spring引导应用程序中 .
或者,您可以运行copy resources maven插件将资源从angular-ui模块的build目录复制到spring-boot模块的build目录 . 虽然我不喜欢将资源文件从一个模块复制到另一个模块,例如
你的package.json是由npm使用的,这不是这里必不可少的工具 .
我推荐你:
对于开发,请分别运行两个应用程序 .
用于 生产环境 :
将您的角度应用程序打包 . 例如,使用webpack .
将您的软件包放到/ src / main / resources / static下的spring boot项目中 .
运行Spring Boot应用程序,它将从静态资源为您的Angular应用程序提供服务 .
tprebs提出的解决方案是有意义的,但两个maven模块是强耦合的(因为角度模块将文件存放在spring-boot模块中,这不是一个好习惯) .
保持简单的愚蠢,如果它是一个开发前端和后端的团队,单个maven模块就足够了 . 例如 :
单一模块模块方法(KISS)
假设spring引导源代码位于
src/main/java
文件夹中,而角度代码位于src/main/js
文件夹中 .src/main/js/angular-cli.json file :
将Angular应用程序作为spring boot静态资源提供服务 .
pom.xml :
使用npm从maven构建Angular部分
另一方面,如果团队不同,我确实会选择两个独立的maven模块,但为了限制两个模块之间的耦合,我将角度部分发布为webjar(参见https://spring.io/guides/gs/spring-boot-cli-and-js) .