Есть несколько способов и инструментов для достижения того, чего вы пытаетесь достичь.
Я собираюсь предложить способ сделать это с помощью нескольких инструментов, которые я использовал в аналогичном проекте.Хотя этот ответ может показаться ориентированным на мнение, он может дать вам несколько идей для начала и сделать свой собственный выбор.
Если какой-либо из шагов, описанных ниже, требует более подробной информации, дайте мне знать, и я обновлю их.
Как упаковать его, используя Maven?
Первое, что вам нужно сделать, это разбить ваш проект как минимум на два модуля:
- военный модуль с вашими службами REST
- клиентский модуль со статическими файлами.
Для создания клиентского модуля вы можете использовать Gulp ,Это поможет вам управлять простыми задачами в ваших статических файлах JS / HTML / CSS.Вы можете запускать задачи gulp с помощью frontend-maven-plugin по com.github.eirslett:
<plugin>
<groupId>com.github.eirslett</groupId>
<artifactId>frontend-maven-plugin</artifactId>
<version>1.0</version>
<executions>
<execution>
<id>install node and npm</id>
<goals>
<goal>install-node-and-npm</goal>
</goals>
<configuration>
<nodeVersion>v6.9.1</nodeVersion>
<npmVersion>3.10.9</npmVersion>
</configuration>
</execution>
<execution>
<id>npm install</id>
<goals>
<goal>npm</goal>
</goals>
<configuration>
<arguments>install</arguments>
</configuration>
</execution>
<execution>
<id>npm rebuild node-sass</id>
<goals>
<goal>npm</goal>
</goals>
<configuration>
<arguments>rebuild node-sass</arguments>
</configuration>
</execution>
<execution>
<id>gulp build</id>
<goals>
<goal>gulp</goal>
</goals>
<configuration>
<arguments>build --no-notification</arguments>
</configuration>
</execution>
<execution>
<id>gulp test</id>
<phase>test</phase>
<goals>
<goal>gulp</goal>
</goals>
<configuration>
<arguments>test - - no-notification</arguments>
</configuration>
</execution>
</executions>
</plugin>
В этом примере плагин запускает необходимые шаги:
- npm install -> необходимый дляgulp
- gulp build -> сборка модуля на стороне клиента
- gulp test -> модульные тесты на стороне клиента
Тогда вам понадобится файл gulpfile в корневом каталогевашего модуля.
Наименьшее, что нужно сделать gulp сейчас, - это дать URL-адрес бэкэнда остальных служб вашему приложению.Вы используете angular, поэтому я советую вам использовать gulp-ng-constant для изменения угловых констант на лету на этапе сборки:
const ngConstant = require('gulp-ng-constant');
gulp.task('build', gulp.series('ngconstant:prod', gulp.parallel('other', 'webpack:dist')));
gulp.task('ngconstant:prod', function () {
return ngConstant({
name: 'yourApp',
constants: {
BASE_URL : 'http://www.exemple.com:8080'
},
template: conf.constantTemplate,
stream: true
})
.pipe(rename('app.constants.js'))
.pipe(gulp.dest(conf.app + 'app/'));
});
В приведенном выше gulpfile используется webpack сделать фактическую сборку.
Как развернуть и запустить его с Tomcat?
- localhost: 8080: приложение / для части HTML / JS
- localhost: 8080: приложение / rest / для веб-служб, работающих под SpringBoot.
Я бы не стал так поступать.Кажется сложным, чтобы ваше веб-приложение и клиентское приложение находились в одном корне контекста в Tomcat.
Вместо этого я советую вам развернуть ваши статические файлы в другом корне контекста или на другом Http-сервере, например на HTTP-сервере Apache.Технически, вашему клиентскому приложению не нужен сервер приложений.А развертывание его на обычном, более легком и быстром http-сервере, таком как Apache, позволит ему работать, когда вы перезапускаете сервер Tomcat.
Тогда вы получите:
Теперь ваше клиентское приложение находится на другом хосте, чем веб-приложение вашего сервиса.И это приведет к ошибкам перекрестного происхождения.Таким образом, вам нужно настроить CORS , чтобы ваше клиентское приложение отправляло запросы в ваше веб-приложение служб.
Другим решением может быть установка вашего Apache в качестве прокси для вашего кота.Вы можете использовать определение VirtualHost, которое будет перенаправлять все запросы с порта 8080 на сервер Tomcat.