Déployer une application angular+spring boot sur apache tomcat

Version imprimable

04/07/2019, 22h29
momjunior

Déployer une application angular+spring boot sur apache tomcat

Bonjour

Je viens de créer une application spring boot + Angular et je voudrais savoir comment la déployer sur un serveur apache tomcat.

En effet, avec une simple application servlet+jsp, je plaçais le .WAR dans le répertoire webapps de tomcat et j'y accédais via http://localhost:8080/hello par exemple.

Sauf que là j'ai une application frontend gérée par Angular, et une backend gérée par spring boot. Donc comment déployer tous les 2 sur le serveur tomcat?

Merci
05/07/2019, 13h24
keokaz

bonjour,

peut être que c'est possible qu'avec 2 wars dans 2 différent port ?

sur le frontend tu accède par l'adresse http://mondomaine.fr:8080/index.hmtl => war1
sur le backtend tu accède par l'adresse http://mondomaine.fr:8081/index.hmtl => war2

ce que j'essayerai ensuite c'est d'utiliser nginx pour faire un proxy

http://http://mondomaine.fr:8080/front_end => http://mondomaine.fr:8080/index.hmtl
http://http://mondomaine.fr:8080/back_end => http://mondomaine.fr:8081/index.hmtl

1 pièce(s) jointe(s)

Bon j'ai pu trouver une piste:

1.Générer le répertoire "dist" grâce à la commande "ng build --prod"

Pièce jointe 489719

2.Utiliser la commande "mvn clean install" pour copier le contenu du répertoire "dist" du frontend dans le répertoire "/src/main/resources/static"
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <plugin> <artifactId>maven-resources-plugin</artifactId> <executions> <execution> <id>copy-resources</id> <phase>validate</phase> <goals><goal>copy-resources</goal></goals> <configuration> <outputDirectory>${basedir}/target/classes/static/</outputDirectory > <resources> <resource> <directory>${basedir}/../angular7-springboot-client/dist/angular7-springboot-client</directory > </resource> </resources> </configuration> </execution> </executions> </plugin>
3. Exécuter la commande "mvn clean install"

4.Copier et coller le fichier .war généré dans le webapps de tomcat

Jusqu'ici tout va bien. Sauf que quand j'accède à l'application via http://localhost:8080/monAppli/, la page d'accueil est vide.

2 pièce(s) jointe(s)

Voici ce à quoi je suis désormais confronté:

1. Lorsque j’exécute l'application sous Spring Tool Suite, tout marche bien:

Pièce jointe 490013

2. Mais lorsque je crée le .war, je l'insère dans le webapps de tomcat et que j'exécute, le contenu se trouvant entre la balise "<app-root></app-root>" ne s'affiche pas:

Pièce jointe 490016

Voici le contenu de la page index.html. Tous les éléments s'affichent bien sauf le contenu des balises "<app-root></app-root>":
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Montitre</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> <link rel="stylesheet" href="styles.87a4bb5c6394c8a754cc.css"></head> <body>test <app-root></app-root> <script src="runtime-es2015.858f8dd898b75fe86926.js" type="module"></script><script src="polyfills-es2015.27661dfa98f6332c27dc.js" type="module"></script><script src="runtime-es5.741402d1d47331ce975c.js" nomodule></script><script src="polyfills-es5.7f43b971448d2fb49202.js" nomodule></script><script src="scripts.6cf4da7113bcd1218d80.js"></script><script src="main-es2015.01330aa40fef591ad4a6.js" type="module"></script><script src="main-es5.f84b89407a3219c64190.js" nomodule></script></body> </html>

17/07/2019, 17h58
momjunior

2 pièce(s) jointe(s)

Ok j'ai un peu avancé, j'arrive à afficher le contenu de <app-root></app-root>, il fallait juste remplacer <base href="/"> par <base href="."> dans index.html.

Sauf que l'ajout des données dans la base et l'affichage ne marchent pas:

