Как развернуть проект angular 6 и проект с пружинной загрузкой как единое устройство

Question

У меня есть два проекта, один - Angular Project (Front End Application), а другой - Spring boot (Rest Api's). Когда я запускаю оба проекта по отдельности, все работает нормально. Но теперь я хочу сгенерировать один исполняемый файл jar для обоих этих проектов таким образом, чтобы при запуске jar в localhost: 8081 он запустил как модуль Angular, так и модуль весенней загрузки.

Я добавил следующий плагин в мой файл pom.xml

<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>../angular6-MyProject/dist</directory>
                                </resource>
                            </resources>
                        </configuration>
                    </execution>
                </executions>
        </plugin>

Answer 1

Я следовал этот урок и это как-то похоже на то, что упоминал Якуб в своем ответе. Обычно я запускаю команду mvn spring-boot: run, чтобы запустить ее за один раз. Ключ к настройке проекта находится в pom.xml. Убедитесь, что вы говорите сборке скопировать Angular dist / files в нужное место. В этом случае ему нужно скопировать скомпилированный JS из папки Angular dist / на сервер / target / classes / resources, чтобы он мог размещать статический контент.

Вся сборка (чистая установка mvn) может длиться вечно. Поэтому во время разработки я просто захожу в каталог src / main / web и запускаю оттуда ng-serve, чтобы быстро увидеть изменения в своем пользовательском интерфейсе.

Надеюсь, это поможет.

Answer 2

Быстрый ответ

Вам необходимо скопировать статические файлы в папку ${build.directory}/classes/META-INF/resources, чтобы контейнер сервлета служил им в качестве статических файлов из файла war / jar (так работает https://www.webjars.org).

Обработка HTML напрямую из jar

В разделе Статическое содержимое Документация Spring Boot вы можете найти

По умолчанию Spring Boot предоставляет статический контент из каталога / static (или / public или / resources или / META-INF / resources) в пути к классам или из корня ServletContext

/META-INF/resources - это «стандартный» способ (хотя и не самый интуитивно понятный), и он идет непосредственно из спецификации сервлетов Java 3.0 (из JavaEE версии 6)

Веб-приложение существует в виде структурированной иерархии каталогов. Корень этой иерархии служит корнем документа для файлов, которые являются частью приложения. Например, для веб-приложения с контекстным путем /catalog в веб-контейнере, файл index.html в основании иерархии веб-приложений или в файле JAR внутри WEB-INF/lib, который включает index.html в каталоге META-INF/resources может быть обслужен для удовлетворения запроса от /catalog/index.html.

Поэтому, установка подходящего пути должна сделать работу.

Обработка углового приложения как зависимости

Цитируемая спецификация JavaEE также используется webjars . Webjars - это зависимости на стороне клиента, упакованные в архивные файлы JAR. Основная причина существования веб-файлов заключается в том, чтобы избегать добавления и управления зависимостями на стороне клиента (такими как Angular, jQuery), что часто приводит к затруднению поддержки баз кода.

Но если Angular может быть веб-флягой, то и ваш интерфейс может быть таким же. Я склоняюсь к тому, чтобы упаковать приложение Angular в файл jar и рассматривать его как зависимость.

Интерфейсное приложение

Управляемый npm из Maven + создание файла Jar

<project>

    <groupId>com.examplegroupId>
    <artifactId>myapp-ui</artifactId>
    <packaging>jar</packaging>

    <build>
        <plugins>
           <!-- run the frontend (npm / bower stack) and update dependencies -->
            <plugin>
                <groupId>com.github.eirslett</groupId>
                <artifactId>frontend-maven-plugin</artifactId>
                <configuration>
                    <installDirectory>target</installDirectory>
                </configuration>
                <executions>
                    <execution>
                        <id>install node and npm</id>
                        <goals>
                            <goal>install-node-and-npm</goal>
                        </goals>
                        <phase>generate-resources</phase>
                        <configuration>
                            <nodeVersion>v8.9.1</nodeVersion>
                            <npmVersion>5.5.1</npmVersion>
                        </configuration>
                    </execution>
                    <execution>
                        <id>npm install</id>
                        <goals>
                            <goal>npm</goal>
                        </goals>
                        <phase>generate-resources</phase>
                        <configuration>
                            <arguments>install</arguments>
                        </configuration>
                    </execution>
                    <execution>
                        <id>npm build</id>
                        <goals>
                            <goal>npm</goal>
                        </goals>
                        <phase>generate-resources</phase>
                        <configuration>
                            <arguments>run build</arguments>
                        </configuration>
                    </execution>
                </executions>
            </plugin>

            <!-- copy everything as a webjar -->
            <plugin>
                <artifactId>maven-resources-plugin</artifactId>
                <executions>
                    <execution>
                        <id>copy-resources</id>
                        <phase>process-resources</phase>
                        <goals>
                            <goal>copy-resources</goal>
                        </goals>
                        <configuration>
                            <outputDirectory>${basedir}/target/classes/META-INF/resources</outputDirectory>
                            <resources>
                                <resource>
                                    <directory>dist/</directory>
                                </resource>
                            </resources>
                        </configuration>
                    </execution>
                </executions>
            </plugin>
        </plugins>
    </build>
</project>

Бэкэнд-приложение

Используйте зависимость напрямую

<dependencies>
    <dependency>
        <groupId>com.example<groupId>
        <artifactId>myapp-ui</artifactId>
    </dependency>
</dependencies>

Извещения

Некоторые проблемы и наблюдения, которые я видел в веб-банках:

• Я видел некоторые проблемы с веб-файлами и веб-шрифтами (шрифты не загружаются браузером при подаче их из файла jar)
• Есть способы создания webjar-файлов с использованием инструментов npm, и все пакеты, которые я видел, требуют и используют java в любом случае. Я не видел ни одного собственного решения JS
• Веб-файлы сами по себе не влияют на производительность приложения, однако подача статического содержимого из контейнера сервлета всегда значительно менее производительна (с точки зрения возможной пропускной способности), чем его обработка, скажем, из nginx