Die Trennung jhipster back-end und front-end-in zwei Projekte?
Ich versuche jhipster mit token-basierte Authentifizierung. Es funktioniert perfekt.
Nun, ich will laufen-back-end und front-end-code auf verschiedenen domains. Wie kann ich dies tun?
Dies ist, was ich versucht habe:
-
Laufen
yo jhipster
und wählen Sie token-basierte Authentifizierung-option: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
-
Machen Sie zwei Kopien des Projekts als
jhipster/backend
undjhipster/frontend
-
Löschen Sie unnötige Dateien von back-end und front-end -
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
-
Änderungen im code, um vollständig zu entfernen backend/frontend Abhängigkeit
-
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
Entfernen yeoman-maven-plugin
-
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", "*"); ... } }
-
-
Laufen
-
Terminal Tab #1: BACKEND
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 ----------------------------------------------------------
-
Terminal Tab #2: FRONTEND
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
-
Terminal Tab #3: GRUNZEN
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 -------------------------------------
-
-
Durchsuchen http://localhost:3000/#/login
Geben Sie
username:password
alsadmin:admin
Unserer BACKEND Registerkarte liest:
[DEBUG] com.mycompany.myapp.security.Http401UnauthorizedEntryPoint - Pre-authenticated entry point called. Rejecting access
Anscheinend mache ich etwas falsch. Was ist es?
- Nur ein Gedanke, aber vielleicht könnten Sie überprüfen, dass die back-end ist in der Lage zu verarbeiten gültigen Anmeldedaten an. Siehe stackoverflow.com/questions/28269487/...
- Haben Sie es geschafft, dies zum laufen?
- Leider Nein. Ich aufgehört zu spielen mit jhipster kurz nachdem ich diese Frage gestellt.
- Unten meine Antwort geholfen hat, ein paar andere und ist so, wie ich das problem gelöst. Bitte schauen Sie sich um und betrachten Sie es markieren als die akzeptierte Antwort.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Wenn Anträge wegen CORS, es gibt keine sichtbaren Fehler auf dem backend. Die HTTP-Anforderung tatsächlich gelingt, ist aber blockiert auf dem front-end-Seite, die mittels javascript. Eine Meldung wie diese erscheinen in der JS-Konsole.
Die Fehlermeldung, die Sie sehen, tatsächlich auf die Authentifizierung. Wenn Sie aktivieren CORS, Ihr JS senden "pre-flight" - requests durch den HTTP-OPTIONEN-Methode. JHipster ist nicht so konfiguriert, dass die OPTIONS-Methode weltweit. Ich lief in genau dem gleichen problem selber, während Sie die gleiche Sache, die Sie haben. Das Update ist sehr einfach: fügen Sie einfach diese Zeile in deine
com.mycompany.config.SecurityConfiguration
unmittelbar vor (vor) dem erstenantMatchers
Eintrag.Wird dies explizit erlauben, alle Anfragen mit der OPTIONS-Methode. Die OPTIONEN, die eingesetzte Methode CORS als einen Weg, um Lesen Sie alle Kopf-und sehen, welche HTTP-Methoden erlaubt sind CORS Anfrage.
Schließlich in Ihrem SimpleCORSFilter Klasse, man sollte auch hinzufügen, dass diese Kopfzeilen:
Neben xeorem Antwort oben, ich hatte auch zu ändern parse-links-service.js behandeln Sie die preflight-OPTIONEN-Antworten, die nicht die "link" - header der Antwort:
Anstelle der Zugabe zu API_URL app.js ändern Gruntfile.js und fügen Sie die API_URL der ngConstants-block für DEV und PROD-Umgebungen.
Trennung von frontend und backend in JHipster Anwendung ist ganz einfach. Bitte befolgen Sie die unten genannten Schritte, wenn Sie wollen, um die setup-frontend-und backend-Anwendungen getrennt und einzeln mit JHipster:
Erstellen Sie zwei Verzeichnisse für frontend-und backend-Anwendungen
ändern Sie Ihre Verzeichnis, frontend-und ausführen der JHipster Befehl zu erstellen, nur frontend-Modul
npm start
Befehl ein, um Ihre frontend-Applikation.Ändern Sie nun Ihr Verzeichnis auf dem backend ausführen JHipster Befehl zu erstellen, nur backend-Modul
Nun, Ihre frontend-und backend-Anwendung ausgeführt werden separat und individuell und frontend ist die Abstimmung mit den back-End-Anwendung über REST-API-Aufrufe.
Können Sie CORS-filter von Tomcat setzen in Abhängigkeit
pom.xml
:Verwenden, was Tomcat-version, die Sie verwenden.
Hinzufügen CORS-filter Initialisierung in
WebConfigurer
:setzen Sie diese Zeile in
WebConfigurer.onStartup(...)
setzen Sie Sie so nah an der Spitze wie möglich.Ich bin mit Jhipster version 4.14.5
Habe ich kopiert die folgenden Dateien in einem Projekt-forntend Ordner:
.bowerrc
gulp
pom.xml
Garn.lock
gulpfile.js
die readme-Datei.md
bower_components
.gitattributes
src/main/web
Laube.json
.gitignore
Paket.json
Ziel/www
Dann ran:
Garn installieren
bower installieren
gulp installieren
Dann geändert, um die gulp/config.js Datei :
apiPort: 8081
uri: 'http://localhost:'
Dann begann das Projekt mit:
gulp dienen