Как интегрировать угловой с пружинной загрузкой, чтобы увидеть угловой веб-интерфейс на порту загрузочной пружины? - PullRequest
Новая
       3

Как интегрировать угловой с пружинной загрузкой, чтобы увидеть угловой веб-интерфейс на порту загрузочной пружины?

0 голосов
/ 29 августа 2018

У меня есть приложение для весенней загрузки внутреннего интерфейса и интерфейс, разработанный с использованием angular4. Поскольку эти 2 при развертывании работают на разных портах (8080,4200), пользовательский интерфейс не отображается. На локальном сервере запуска angular с использованием приведенного ниже, он отлично работает на localhost: 4200 и показывает веб-интерфейс: 

ng serve --proxy-config proxy.conf.json

где proxy.conf.json имеет содержимое: 

{
  "*": {
    "target": "http://localhost:8080",
    "secure": false,
    "logLevel": "debug"
  }
}

Но не при попытке интеграции с приложением springboot (localhost: 8080). Вероятно, перед развертыванием требуется, чтобы бизнес-логика ng (установка узла / npm и т. Д.) Была запечена.

Итак, я использовал ng build, который скопировал сгенерированные файлы в выходной каталог - src / main / resources / static, и теперь он находится в пути приложения весенней загрузки. Запуск tomcat по-прежнему не показывает пользовательский интерфейс на localhost: 8080. Я вижу угловой символ / значок на вкладке Chrome, но ничего не отображается на HTML-странице.

Я также добавил метод контроллера для возврата index.html, чтобы он мог обслуживать статические файлы в пути. 

@GetMapping("/")
public String index() {
    return "forward:/index.html";
}

Но при этом просто отображается строка «forward: /index.html» вместо html-содержимого на веб-странице. Нужно ли что-то изменить в этом index.html, чтобы он мог перенаправлять на созданные мной компоненты ng? Не знаю, имеет ли значение изменение селектора в index.html. Поскольку мой основной компонент не является компонентом приложения (который по умолчанию является корневым компонентом), а компонентом входа, поэтому в index.html я изменил <app-root></app-root> на селектор компонента входа <app-login></app-login>; до сих пор ничего не отображается в пользовательском интерфейсе.

Похоже, Spring-Boot не может понять угловатые вещи и как маршрутизировать к основным компонентам ng.

Ниже приведен index.html: 

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hello App</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
<script type="text/javascript" src="runtime.js"></script><script type="text/javascript" src="polyfills.js"></script><script type="text/javascript" src="styles.js"></script><script type="text/javascript" src="vendor.js"></script><script type="text/javascript" src="main.js"></script></body>
</html>

Структура проекта: 

-src
 -main
  -java
    - backend
      - AppController
      - AppService
      - Main.java
    - frontend
      - src
        - index.html
        - app
          -login
           - login.component.html
           - login.component.css
           - login.component.ts
          etc..
  - resources
    - static
      - index.html
      - application.properties
      - ...

Как мне заставить интерфейс работать с внутренним сервером при развертывании? Нужно ли добавлять какой-либо аргумент или конфигурацию в application.properties, чтобы приложение обслуживало статический контент из / resources при запуске? Нужно ли добавлять какой-либо resourceLocationHandler для его обслуживания?

Любая помощь, очень ценится!

Ответы [ 2 ]

0 голосов
/ 29 августа 2018

Вы можете сделать это, используя maven и frontend-maven-plugin

Прежде всего, я согласен с тем фактом, что интерфейс отделен от интерфейса

Итак, я бы создал эту структуру проекта: 

parentDirectory
- frontend
  - angular src files
  - pom.xml
- backend
  - spring boot based backend
  - pom.xml
- pom.xml

Родитель pom.xml будет: 

<project xmlns="http://maven.apache.org/POM/4.0.0"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>test</groupId>
    <artifactId>apringangular</artifactId>
    <packaging>pom</packaging>
    <name>Spring angular</name>
    <modules>
        <module>backend</module>
        <module>frontend</module>
    </modules>
</project>

Внешний интерфейс будет: 

