Deployment Angular
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>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
# # If an existing asset or directory is requested go to it as it is
# RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
# RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
# RewriteRule ^ - [L]
#
# # If the requested resource doesn't exist, use index.html
# RewriteRule ^ /index.html
RewriteOptions InheritDownBefore
RewriteRule ^/(.*)$ %{REQUEST_SCHEME}://10.2.0.99:8080/video-archive/archive-client/$1 [L]
ErrorLog ${APACHE_LOG_DIR}/video.kirner.or.at-error.log
CustomLog ${APACHE_LOG_DIR}/video.kirner.or.at-access.log combined
</VirtualHost>
<VirtualHost *:80>
ServerName video.kirner.or.at
RewriteEngine On
RewriteOptions InheritDownBefore
RewriteCond %{HTTP_HOST} !^video.kirner.or.at
RewriteRule ^/(.*)$ %{REQUEST_SCHEME}://10.2.0.99:8080/video-archive/archive-client/$1 [L]
# If an existing asset or directory is requested go to it as it is
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} !-f
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} !-d
RewriteRule ^ %{REQUEST_SCHEME}://10.2.0.99:8080/video-archive/archive-client/ [L]
# If the requested resource doesn't exist, use index.html
# RewriteRule ^ /index.html [L]
ErrorLog ${APACHE_LOG_DIR}/video.kirner.or.at-error.log
CustomLog ${APACHE_LOG_DIR}/video.kirner.or.at-access.log combined
</VirtualHost>
<VirtualHost *:80>
ServerName video.kirner.or.at
RewriteEngine On
RewriteOptions InheritDownBefore
RewriteRule "/(.*)$" "%{REQUEST_SCHEME}://10.2.0.99: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