Deployment Angular: Unterschied zwischen den Versionen
(5 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
Zeile 16: | Zeile 16: | ||
<pre> | <pre> | ||
cd dist/<projekt folder>/ | cd dist/<projekt folder>/ | ||
ng build --prod | |||
zip -r angular-client.zip * | zip -r angular-client.zip * | ||
Zeile 37: | Zeile 38: | ||
<pre> | <pre> | ||
... | |||
<properties> | |||
... | |||
<client-version>${project.version}</client-version> | |||
... | |||
</properties> | |||
... | |||
<plugin> | <plugin> | ||
<!-- copy the latest angular client from the repository into the war file --> | <!-- copy the latest angular client from the repository into the war file --> | ||
Zeile 45: | Zeile 56: | ||
<execution> | <execution> | ||
<id>unpack-web-client</id> | <id>unpack-web-client</id> | ||
<phase>package</phase> | <phase>prepare-package</phase> | ||
<goals> | <goals> | ||
<goal>unpack</goal> | <goal>unpack</goal> | ||
Zeile 54: | Zeile 65: | ||
<artifactItem> | <artifactItem> | ||
groupId>at.or.kirner</groupId> | groupId>at.or.kirner</groupId> | ||
<artifactId> | <artifactId><project name>-client</artifactId> | ||
<version>${project.version}</version> | <version>${project.version}</version> | ||
<type>zip</type> | <type>zip</type> | ||
Zeile 65: | Zeile 76: | ||
</executions> | </executions> | ||
</plugin> | </plugin> | ||
... | |||
</pre> | </pre> | ||
Zeile 135: | Zeile 148: | ||
RewriteEngine On | RewriteEngine On | ||
RewriteOptions InheritDownBefore | RewriteOptions InheritDownBefore | ||
# If an existing asset or directory is requested go to it as it is | |||
# RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR] | |||
# RewriteCond http://10.2.0.100:8080/video-archive/archive-client/%{REQUEST_URI} -f [OR] | |||
# RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d | |||
# RewriteCond http://10.2.0.100:8080/video-archive/archive-client/%{REQUEST_URI} -d | |||
# RewriteRule / %{REQUEST_SCHEME}://10.2.0.99:8080/video-archive/archive-client/index.html [L] | |||
RewriteRule "/(.*)$" "%{REQUEST_SCHEME}://10.2.0. | RewriteRule "/(.*)$" "%{REQUEST_SCHEME}://10.2.0.100:8080/video-archive/archive-client/$1" [P] | ||
ErrorLog ${APACHE_LOG_DIR}/video.kirner.or.at-error.log | ErrorLog ${APACHE_LOG_DIR}/video.kirner.or.at-error.log |
Aktuelle Version vom 21. Juli 2020, 18:23 Uhr
Noch in Bearbeitung
Als Multimodule Maven Project
Siehe dazu Multimodule Maven Project
Links
https://www.devglan.com/spring-boot/spring-boot-angular-deployment
Als Maven Dependency
Dependency erstellen
cd dist/<projekt folder>/ ng build --prod zip -r angular-client.zip * # Kontrolle der Zip-Datei unzip -l angular-client.zip mvn install:install-file \ -Dfile=angular-client.zip \ -DgroupId=at.or.kirner \ -DartifactId=<project name>-client \ -Dversion=0.1 \ -Dpackaging=zip \ -DgeneratePom=true
Links
https://stackoverflow.com/questions/4955635/how-to-add-local-jar-files-to-a-maven-project
Dependency in WAR entpacken
... <properties> ... <client-version>${project.version}</client-version> ... </properties> ... <plugin> <!-- copy the latest angular client from the repository into the war file --> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-dependency-plugin</artifactId> <version>${dependency-plugin-version}</version> <executions> <execution> <id>unpack-web-client</id> <phase>prepare-package</phase> <goals> <goal>unpack</goal> </goals> <configuration> <artifactItems> <artifactItem> groupId>at.or.kirner</groupId> <artifactId><project name>-client</artifactId> <version>${project.version}</version> <type>zip</type> <overWrite>true</overWrite> <outputDirectory>${project.build.directory}/${project.artifactId}-${project.version}/angular-client</outputDirectory> </artifactItem> </artifactItems> </configuration> </execution> </executions> </plugin> ...
Links
https://maven.apache.org/plugins/maven-dependency-plugin/examples/unpacking-artifacts.html
webpack
Aktuell nicht verwendet
base-href
Da sich durch das Integrieren des Angular-Front-End in der WAR-Datei der Pfad ändert (z.B. 'http://10.0.0.100:8080/video-archive/archive-client') muss auch der Basispfad in Angular geändert werden.
Dazu im <head>
-Abschnitt vom index.html <base href="/">
folgendermaßen anpassen:
<script> if (window.location.port == 4200) { document.write('<base href="/">'); } else { document.write('<base href="/video-archive/archive-client/">'); } window['base-href'] = window.location.pathname; </script>
Und im Basis-Modul (z.B. 'app.module.ts') gehört APP_BASE_HREF angepasst:
import { APP_BASE_HREF } from '@angular/common'; ... @NgModule({ ... providers: [ { provide: APP_BASE_HREF, useValue: window['base-href'] } ] }) ...
Links
https://medium.com/@anandshende1994/setting-base-href-dynamically-in-angular-6-b7fe824848cf
Reloading
In src/main/webapp/WEB-INF/web.xml
folgenden Eintrag für Error-Page hinzufügen:
<error-page> <error-code>404</error-code> <location>/index.html</location> </error-page>
Links
Apache HTTP
<VirtualHost *:80> ServerName video.kirner.or.at RewriteEngine On RewriteOptions InheritDownBefore # If an existing asset or directory is requested go to it as it is # RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR] # RewriteCond http://10.2.0.100:8080/video-archive/archive-client/%{REQUEST_URI} -f [OR] # RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d # RewriteCond http://10.2.0.100:8080/video-archive/archive-client/%{REQUEST_URI} -d # RewriteRule / %{REQUEST_SCHEME}://10.2.0.99:8080/video-archive/archive-client/index.html [L] RewriteRule "/(.*)$" "%{REQUEST_SCHEME}://10.2.0.100:8080/video-archive/archive-client/$1" [P] ErrorLog ${APACHE_LOG_DIR}/video.kirner.or.at-error.log CustomLog ${APACHE_LOG_DIR}/video.kirner.or.at-access.log combined </VirtualHost>
https://httpd.apache.org/docs/trunk/rewrite/flags.html#flag_p
Links
https://angular.io/guide/deployment
https://www.netnea.com/cms/apache-tutorial-9-reverse-proxy-einrichten/
https://httpd.apache.org/docs/trunk/rewrite/
Zurück zu Angular