Pièce jointe 491801

Pourtant en phase de développement c'est-à-dire quand je lance l'application à partir de Spring tool suite, ça marche:

Pièce jointe 491805
22/07/2019, 23h08
momjunior

En ouvrant la console dans firefox (F12), j'ai l'erreur suivante:

Citation:

ERROR
Object {
headers: {
…},
status: 404,
statusText: "OK",
url: "http://localhost:8080/api/v1/employees",
ok: false,
name: "HttpErrorResponse",
message: "Http failure response for http://localhost:8080/api/v1/employees: 404 OK",
error: "<!doctype html><html lang=\"fr\"><head><title>État HTTP 404 – Non trouvé</title><style type=\"text/css\">h1 {font-family:Tahoma,Arial,sans-serif;color:white;background-color:#525D76;font-size:22px;} h2 {font-family:Tahoma,Arial,sans-serif;color:white;background-color:#525D76;font-size:16px;} h3 {font-family:Tahoma,Arial,sans-serif;color:white;background-color:#525D76;font-size:14px;} body {font-family:Tahoma,Arial,sans-serif;color:black;background-color:white;} b {font-family:Tahoma,Arial,sans-serif;color:white;background-color:#525D76;} p {font-family:Tahoma,Arial,sans-serif;background:white;color:black;font-size:12px;} a {color:black;} a.name {color:black;} .line {height:1px;background-color:#525D76;border:none;}</style></head><body><h1>État HTTP 404 – Non trouvé</h1><hr class=\"line\" /><p><b>Type</b> Rapport d'état</p><p><b>message</b> /api/v1/employees</p><p><b>description</b> La ressource demandée n'est pas disponible.</p><hr class=\"line\" /><h3>Apache Tomcat/9.0.20</h3></body></html>"
}
main-es2015.01330aa40fef591ad4a6.js:1:22210
Xe http://localhost:8080/ecole/main-es2...f591ad4a6.js:1
handleError http://localhost:8080/ecole/main-es2...f591ad4a6.js:1
next http://localhost:8080/ecole/main-es2...f591ad4a6.js:1
r http://localhost:8080/ecole/main-es2...f591ad4a6.js:1
__tryOrUnsub http://localhost:8080/ecole/main-es2...f591ad4a6.js:1
next http://localhost:8080/ecole/main-es2...f591ad4a6.js:1
_next http://localhost:8080/ecole/main-es2...f591ad4a6.js:1
next http://localhost:8080/ecole/main-es2...f591ad4a6.js:1
next http://localhost:8080/ecole/main-es2...f591ad4a6.js:1
emit http://localhost:8080/ecole/main-es2...f591ad4a6.js:1
onHandleError http://localhost:8080/ecole/main-es2...f591ad4a6.js:1
invoke http://localhost:8080/ecole/polyfill...6332c27dc.js:1
run http://localhost:8080/ecole/polyfill...6332c27dc.js:1
runOutsideAngular http://localhost:8080/ecole/main-es2...f591ad4a6.js:1
onHandleError http://localhost:8080/ecole/main-es2...f591ad4a6.js:1
handleError http://localhost:8080/ecole/polyfill...6332c27dc.js:1
runTask http://localhost:8080/ecole/polyfill...6332c27dc.js:1
invokeTask http://localhost:8080/ecole/polyfill...6332c27dc.js:1
invoke http://localhost:8080/ecole/polyfill...6332c27dc.js:1
0 http://localhost:8080/ecole/polyfill...6332c27dc.js:1
08/08/2019, 16h56
momjunior

Ok finalement ça marche. Il fallait rajouter

Code:

private baseUrl = 'http://localhost:8080/ecole/api/v1/employees';

au niveau du fichier employee.service.ts

et aussi :

Code:

@CrossOrigin(origins = "http://localhost:4200")

dans la Class EmployeeController.

Voici le lien vers le tuto complet:

https://www.javaguides.net/2019/06/s...-tutorial.html