Разделить серверную часть и интерфейсную часть jhipster на два проекта?

Я пытаюсь использовать jhipster с аутентификацией на основе токенов. Работает отлично.

Теперь я хочу запускать внутренний и внешний код в разных доменах. Как я могу это сделать?


Вот что я пробовал:

  1. Запустите yo jhipster и выберите вариант аутентификации на основе токенов:

    Welcome to the JHipster Generator
    
    ? (1/13) What is the base name of your application? jhipster
    ? (2/13) What is your default Java package name? com.mycompany.myapp
    ? (3/13) Do you want to use Java 8? Yes (use Java 8)
    ? (4/13) Which *type* of authentication would you like to use? Token-based authentication (stateless, with a token)
    ? (5/13) Which *type* of database would you like to use? SQL (H2, MySQL, PostgreSQL)
    ? (6/13) Which *production* database would you like to use? MySQL
    ? (7/13) Which *development* database would you like to use? H2 in-memory with Web console
    ? (8/13) Do you want to use Hibernate 2nd level cache? Yes, with ehcache (local cache, for a single node)
    ? (9/13) Do you want to use clustered HTTP sessions? No
    ? (10/13) Do you want to use WebSockets? No
    ? (11/13) Would you like to use Maven or Gradle for building the backend? Maven (recommended)
    ? (12/13) Would you like to use Grunt or Gulp.js for building the frontend? Grunt (recommended)
    ? (13/13) Would you like to use the Compass CSS Authoring Framework? No
    
    ...
    
    I'm all done. Running bower install & npm install for you
    ^C
    
  2. Сделайте две копии проекта как jhipster/backend и jhipster/frontend

  3. Удалите ненужные файлы из внутреннего и внешнего интерфейса

    rm -rf backend/.bowerrc
    rm -rf backend/.jshintrc
    rm -rf backend/bower.json
    rm -rf backend/Gruntfile.js
    rm -rf backend/package.json
    rm -rf backend/src/main/webapp
    rm -rf backend/src/test/javascript
    
    rm -rf frontend/pom.xml
    rm -rf frontend/src/main/java
    rm -rf frontend/src/main/resources
    rm -rf frontend/src/test/gatling
    rm -rf frontend/src/test/java
    rm -rf frontend/src/test/resources
    
  4. Внесите изменения в код, чтобы полностью удалить зависимость внутреннего и внешнего интерфейса

    • frontend/Gruntfile.js

      ...
      var parseVersionFromPomXml = function() {
          return '1.2.2.RELEASE';
      };
      ...
      browserSync: { ..., proxy: "localhost:8081" }
      
    • frontend/src/main/webapp/scripts/app/app.js

      angular.module('jhipsterApp', [...])
      .constant('API_URL', 'http://localhost:8080/')
      .run( ... )
      
    • frontend/src/main/webapp/scripts/**/*.service.js

      angular.module('jhipsterApp').factory(..., API_URL) {
          return $http.post(API_URL + 'api/authenticate', ...);
      }
      
      angular.module('jhipsterApp').factory('Account', function Account($resource, API_URL) {
          return $resource(API_URL + 'api/account', {}, {...});
      }
      
      // Make similar changes in all service files.
      
    • backend/pom.xml

      Удалить плагин yeoman-maven

    • backend/src/main/java/com/mycompany/myapp/SimpleCORSFilter.java

      // Copied from here: https://spring.io/guides/gs/rest-service-cors/
      
      @Component
      public class SimpleCORSFilter implements Filter {
          public void doFilter(...) {
              ...
              response.setHeader("Access-Control-Allow-Origin", "*");
              ...
          }
      }
      
  5. Выполнить

    • Вкладка терминала №1: НАЗАД

      cd backend
      mvn spring-boot:run
      
      ...
      [INFO] com.mycompany.myapp.Application - Started Application in 11.529 seconds (JVM running for 12.079)
      [INFO] com.mycompany.myapp.Application - Access URLs:
      ----------------------------------------------------------
              Local:          http://127.0.0.1:8080
              External:       http://192.168.56.1:8080
      ----------------------------------------------------------
      
    • Вкладка терминала №2: ФРОНТЕНД

      cd frontend/src/main/webapp
      npm install -g http-server
      http-server
      
      Starting up http-server, serving ./ on: http://0.0.0.0:8081
      Hit CTRL-C to stop the server
      
    • Вкладка терминала №3: ​​GRUNT

      cd frontend
      bower install
      npm install
      grunt serve
      
      ...
      [BS] Proxying: http://localhost:8081
      [BS] Access URLs:
       -------------------------------------
             Local: http://localhost:3000
          External: http://10.34.16.128:3000
       -------------------------------------
                UI: http://localhost:3001
       UI External: http://10.34.16.128:3001
       -------------------------------------
      
  6. Просмотрите http://localhost:3000/#/login

    Введите username:password как admin:admin.

    Наша вкладка НАЗАД гласит:

    [DEBUG] com.mycompany.myapp.security.Http401UnauthorizedEntryPoint - Pre-authenticated entry point called. Rejecting access
    

Видимо, я что-то не так делаю. Что это?


person musa    schedule 13.03.2015    source источник
comment
Просто мысль, но, возможно, вы могли бы дважды проверить, что серверная часть может обрабатывать действительные учетные данные. См. stackoverflow.com/questions/28269487/   -  person Rori Stumpf    schedule 14.03.2015
comment
Вам удалось запустить это?   -  person Daniel Gerber    schedule 20.01.2016
comment
@Daniel К сожалению, нет. Я перестал играть с jhipster вскоре после того, как задал этот вопрос.   -  person musa    schedule 23.01.2016
comment
@musa Мой ответ, приведенный ниже, помог еще нескольким людям, и именно так я решил проблему. Пожалуйста, посмотрите и отметьте его как принятый ответ.   -  person xeorem    schedule 16.05.2016


Ответы (5)


Когда запросы завершаются неудачно из-за CORS, на бэкэнде нет видимой ошибки. HTTP-запрос действительно выполняется, но блокируется на стороне интерфейса javascript. Подобное сообщение появится в консоли JS.

XMLHttpRequest cannot load http://localhost:8080/api/authenticate. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9000' is therefore not allowed access.

Сообщение об ошибке, которое вы видите, на самом деле связано с аутентификацией. Когда вы включаете CORS, ваш JS будет отправлять «предполетные» запросы с использованием метода HTTP OPTIONS. JHipster не настроен для глобального использования метода OPTIONS. Я сам столкнулся с той же проблемой, делая то же самое, что и вы. Исправить очень просто: просто добавьте эту строку в свой com.mycompany.config.SecurityConfiguration, непосредственно предшествующий (перед) первой antMatchers записью.

.antMatchers(org.springframework.http.HttpMethod.OPTIONS, "/api/**").permitAll()

Это явно разрешит все запросы с методом OPTIONS. Метод OPTIONS используется в CORS как способ прочитать все заголовки и посмотреть, какие методы HTTP разрешены в запросе CORS.

Наконец, в вашем классе SimpleCORSFilter вы также должны добавить эти заголовки:

response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
response.setHeader("Access-Control-Max-Age", "86400"); // 24 Hours
response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, x-auth-token");
person xeorem    schedule 23.03.2015

Разделить фронтенд и бэкэнд в приложении JHipster довольно просто. Пожалуйста, следуйте инструкциям, указанным ниже, если вы хотите настроить интерфейсные и серверные приложения отдельно и индивидуально с помощью JHipster:

  1. Создайте два каталога для внешнего и внутреннего приложений.

    • mkdir frontend
    • бэкэнд mkdir
  2. измените свой каталог на интерфейс и запустите команду JHipster, чтобы создать только модуль внешнего интерфейса

    • cd frontend
    • jhipster --skip-server --db = sql --auth = jwt
    • если все работает нормально, запустите команду npm start, чтобы запустить интерфейсное приложение.

    Я использую mysql для db и JWT для аутентификации, и если вы хотите использовать веб-сокеты, вы добавляете: "--websocket = spring-websocket"

  3. Теперь смените каталог на бэкэнд и запустите команду JHipster, чтобы создать только бэкэнд-модуль.

    • cd .. //as we are ing backend directory currently
    • бэкэнд cd
    • jhipster --скип-клиент
    • Запустите свое бэкэнд-приложение, как вы запускаете приложение весенней загрузки

Теперь ваш интерфейс и серверное приложение работают отдельно и индивидуально, и интерфейс координируется с серверным приложением через вызовы REST API.

person Bilal Ahmed Yaseen    schedule 28.06.2019
comment
Теперь вы хотите развернуть его на Prod, вы создадите одну war / jar для развертывания. Какие все файлы вам придется изменить в проекте? - person Gaurav Wadhwani; 21.12.2019
comment
Для развертывания лучше развернуть и интерфейс, и серверную часть по отдельности. Бэкэнд на tomcat и внешний вид на apache. - person Bilal Ahmed Yaseen; 22.12.2019
comment
Спасибо . Но я хочу развернуть на Google App Engine. Должен ли я тогда делать для него два разных проекта? - person Gaurav Wadhwani; 23.12.2019
comment
как подключить интерфейсное приложение к бэкэнд-приложению (да, я могу использовать вызовы отдыха, но ...)? Я получаю SERVER_API_URL: '' - person qleoz12; 09.11.2020

В дополнение к ответу xeorem, приведенному выше, мне также пришлось изменить parse-links-service.js для обработки предварительных ответов OPTIONS, которые не имеют заголовка ответа "link":

var links = {};
if (!angular.isObject()) {
    // CORS OPTIONS responses
    return links;
}

if (header.length == 0) {
    throw new Error("input must not be of zero length");
}

// Split parts by comma
var parts = header.split(','); 

...

Вместо добавления API_URL в app.js измените Gruntfile.js и добавьте API_URL в блок ngConstants для сред DEV и PROD.

person Ben    schedule 28.10.2015

Вы можете использовать фильтр CORS от Tomcat. Поместите зависимость Tomcat в pom.xml:

   <dependency>
        <groupId>org.apache.tomcat</groupId>
        <artifactId>tomcat-catalina</artifactId>
        <version>8.0.15</version>
        <scope>provided</scope>
    </dependency>

Используйте любую версию Tomcat, которую вы используете.

Добавьте инициализацию фильтра CORS в WebConfigurer:

private void initCorsFilter(ServletContext servletContext, EnumSet<DispatcherType> disps) {
        log.debug("Registering CORS Filter");
        FilterRegistration.Dynamic corsFilter = servletContext.addFilter("corsFilter", new CorsFilter());
        Map<String, String> parameters = new HashMap<>();
        parameters.put("cors.allowed.headers", "Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers,Authorization");
        parameters.put("cors.allowed.methods", "GET,POST,HEAD,OPTIONS,PUT,DELETE");
        corsFilter.setInitParameters(parameters);
        corsFilter.addMappingForUrlPatterns(disps, false, "/*");
        corsFilter.setAsyncSupported(true);
    }

поместите эту строку в WebConfigurer.onStartup(...), поместите ее как можно ближе к верху.

...
initCorsFilter(servletContext, disps);
...
person Ondrej Bozek    schedule 14.05.2015

Я использую Jhipster версии 4.14.5

  • Я скопировал следующие файлы в папку расширенного проекта:

    .bowerrc
    gulp
    pom.xml
    yarn.lock
    gulpfile.js
    readme.md

    bower_components
    .gitattributes
    src / main / web

    bower.json
    .gitignore
    package.json
    target / www

  • Потом побежал:

    пряжа установить

    установка беседки

    установка глотка

  • Затем изменил файл gulp / config.js на:

    apiPort: 8081

    uri: 'http://localhost:'

  • Затем запустили проект, запустив:

    глоток подавать

person Ryan Augustine    schedule 13.12.2018