<project xmlns="http://maven.apache.org/POM/4.0.0"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>test</groupId>
        <artifactId>springangular</artifactId>
        <version>1.0</version>
    </parent>
    <artifactId>frontend</artifactId>
    <packaging>jar</packaging>
    <name>frontend</name>
    <build>
        <plugins>
            <plugin>
                <groupId>org.codehaus.mojo</groupId>
                <artifactId>properties-maven-plugin</artifactId>
                <version>1.0.0</version>
                <executions>
                    <execution>
                        <phase>initialize</phase>
                        <goals>
                            <goal>read-project-properties</goal>
                        </goals>
                        <configuration>
                            <files>
                                <file>frontend_project_properties.properties</file>
                            </files>
                        </configuration>
                    </execution>
                </executions>
            </plugin>
            <plugin>
                <artifactId>maven-clean-plugin</artifactId>
                <version>3.1.0</version>
                <configuration>
                    <filesets>
                        <fileset>
                            <directory>dist</directory>
                            <includes>
                                <include>*</include>
                            </includes>
                        </fileset>
                    </filesets>
                </configuration>
            </plugin>
            <plugin>
                <groupId>com.github.eirslett</groupId>
                <artifactId>frontend-maven-plugin</artifactId>
                <version>1.6</version>
                <executions>
                    <execution>
                        <id>install node and npm</id>
                        <goals>
                            <goal>install-node-and-npm</goal>
                        </goals>
                        <configuration>
                            <nodeVersion>v8.11.3</nodeVersion>
                            <npmVersion>6.3.0</npmVersion>
                            <arguments>${http_proxy_config}</arguments>
                            <arguments>${https_proxy_config}</arguments>
                            <arguments>run build</arguments>
                            <npmInheritsProxyConfigFromMaven>false</npmInheritsProxyConfigFromMaven>
                        </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 run build</id>
                        <goals>
                            <goal>npm</goal>
                        </goals>
                        <configuration>
                            <arguments>${http_proxy_config}</arguments>
                            <arguments>${https_proxy_config}</arguments>
                            <arguments>run build</arguments>
                            <npmInheritsProxyConfigFromMaven>false</npmInheritsProxyConfigFromMaven>
                        </configuration>
                    </execution>
                </executions>
            </plugin>
        </plugins>
    </build>
</project>

Внутри файла frontend_project_properties.properties У меня есть конфигурация прокси для узла и npm. Примерно так: 

http_proxy_config=config set proxy http://USERNAME_PROXY:PASSWORD_PROXY@PROXY_HOST:PROXY_PORT
https_proxy_config=config set https-proxy http://USERNAME_PROXY:PASSWORD_PROXY@PROXY_HOST:PROXY_PORT

Задняя часть корпуса представляет собой классическую пружинную заднюю часть багажника. Вы должны указать maven, где находится интерфейс, который maven может создать уникальное веб-приложение. В бэкэнд pom.xml вы должны добавить что-то вроде этого: 

<project xmlns="http://maven.apache.org/POM/4.0.0"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>it.eng.tz.area.vasta.mev</groupId>
        <artifactId>appmgr</artifactId>
        <version>1.0</version>
    </parent>
    <artifactId>appmgrbackend</artifactId>
    <packaging>war</packaging>
    <name>Application manager backend</name>
    <description>
        Lato backend del sistema di gestione
    </description>
    <dependencies>
         <!-- Your dependencies -->
    </dependencies>
    <build>
        <sourceDirectory>src/main/java</sourceDirectory>
        <resources>
            <resource>
                <directory>src/main/resources</directory>
                <filtering>true</filtering>
                <includes>
                    <include>**/*.*</include>
                </includes>
            </resource>
        </resources>        
        <testResources>
            <testResource>
                <directory>src/test/resources</directory>
                <excludes>
                    <exclude>**/*.*</exclude>
                </excludes>
            </testResource>
        </testResources>
        <plugins>
            <plugin>
                <artifactId>maven-war-plugin</artifactId>
                <version>3.2.2</version>
                <configuration>
                    <webResources>
                        <resource>
                            <directory>../frontend/dist</directory>
                        </resource>
                    </webResources>
                </configuration>
            </plugin>
        </plugins>
    </build>
