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

**momjunior** · 04/07/2019, 22h29

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

**keokaz** · 05/07/2019, 13h24

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

**momjunior** · 08/07/2019, 22h05

Bon j'ai pu trouver une piste:

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

Nom : angul.PNG
Affichages : 2518
Taille : 41,6 Ko

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 xml :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**momjunior** · 10/07/2019, 00h30

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

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

Nom : img1.PNG
Affichages : 2978
Taille : 130,8 Ko

Nom : img1.PNG
Affichages : 2978
Taille : 130,8 Ko

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:

Nom : img2.PNG
Affichages : 2458
Taille : 103,5 Ko

Nom : img2.PNG
Affichages : 2458
Taille : 103,5 Ko

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**momjunior** · 17/07/2019, 17h58

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:

Nom : img1.PNG
Affichages : 2446
Taille : 28,3 Ko

Nom : img1.PNG
Affichages : 2446
Taille : 28,3 Ko

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

Nom : img2.PNG
Affichages : 2512
Taille : 41,3 Ko

Nom : img2.PNG
Affichages : 2512
Taille : 41,3 Ko

**momjunior** · 22/07/2019, 23h08

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

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

**momjunior** · 08/08/2019, 16h56

Ok finalement ça marche. Il fallait rajouter

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

au niveau du fichier employee.service.ts

et aussi :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

@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

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

Angular

Discussions similaires

Partager

Partager