Deployment Angular: Unterschied zwischen den Versionen

Aus Tutorials
Zur Navigation springen Zur Suche springen
 
(43 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 2: Zeile 2:




== Mulitmodule Maven Project ==
== Als Multimodule Maven Project ==


=== Parent POM ===
Siehe dazu [[Multimodule Maven Project]]
 
=== Links ===
 
[https://www.devglan.com/spring-boot/spring-boot-angular-deployment https://www.devglan.com/spring-boot/spring-boot-angular-deployment]
 
== Als Maven Dependency ==
 
=== Dependency erstellen ===
 
<pre>
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
</pre>
 
==== Links ====
 
[https://stackoverflow.com/questions/4955635/how-to-add-local-jar-files-to-a-maven-project https://stackoverflow.com/questions/4955635/how-to-add-local-jar-files-to-a-maven-project]
 
=== Dependency in WAR entpacken ===


<pre>
<pre>
mvn archetype:generate -Dfilter=pom-root -DarchetypeVersion=RELEASE -DgroupId=at.or.kirner -DartifactId=angular-rest-test
...
 
<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>
 
...
</pre>
</pre>


v-DarchetypeVersion=RELEASE</code> verwendet automatisch die letzte Version
==== Links ====


<code>-DgroupId=<groupId></code> und <code>-DartifactId=<artifactId></code> müssen entsprechend angepasst werden.
[https://maven.apache.org/plugins/maven-dependency-plugin/examples/unpacking-artifacts.html https://maven.apache.org/plugins/maven-dependency-plugin/examples/unpacking-artifacts.html]


== webpack ==


Als Ergebnis wurde folgende POM-Datei generiert:
{{note|Aktuell nicht verwendet}}
 
[[webpack (Angular)|webpack]]
 
== 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 <code><head></code>-Abschnitt vom ''index.html'' <code><base href="/"></code> folgendermaßen anpassen:


<pre>
<pre>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
<script>
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  if (window.location.port == 4200) {
   <modelVersion>4.0.0</modelVersion>
    document.write('<base href="/">');
  <groupId>at.or.kirner</groupId>
   } else {
  <artifactId>angular-rest-test</artifactId>
    document.write('<base href="/video-archive/archive-client/">');
  <version>1.0-SNAPSHOT</version>
   }
   <packaging>pom</packaging>
   window['base-href'] = window.location.pathname;
   <name>angular-rest-test</name>
</script>
</project>
</pre>
</pre>


Und im Basis-Modul (z.B. 'app.module.ts') gehört ''APP_BASE_HREF'' angepasst:


<pre>
import { APP_BASE_HREF } from '@angular/common';
...
@NgModule({
...
  providers: [
    { provide: APP_BASE_HREF, useValue: window['base-href'] }
  ]
})
...
</pre>
=== Links ===
[https://medium.com/@anandshende1994/setting-base-href-dynamically-in-angular-6-b7fe824848cf https://medium.com/@anandshende1994/setting-base-href-dynamically-in-angular-6-b7fe824848cf]
== Reloading ==
In <code>src/main/webapp/WEB-INF/web.xml</code> folgenden Eintrag für Error-Page hinzufügen:


<pre>
<pre>
mvn archetype:generate -DgroupId=at.or.kirner  -DartifactId=service
<error-page>
mvn archetype:generate -DgroupId=at.or.kirner  -DartifactId=webapp
    <error-code>404</error-code>
    <location>/index.html</location>
</error-page>
</pre>
</pre>


=== Links ===
=== Links ===


[https://www.baeldung.com/maven-multi-module https://www.baeldung.com/maven-multi-module]
[https://stackoverflow.com/questions/47366792/404-error-on-refresh-for-angularv4-deployed-on-tomcat-server https://stackoverflow.com/questions/47366792/404-error-on-refresh-for-angularv4-deployed-on-tomcat-server]


== webpack ==
== Apache HTTP ==
 
<pre>
<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]


{{note|Aktuell nicht verwendet}}
        RewriteRule            "/(.*)$"  "%{REQUEST_SCHEME}://10.2.0.100:8080/video-archive/archive-client/$1" [P]


[[webpack (Angular)|webpack]]
        ErrorLog ${APACHE_LOG_DIR}/video.kirner.or.at-error.log
        CustomLog ${APACHE_LOG_DIR}/video.kirner.or.at-access.log combined
</VirtualHost>
</pre>


== Als Sub-Module ==
[https://httpd.apache.org/docs/trunk/rewrite/flags.html#flag_p https://httpd.apache.org/docs/trunk/rewrite/flags.html#flag_p]


=== Links ===
=== Links ===


[https://github.com/eirslett/frontend-maven-plugin https://github.com/eirslett/frontend-maven-plugin]
[https://angular.io/guide/deployment https://angular.io/guide/deployment]


[https://stackoverflow.com/questions/45915379/how-to-setup-angular-4-inside-a-maven-based-java-war-project https://stackoverflow.com/questions/45915379/how-to-setup-angular-4-inside-a-maven-based-java-war-project]
[https://www.netnea.com/cms/apache-tutorial-9-reverse-proxy-einrichten/ https://www.netnea.com/cms/apache-tutorial-9-reverse-proxy-einrichten/]


[https://dzone.com/articles/building-a-web-app-using-spring-boot-angular-6-and https://dzone.com/articles/building-a-web-app-using-spring-boot-angular-6-and]
[https://httpd.apache.org/docs/trunk/rewrite/ https://httpd.apache.org/docs/trunk/rewrite/]




Zurück zu [[Angular#Deployment|Angular]]
Zurück zu [[Angular#Deployment|Angular]]

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

webpack

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

https://stackoverflow.com/questions/47366792/404-error-on-refresh-for-angularv4-deployed-on-tomcat-server

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

Abgerufen von „https://tutorials.kirner.or.at/tutorials/index.php?title=Deployment_Angular&oldid=8324“