</project>

Таким образом, вы сообщаете maven-war-plugin, что HTML и статический код находятся в каталоге dist проекта внешнего интерфейса. Обратите внимание, что во время разработки node.js обслуживает ресурс на порту 4200, а Spring использует другой порт. Таким образом, у вас возникнет межсайтовая проблема. Используя Spring Security, вы можете решить эту проблему, настроив, на внутренней стороне, Spring Security таким образом: 

@Configuration
@EnableWebSecurity
@Import(value= {AppMgrWebMvcConfig.class})
@EnableGlobalMethodSecurity(securedEnabled = true, prePostEnabled=true)
public class AppMgrWebSecConfig extends WebSecurityConfigurerAdapter {
    @Autowired
    @Qualifier("oauthUsrDetailSvc")
    UserDetailsService userDetailsService;
    @Autowired
    @Qualifier("userPwdEnc")
    private PasswordEncoder pwdEncoder;
    @Override
    public void configure(WebSecurity web) throws Exception {
        super.configure(web);
        web.httpFirewall(this.allowUrlEncodedSlashHttpFirewall());
    }
    @Bean
    public HttpFirewall allowUrlEncodedSlashHttpFirewall()
    {
        StrictHttpFirewall firewall = new StrictHttpFirewall();
        firewall.setAllowUrlEncodedSlash(true);
        firewall.setAllowSemicolon(true);
        return firewall;
    } 
    @Autowired
    public void configureGlobal(AuthenticationManagerBuilder auth) throws Exception
    {
        auth.userDetailsService(userDetailsService);
        auth.authenticationProvider(authenticationProvider());
    }
    @Bean
    public DaoAuthenticationProvider authenticationProvider() {
        DaoAuthenticationProvider authenticationProvider = new DaoAuthenticationProvider();
        authenticationProvider.setUserDetailsService(userDetailsService);
        authenticationProvider.setPasswordEncoder(pwdEncoder);
        return authenticationProvider;
    }
    @Override
    protected void configure(HttpSecurity http) throws Exception
    {
        http
        .authorizeRequests()
        .antMatchers("/resources/**")
        .permitAll()
        .antMatchers("/rest/protected/**")
        .access("hasAnyRole('ADMIN','USER','SUPER_ADMIN')")
        .and()
        .authorizeRequests()
        .antMatchers("/rest/public/**")
        .permitAll()
        .and()
        .formLogin()
        .loginPage("/login")
        .permitAll()
        .usernameParameter("username")
        .passwordParameter("password")
        .defaultSuccessUrl("http://localhost:8100/", true)
        .failureUrl("/login?error")
        .loginProcessingUrl("/login")
        .and()
        .logout()
        .permitAll()
        .logoutSuccessUrl("/login?logout")
        .and()
        .csrf()
        .csrfTokenRepository(CookieCsrfTokenRepository.withHttpOnlyFalse())
        .and()
        .cors().configurationSource(corsConfigurationSource())
        .and()
        .exceptionHandling()
        .accessDeniedPage("/pages/accessDenied");
    }
    @Bean
    CorsConfigurationSource corsConfigurationSource() {
        CorsConfiguration configuration = new CorsConfiguration();
        configuration.setAllowedOrigins(Arrays.asList("http://localhost:4200","http://localhost:8080"));
        configuration.setAllowedMethods(Arrays.asList("GET","POST", "OPTIONS"));
        configuration.setAllowedHeaders(Arrays.asList("x-requested-with"));
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", configuration);
        return source;
    }
}

Это позволит вам разрабатывать и компилировать все только с помощью maven

Angelo

0 голосов
/ 29 августа 2018

Пожалуйста, откройте файл jar с помощью утилиты архивирования и посмотрите, доступны ли в нем статические файлы. Если они доступны, необходимо сообщить Spring, что URL-адреса, которые вы вводите в адресную строку, на самом деле являются угловыми маршрутами: 

@Controller
public class Routing {

    @RequestMapping({ "", "/login", "/products/**" })
    public String gui() {
        return "forward:/index.html";
    }
}
...