Интеграция загрузочного сервера Spring и приложения Angular CLI в один исполняемый файл

Question

Я разработал решение, в котором приложение весенней загрузки, состоящее из функциональных возможностей веб-сокета, получает сокет-соединение от клиента, так как скважины потребляют вызовы REST API из приложения Angular CLI.

прямо сейчас Spring boot работает отдельно, а угловой CLIвыполняется индивидуально (запуск npm).

Любая идея, которую я могу объединить оба в один исполняемый файл, например dist war или что-то еще, так что я могу запустить оба и запустить оба ..

Answer 1

У меня есть проект, который использует Spring boot в качестве бэкэнда и угловой в передней части.Я работаю под углом, используя Spring.Таким образом, можно генерировать .jar или .war так, как вы хотите.

Способ, которым я его интегрирую, заключается в следующем: чтобы работать под углом весной, вам нужно построить свой проект с ng build --prod ивесной скопируйте все сгенерированные здесь файлы в статическую папку.Тем не менее, вам необходимо настроить маршруты, то есть определить угловую и пружинную ответственность.

Чтобы настроить маршруты, вы можете включить следующую конфигурацию:

@Configuration
public class AngularConfig implements WebMvcConfigurer {

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {

      registry.addResourceHandler("/**/*")
        .addResourceLocations("classpath:/static/")
        .resourceChain(true)
        .addResolver(new PathResourceResolver() {
            @Override
            protected Resource getResource(String resourcePath,
                Resource location) throws IOException {
                Resource requestedResource = location.createRelative(resourcePath);
                return requestedResource.exists() && requestedResource.isReadable() ? requestedResource
                : new ClassPathResource("/static/index.html");
            }
        });

    }
}

В фазе разработки,очень скучно строить под углом.Поэтому очень желательно использовать ng serve (с включенным весенним сервером).Так как angular cli работает на localhost:4200, а пружина на localhost:8080, вы должны сделать прокси между адресами (я думаю, вы уже это сделали, но в любом случае ...)

1)В корне проекта вы должны включить файл с именем proxy.conf.json, содержащий:

{
    "/api": {
        "target": "http://localhost:8080",
        "secure": false
    }
}

2) Далее в файле package.json заменить "start": "ng serve" на "start": "ng serve --proxy-config proxy.conf.json"

Тамты иди!Это должно работать.

Наконец, это очень скучное копирование и вставка сборки.Так что, если вы используете Maven, вы можете включить правило, чтобы сделать его для вас каждый раз, когда вы начинаете весну.Поместите это в ваш pom.xml:

<build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
            <plugin>
                <artifactId>maven-resources-plugin</artifactId>
                <executions>
                      <execution>
                          <id>copy-resources</id>
                          <phase>validate</phase>
                          <goals><goal>copy-resources</goal></goals>
                          <configuration>
                              <outputDirectory>${basedir}/src/main/resources/static/</outputDirectory >
                              <resources>
                                  <resource>
                                      <directory>${basedir}/../frontend/dist</directory >
                                  </resource>
                              </resources>
                          </configuration>
                      </execution>
                </executions>
            </plugin>
        </plugins>
    </build>

Конечно, вы должны установить пути в соответствии с вашим проектом.

После сборки под углом и выполнить пружину.Если вы используете Maven, просто сделайте: mvn package.

Если у вас есть еще вопросы, дайте мне знать!Удачи.